Like much of the internet today, Minx and the Mee.Nu websites (including yours) use CSS to manage the appearance of the pages.  CSS stands for "Cascading Style Sheets" and are used to separate the content from the presentation.  The words you write and the pictures you post are the content, while the presentation covers things like the colors of the various parts of your site and how the various bits are displayed.

A great place for inspiration is the CSS Zen Garden website.  There are literally hundreds of sample pages to look through, and the amazing thing is that each site uses the same content file!  The only difference between them is the CSS, which shows you just how incredibly versatile and powerful it is.

To change the look of your web pages, you'll need to modify the CSS that controls your site.  First, we'll copy the default into your own folder, make a backup copy (always a wise thing to do) and then set up your site to use the new CSS file.

1.  Create your own CSS Folder.  On the editing menu sidebar, click on the the Folders link and you'll see a list of all the folders that exist for your site (such as Images and Files).  Down at the bottom of the list is a button marked New.  Click that.

On the next screen, there are a few text boxes to fill out.  For Type, enter "Directory".  Name and Path are both "CSS".  Scroll down to where you see Index Template and Page Template and enter "list.file" and "edit.file" respectively (note that those words are separated by a period). At the bottom, click the Save button.

2.  Copy the default CSS.  On the editing sidebar, click on the New File link.  The folder needs to be "CSS" and in the path box type in "http://mee.nu/css/mee.nu.css" (without the quotes).  Then click the Upload button.

Now, if you click on the Folders link in the sidebar, you'll see your CSS folder that you created in step 1.  Click on the "css" in the path column and you'll see a file in that folder named "mee.nu.css".  That's your copy of the default.  We'll leave that alone and make any changes to a copy of that.

Click on the file name and you'll see a "File Info" screen.  On the File Operations box, select "Copy" and in the File text box next to it, give it the new file name, such as "my-site-name.css".  The important part is the .css extension, don't forget that part.  Click the Go button and you'll see that you've made a copy of the default template.  This copy is the CSS file that you'll be toying with.

Any changes you make won't be seen unless we do one more thing, which is point your website towards the new CSS file.

3.  Use the new CSS file.  Click on the Templates link on the editing sidebar, and then click on the Header template.  You'll see the Header template (ta-daaaahhhh!).

About six lines down you'll see this line:
<link rel="stylesheet" href="/css/mee.css" type="text/css" />

The bit in red is the part where you want to put in "my-blog-name.mee.nu/css/my-blog-name.css" (this time you want the quote in there).  Obviously, you'll put your real site name there instead of  the italicized my-blog-name.

4.  Tinkering.  The easiest way to fiddle with your CSS (if you've never done it before) is to save a copy of it to your PC and use a text editor such as Wordpad to make changes.  Then upload the modified file to your site and overlay it on the old version (that's why we made a backup copy of the original).  Look around inside the CSS and you'll see where various bits and pieces are described, and where you can change settings to get different colors.  A nice color chart can be found here at Mandarin Designs, which is a great resource for HTML and CSS ideas and examples. 

Bonus!  Color Theory:  From the color chart, you can see that colors are described by six characters, each ranging from zero to 'F' (it's hexidecimal).  The first two characters control the amount of red, the middle two green, and the last two blue (ever hear of "RGB"?), so that combinations make up the gazillions of colors available.  Straight white is "FFFFFF" and straight black is "000000".

Posted by: RocketJones at 05:59 PM under Presentation | Comments (3) | Add Comment
Post contains 729 words, total size 5 kb.