Saturday, September 6, 2008

Applying CSS to this theme

Well, hopefully it is an improvement. I've tried to take the default font sizes in px, and tune them in using pt's, I also enlarged a few things. All of which are improvements, except for the entry text with I enlarged a bit higher then I wanted, in the hopes that a change from 1280x800 on a 15.4" widescreen running FreeBSD + X.Org to a 1600x1200 on a 19" conventional running Windows XP at 144dpi over normal, will hopefully still be legible in Google Chrome >_>.


Ok, so I'm getty cooky, but I like that little web browser loool. If the font size isn't to hard to read on my desktop, I'll probably lower it to ~11pt or so. I know, courtesy of the Windows / Mac OS / X11 differences, that working in points isn't very good, but I prefer it, and it's my LJ to post on after all. I think though, it's a bit nicer then using pixels all over.


At the time of this LJ post, my theme is 'Under Fire Smooth Sailing by Michael Raffoul', being allowed to add some of my own Cascading Style Sheets (CSS) code in the customize theme menu, I've effected these changes with the following:

/* the header title, basically my user name */
div.header-title {
     font-size: 23pt;
}

/* the sub title, what reads 'captains log' at this time of writing */
div.header-subtitle {
     font-size: 18pt;
}

/* the nav menu above the header */
div.header-menu {
     font-size: 9pt;
}

/* the thing that currently says 'recent entries' above the first entry */
div.body-title {
     font-size: 14pt;
}

/* all of the sidebox titles use this class */
div.sideboxTitle {
     font-size: 9pt;
}

/* posts summery list links and calendar numerals */
div.summeryList a, div.latestmonth-inactive, div.latestmonth-active {
     font-size: 7.5pt;
}

/* my links list on the side bar, 
 *
 *  XXX I wanted this a little larger 
 */
div.sideboxContent#systemlinks > div.listitem a {
     font-size: 9pt;
}

/* entry header, e.g. date/time - subject */
div.entryHeader {
     font-size: 11pt;   /* XXX slightly larger */
}

/* the text of the actual entry -- larger text !*/
div.entryText, div.entryText a {
     font-size: 12pt;
}

div.entryLinkbar ul > li > a {
     font-size: 10pt;
}

Ahh, I love CSS at times.