New CSS
10 Feb 2009 10:13
10 Feb 2009 10:13
10 Feb 2009 10:13
10 Feb 2009 10:13
nav_first.pngFirst: blog:1
My first blog!
Edited: 06 Nov 2011 11:49 by: James Kanjo
Comments: 2
Tags: ads blog css facebook first free myspace program programming wiki wikidot
nav_prev.pngPrevious: blog:22
Update: Worst day in history
Edited: 07 Jul 2011 13:59 by: James Kanjo
Comments: 1
Tags: australia bush death deaths fire history toll tragedy tragic victoria worst
Last: blog:77
Wikidot: CSS Per Category
Edited: 04 Mar 2012 05:54 by: James Kanjo
Comments: 3
Tags: programming wikidot
nav_last.png
Next: blog:24
If it ain't broken, then don't fix it
Edited: 05 Jul 2011 13:22 by: James Kanjo
Comments: 1
Tags: body cream face mistake pimples
nav_next.png

If you are an observant blog-watcher, you will have noticed a few changes in mine. For one, I changed the colour scheme to a deep red, and I've darkened the top navigators. You should also have noticed that the gaps between content-boxes has been significantly shortened — to 2 pixels, in case you were wondering.

Why?

The gaps between the tables are natural gaps — not manually configured ones. I had created extra columns and rows, using very complicated CSS to organise them (albeit, poorly). Whilst I thought that the larger gaps were more aesthetically pleasing, sometimes you just need to make sacrifices to keep things simple. It also improves the quality of the code in my site, and the coding itself is almost aesthetically pleasing! Compare the pair:

Old CSS for content boxes: New CSS for content boxes:
.jameskanjo-intro, .jameskanjo-content {
    border-collapse: collapse;
    width: 100%;
}
 
.jameskanjo-intro {
    margin: 10px 0 0 0;
}
 
.jameskanjo-content {
    margin: 0 0 10px 0;
}
 
.jameskanjo-row-intro {
    height: 16px;
}
 
.jameskanjo-row {
    height: 17px;
}
 
.jameskanjo-cell, .jameskanjo-cell-intro {
    vertical-align: top;
    border: 2px solid #000;
    padding: 10px 10px 10px 10px;
}
 
.jameskanjo-cell {
    padding-top: 0px;
}
 
.jameskanjo-gap {
    width: 13px;
}
.jameskanjo-wide {
    width: 716px;
    margin-top: 10px;
}
 
.jameskanjo-table {
    width: 744px;
    position: relative;
    left: -2px;
}
 
.jameskanjo-cell, .jameskanjo-wide {
    border: 2px solid #000;
    padding: 0 10px 0 10px;
    vertical-align: top;
}

The new code is much prettier! But the real improvement is in my source-code readability. The learning curve of comprehending my old 'organised' system was terribly high. I even got stuck trying to understand it a few months after creating the system. I also noticed that some web-browsers displayed my content-boxes incorrectly (how unusual for FireFox). Now there should be no problems.

At the same time, I decided to "upgrade" certain code on the website. For instance, now I can choose whether to display the discussion module, the source-code button or even the whole blog segment… just by adding/removing tags (_hidden-discussion _hidden-source and _private … FYI).

Perhaps you noticed my "NEW Photos" header in the side-bar. Actually, that function was always there, I just hadn't added any new photos for it to appear =D

I updated the guidelines and created a new page dedicated to copyrighted material; this page aids me to present copyright content for only a week, and display it without providing viewers the ability to extract/copy it from the website (and thus preventing sharing/piracy).

Why the red? Here's the link between my old colour scheme, and my new one. I reckon the new colour scheme is classier.

Finally, I decided to add a "Related Pages" section at the bottom of each blog article. Unfortunately, because all of my blog articles are tagged with "blog", all of them are related (silly me, it achieved nothing to begin with, so why did I do it?). So I had to untag "blog" from all of my blog articles. It will be interesting to see how effective this turns out to be…

So, what do you think about my site refresh?

~ James Kanjo

Comments:

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
All content on this page is subject to the guidelines outlined here