Designer toolkit


Published on

This presentation describes the development of Themes for website builder.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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!!!