×
Namespaces

Variants
Actions
Revision as of 10:57, 7 May 2012 by hamishwillee (Talk | contribs)

How to customize Nokia Mobile Web Templates for mid range devices

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: deepikagohil (28 Oct 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (07 May 2012)


This article explains how to customize Nokia web templates for mid-range devices and mainly aims Beginners.

I would recommend beginners to refer these mentioned articles first to get primary knowledge about the same:

How to develop a simple website using Nokia Mobile Web Templates

How to use Nokia Mobile Web Templates for mid range devices to create a simple website

You can say that this is the 3rd article of this series.

Contents

Introduction

Nokia Mobile Web Templates are pre-designed web components which can be used to make your website more attractive on Nokia mobiles. We have used Nokia Mobile Web Templates for mid range devices in this example and customize them as per our needs.

The example mentioned here shows a simple mobile website using Nokia Mobile web templates for mid-end devices and you can refer this example web-site at http://constructionsmidcust.99k.org. This is the customized version of http://constructionsmid.99k.org .

In this Project we have customized the mentioned Nokia mobile web components (for mid range devices) offered by Nokia Mobile web Templates:

  • Branding
  • Breadcrumbs
  • Box
  • Content
  • Tables
  • Footer

The next section describes the simple guidelines with explanation to customize Nokia Mobile web components. Customization is done in CSS file. You need to have basic CSS knowledge to perform this. (If you don't have, you can refer http://www.w3schools.com, which is a on-line tutorial for learning these technologies.)

Example website: http://constructionsmidcust.99k.org

We have customize the web-site http://constructionsmid.99k.org . You can easily find out how we have customized these components.


A simple mobile website using Nokia Mobile Web Templates for mid range devices

Mobileweb1.jpg

A customized mobile website using Nokia Mobile Web Templates for mid range devices

Mobileweb2.jpg


Customization

Branding:

Brandingmidcust.jpg

code:

/* changes */
 
body div#header {
......
background-image: url('../images/sprite-header-change.png');
.......
}

Description:

Branding is used with div tag and header id to display the company logo and name with background. We have changed the background image in CSS file to make it look good. The code snippet shows the

changes made on the http://constructionsmid.99k.org 's CSS file.


Breadcrumbs:

Breadcrumbsmidcust.jpg

code:

/* changes */
 
body ul.breadcrumbs {
..........
background: #E6E6FA;
}

Description:

We have added background color to Breadcrumbs.


Box:

Boxmidcust.jpg

code:

/* changes */
body div.box p.box-text {
......
background-color: #FFE4E1;
}

Description:

We changed background color of Box container as per our need.


Content:

Header h1:

Content1midcust.jpg

Header h2:

Content2midcust.jpg

code:

/* changes */
body h1 {
...
background: #D87093;
}
 
body h2 {
.......
background: #E6E6FA;
color: #CD5C5C;
font-style: italic;
}

Description:

We changed background color of headers h1 and color, background color h2 as per our need and added font-style to h2.


Tables:

Tablesmidcust.jpg

code:

/* changes */
body th, tfoot {
...
background-color: #FFDAB9;
...
}
 
body td {
...
color: #FF0000;
....
}

Description:

We have changed the background color and color of the items of the table as shown in the code.


Footer:

Footermidcust.jpg

code:

/* changes to
* FOOTER
*/

 
body div#footer {
...
background: url(../images/mine.png) ;
...
}


Description:

We have changed the background image in the footer division as per our need.

Testing

These sites are tested on Nokia S60 emulator.

You can test them in your own Nokia mid range devices and see which of the web templates makes the difference.


Links

A simple mobile website without using Nokia Mobile Web Templates website: http://constructions.99k.org

A mobile website with using Nokia Mobile Web Templates for High end devices website: http://constructionstemplates.99k.org

A simple mobile website using Nokia Mobile Web Templates for mid range devices website: http://constructionsmid.99k.org

A mobile website using customized Nokia Mobile Web Templates for mid range devices website: http://constructionsmidcust.99k.org

Summary

You can learn how to customize Nokia Web Templates ( for mid range devices) with the help of this article.

40 page views in the last 30 days.
×