designer toolkit

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 LayoutAll 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 CanvasRight

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 awidth 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.netWidgets 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>

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