Designer toolkit
Upcoming SlideShare
Loading in...5
×
 

Designer toolkit

on

  • 2,063 views

This presentation describes the development of Themes for langoor.net website builder.

This presentation describes the development of Themes for langoor.net website builder.

Statistics

Views

Total Views
2,063
Views on SlideShare
892
Embed Views
1,171

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 1,171

http://extend.langoor.net 1171

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designer toolkit Designer toolkit Presentation Transcript

  • Designer Toolkit - Harsha B N http://twitter.com/harshabn808
  • 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.
  • Introduction
    • So, here is the presentation explaining how to write custom themes for the websites created using langoor.net.
  • 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).
  • Website Layout
    • All websites created using langoor.net will have the following default layout –
    Header Sidebar Main Area Footer Canvas Canvas
  • Website Layout
  • Website Layout
    • Layout - 2
    Header Left Sidebar Main Area Footer Canvas Canvas Right Sidebar
  • 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).
  • 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.
  • Now comes Styling Not Coding… 
  • 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;
    • }
  • 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).
  • 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.
  • 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.
  • Styling widgets – langoor.net
    • Widgets are identified by class names
    • Page Navigation Menu Code –
    • <div id=&quot;Menu_1&quot; class=&quot;page-nav&quot;>
    • <ul class=&quot;nav-list horizontal-nav-list right&quot;>
    • <li><a href=&quot;#page_id=1“ onclick=&quot;javascript:Langoor.Editor.PageConstructor.LoadPage(1);&quot;>Home</a></li>
    • <li><a href=&quot;#page_id=45&quot;
    • onclick=&quot;javascript:Langoor.Editor.PageConstructor.LoadPage(45);&quot;>About Us</a></li>
    • </ul>
    • </div>
  • 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.
  • Time for a Demo!!!