Long ago on my main site Rocket Jones, we had a discussion on elements of design.  Colors, fonts, clutter, doo-dads like music and more all came under (sometimes heated) debate.  A lot of the example links have expired, but I still think that it's a decent primer on things to consider while putting together a website.

Style vs Substance
Style vs Substance Revisited

Posted by: RocketJones at 08:02 PM under Presentation | Comments (2) | Add Comment
Post contains 66 words, total size 1 kb.

Approximately one in twelve people may not be able to use your web site properly due to some form of color blindness. At best, your site won't look to a color blind person as you designed it, at worst, this could mean that text is unreadable, navigation unusable and elements are invisible.

Posted by: RocketJones at 07:49 PM under Presentation | Comments (1) | Add Comment
Post contains 71 words, total size 1 kb.

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.

So you've come up with some categories to organize your writing, now lets do something with the idea.

In your sidebar template, paste the following snippet:

<h2>Categories</h2>
<ul>
[categories]
<li><a href="/[category.path]">[category.name]</a></li>
[/categories]
</ul>

Save the template, and then go check out your page.  You should see a list on your sidebar showing each of your categories.  Even better, you can click on the category names and all the posts under that category will be displayed.  If you add categories in the future, they'll automatically be included too.

Posted by: RocketJones at 04:29 PM under Presentation | No Comments | Add Comment
Post contains 89 words, total size 1 kb.

One thing that many bloggers do to keep things organized is to give each of their posts a category.  Suppose you're going to be posting once in a while about your favorite baseball team, the Toledo Mudhens.  You've decided that it would be useful to have a category called "Mudhen Mania" so that folks can find all of your Toledo Mudhen posts in one easy click.

Here's how.  Go into your editing menu, and on the sidebar under the Manage header, click on "Folders".  Look at the list returned, and find the line labeled "Category", with name and path both being "Example".

Click on the word "Example" under the Name column and you'll see the folder template set up for the category Example.  Take note of how things are filled out (scroll down too, or you'll miss the Index and Page template settings).  Back out and then at the bottom of your list you'll see a button marked "New".

Click that, and you'll see a blank form to fill out.  Type will be "Category", Name and Path will both be "Mudhen Mania", and the Link To will be "Category:Mudhen Mania (/Mudhen Mania)".

Scroll down and set your Index field to "Index.Entry" and the Page field to "Page.Entry" (note those periods between the words).  Then scroll down some more until you see the button marked "Save".  Click it and you're good to go.

Now, when you create a new post, in the pull-down Category list you can select "Mudhen Mania" and the post will be categorized that way.

Next time, we'll set up a list of all your Categories in the sidebar and show how to assign multiple categories to a single post.

FYI:  the category of this post is Presentation.  It's listed below next to the timestamp, and the category icon above (ABC123) will always appear next to posts in the Presentation category.

Posted by: RocketJones at 04:09 PM under Presentation | Comments (10) | Add Comment
Post contains 317 words, total size 2 kb.