Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designer toolkit


Published on

This presentation describes the development of Themes for website builder.

Published in: Technology
  • Be the first to comment

Designer toolkit

  1. 1. Designer Toolkit - Harsha B N
  2. 2. Introduction <ul><li>Themes are the basic styling guidelines for a website. These styling guidelines are responsible for the look and feel of the website. </li></ul><ul><li>, being a website builder provides many in-built themes which are written and developed by internal developers. </li></ul><ul><li>At the same time, website owners would love to have their own themes, according to their own tastes for colors/gradients. </li></ul>
  3. 3. Introduction <ul><li>So, here is the presentation explaining how to write custom themes for the websites created using </li></ul>
  4. 4. Website Layout <ul><li>Every website has a basic layout on which the content is distributed. </li></ul><ul><li>Generally, a layout includes a header, footer, main content area and a sidebar. </li></ul><ul><li>Based on the complexity of the website, a layout may include many more areas and sub-areas. </li></ul><ul><li>The mixture of theme and layout forms the basic look and feel of the website (along with the content, of course). </li></ul>
  5. 5. Website Layout <ul><li>All websites created using will have the following default layout – </li></ul>Header Sidebar Main Area Footer Canvas Canvas
  6. 6. Website Layout
  7. 7. Website Layout <ul><li>Layout - 2 </li></ul>Header Left Sidebar Main Area Footer Canvas Canvas Right Sidebar
  8. 8. Website Layout <ul><li>The basic websites created using will have the following areas – </li></ul><ul><li>Header (#header) </li></ul><ul><li>Footer (#footer) </li></ul><ul><li>Sidebar1 (#sidebar1) </li></ul><ul><li>Sidebar2 (#sidebar2) </li></ul><ul><li>Main Area (#mainarea) </li></ul><ul><li>Further, all these areas are contained within a canvas (#canvas). </li></ul>
  9. 9. Widgets <ul><li>Widgets are everything in the websites developed on Anything and everything is a widget. </li></ul><ul><li>A text block is a widget, a Heading is a widget, a table is a widget, and a YouTube video is a widget. </li></ul><ul><li>These areas and widgets form the website pages in websites. </li></ul><ul><li>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. </li></ul>
  10. 10. Now comes Styling Not Coding… 
  11. 11. Styling – <ul><li>A default style sheet is the best place to start understanding how theme styles are written for websites. Let’s take an example of body, canvas, a header as an example for writing the styles for a theme. </li></ul><ul><li>body { </li></ul><ul><li>margin: 0px; </li></ul><ul><li>padding: 0px; </li></ul><ul><li>background: #FFFFFF url('img/body_bg_slice.png') repeat left top; </li></ul><ul><li>} </li></ul>
  12. 12. Styling – <ul><li>#canvas-wrapper { </li></ul><ul><li>word-wrap: break-word; </li></ul><ul><li>margin: 0px auto; </li></ul><ul><li>width: 800px; </li></ul><ul><li>background-color: #FFFFFF; </li></ul><ul><li>border: 1px solid #FFFFFF; </li></ul><ul><li>} </li></ul><ul><li>Canvas-wrapper has been styled to position the website content in the center (margin: 0px auto) with a </li></ul><ul><li>width of 800px (so that it works on basic resolution of 600*800). </li></ul>
  13. 13. Styling – <ul><li>#header { </li></ul><ul><li>background: #FFFFFF url() no-repeat left top; </li></ul><ul><li>min-height: 40px; </li></ul><ul><li>} </li></ul><ul><li>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. </li></ul>
  14. 14. Styling – <ul><li>In a similar way, all the areas can be styled according to the theme-creator’s creativity. </li></ul><ul><li>The next important step in writing themes for would be to style different widgets available. </li></ul><ul><li>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. </li></ul>
  15. 15. Styling widgets – <ul><li>Widgets are identified by class names </li></ul><ul><li>Page Navigation Menu Code – </li></ul><ul><li><div id=&quot;Menu_1&quot; class=&quot;page-nav&quot;> </li></ul><ul><li><ul class=&quot;nav-list horizontal-nav-list right&quot;> </li></ul><ul><li><li><a href=&quot;#page_id=1“ onclick=&quot;javascript:Langoor.Editor.PageConstructor.LoadPage(1);&quot;>Home</a></li> </li></ul><ul><li><li><a href=&quot;#page_id=45&quot; </li></ul><ul><li>onclick=&quot;javascript:Langoor.Editor.PageConstructor.LoadPage(45);&quot;>About Us</a></li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul>
  16. 16. Styling Widgets – <ul><li>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. </li></ul><ul><li>Though .right / .left are separate classes in the default style-sheet, they can be made a part of .horizontal-nav-list. </li></ul>
  17. 17. Time for a Demo!!!