Designer toolkit
Download as PPT, PDF1 like372 views
The document discusses how to create custom themes for websites built using the langoor.net website builder platform. It explains that themes define the overall look and feel through styling guidelines. It outlines the default layout structure that langoor.net websites use, including areas like headers, footers, sidebars, and main content. It also discusses how all elements on the site are considered widgets that can be styled. The document provides examples of how to style elements like the page body, container wrapper, and headers by modifying CSS properties. It emphasizes that theme creators can customize styles and use class names to style different types of widgets like navigation menus.
Designer toolkit
- 1. Designer Toolkit - Harsha B N http://twitter.com/harshabn808
- 2. Introduction Themes are the basic styling guidelines for a website. These styling guidelines are responsible for the look and feel of the website. langoor.net, being a website builder provides many in-built themes which are written and developed by internal langoor.net developers. At the same time, website owners would love to have their own themes, according to their own tastes for colors/gradients.
- 3. Introduction So, here is the presentation explaining how to write custom themes for the websites created using langoor.net.
- 4. langoor.net Website Layout Every website has a basic layout on which the content is distributed. Generally, a layout includes a header, footer, main content area and a sidebar. Based on the complexity of the website, a layout may include many more areas and sub-areas. The mixture of theme and layout forms the basic look and feel of the website (along with the content, of course).
- 5. Website Layout All websites created using langoor.net will have the following default layout – Header Sidebar Main Area Footer Canvas Canvas
- 7. Website Layout Layout - 2 Header Left Sidebar Main Area Footer Canvas Canvas Right Sidebar
- 8. Website Layout The basic websites created using langoor.net will have the following areas – Header (#header) Footer (#footer) Sidebar1 (#sidebar1) Sidebar2 (#sidebar2) Main Area (#mainarea) Further, all these areas are contained within a canvas (#canvas).
- 9. Widgets Widgets are everything in the websites developed on langoor.net. Anything and everything is a widget. A text block is a widget, a Heading is a widget, a table is a widget, and a YouTube video is a widget. These areas and widgets form the website pages in langoor.net websites. Further all these areas and widgets are wrapped in their respective wrappers. E.g., #canvas is wrapped in a #canvas-wrapper; header is wrapped inside a #header-wrapper, etc.
- 10. Now comes Styling Not Coding…
- 11. Styling – langoor.net A default style sheet is the best place to start understanding how theme styles are written for langoor.net websites. Let’s take an example of body, canvas, a header as an example for writing the styles for a theme. body { margin: 0px; padding: 0px; background: #FFFFFF url('img/body_bg_slice.png') repeat left top; }
- 12. Styling – langoor.net #canvas-wrapper { word-wrap: break-word; margin: 0px auto; width: 800px; background-color: #FFFFFF; border: 1px solid #FFFFFF; } Canvas-wrapper has been styled to position the website content in the center (margin: 0px auto) with a width of 800px (so that it works on basic resolution of 600*800).
- 13. Styling – langoor.net #header { background: #FFFFFF url() no-repeat left top; min-height: 40px; } The header is styled to have a minimum height of 40px and background of white color without any image. All these styles can be overwritten as per the theme-creator’s requirements. Some of the styles can be eliminated, new styles can be added, existing styles can be modified, etc.
- 14. Styling – langoor.net In a similar way, all the areas can be styled according to the theme-creator’s creativity. The next important step in writing themes for langoor.net would be to style different widgets available. The widget owners would add their own styles for their widgets. But the basic widgets like page-navigation, banners, captions, etc. can be given different styles by the theme-creators.
- 15. Styling widgets – langoor.net Widgets are identified by class names Page Navigation Menu Code – <div id="Menu_1" class="page-nav"> <ul class="nav-list horizontal-nav-list right"> <li><a href="#page_id=1“ onclick="javascript:Langoor.Editor.PageConstructor.LoadPage(1);">Home</a></li> <li><a href="#page_id=45" onclick="javascript:Langoor.Editor.PageConstructor.LoadPage(45);">About Us</a></li> </ul> </div>
- 16. Styling Widgets – langoor.net Can be styled differently using the class-names .page-nav and .nav-list and .horizontal-nav-list . Here, .nav-list would be a generic class for all the navigation elements present on the page, whereas .horizontal-nav-list would be specific to horizontal navigation. Though .right / .left are separate classes in the default style-sheet, they can be made a part of .horizontal-nav-list.
- 17. Time for a Demo!!!