jump to navigation

Theme Customisation March 18, 2010

Posted by Ben Smith in Uncategorized.

In this lesson we learnt about how to customise a theme for our website.

To change strip across the top

Editor > working with style sheet > see Front Page template

Go to style sheet ( style.css  at bottom of  the list of files on the right)

body container > header container > header

select header container

see body container where it has the bg /background url

In the my Blog page there is a band of blue that is repeated all the way down.

Chris cut this url out.

Then the header blue band vanished.

Note the spec for  the header ( width, height, margin)

He could can now create a header, 960 wide x 60 high

Add a colour.

Save as  header.png  ( png means portable network graphics)

To add an image

Go to Media Library

–          See file url

–          upload header to media library

–          paste in new background at header  >  background

–          go to My Blog and refresh.

–          Cheyne looked at http://images.google.co.uk for popcorn image.

–          make the size 960 x 60

–          The popcorn image is now imported in the place of the original blue band. ( Cheyne did this)

To edit themes

Go to Edit Themes, see theme files > front page

You can decide on colours.

Find their code, and put in the new colour code.

To change text

Open text editor. Copy all and paste into notepad. Find the code and replace it with the colour you want.

To change the Font : go to Style Sheet > font .  You will see the basic font is Verdana. There are only a few fonts available. Note the gap between the lines as well.

You can change the Footer in the same way. First get its code and then replace this code with the new colour code.

 This shows how you can control the appearance of your site.

We also drafted an idea of how our website would look.



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: