Need help? Check out our Support site, then

Font help

  1. Hi,

    I need some help with the CSS for our blog at . I haven't purchased the CSS upgrade yet, but I will; I want to verify first that we will be able to make these changes. We are using the default Kubrick theme, due to its simple two-column design.

    I've been reading up more in this forum, and it seems like one of the sandbox themes might also work for us, but I'm not sure. Before we dive in with any theme, I'd like to know if we will be able to make these changes.

    Here's a list of changes I'd like to make. We were able to make a couple of CSS changes (in preview mode), and those are marked DONE.

    1. Reduce the vertical size of the header to about 150 pixels tall. DONE

    2a. Use 13px verdana font for body text on the page.
    b. Use a larger size and bold for the title of each post.
    c. Use 11px verdana font for the date and author under the title.
    d. Orange links. DONE
    e. I might want to use 11px verdana for the blogroll links on the right. The titles of the blogroll links should be a little larger than the links, but not as large as the blog post titles. (We don't need to use the blogroll feature for the links, if there's a better way to post those links there; they will rarely change.)

    3. Change the order of the blogroll items and subitems on the right. Can we do that with CSS? Or is there another way? I used a hack in early 2007 to reorder the links, but the hack (using multiple spaces to order each link) is no longer working.

    This is the CSS code that worked well for us so far:

    #headerimg {

    #header {

    a {

    a:hover {

    a:active {

    The wordpress template doesn't seem to specifically label all the fields I want to change with css selectors. So we can't say "author name" should be "this style". We figure something like "h2 div small" might work, but that's not specific to the field and may bleed over to other aspects of the design. Also, it looks like the wordpress css processor does parsing/munging of user supplied css. What you put in isn't exactly what comes out.

    Here's a few other things I'd like to change, but these are lower priority:

    1. Display the right column on blog post pages (in addition to the home page) with the links, categories, calendar, et al.
    2. Put the timestamp and author in the footer of the post, not in the header under the title.
    3. Double the amount of blank space between posts on the home page.
    4. Send header clicks to another url, such as .

    Any help you can offer would be much appreciated!


    -- Ed

    this faq states that staff do not provide css help. the css upgrade is not recommended to people with limited or no css knowledge.

    that said, there are css experts around the forums occasionally who might be able to help you. i have limited css knowledge, but as far as i know, you can do almost everything you requested above except directing header clicks to another url.

    what do you mean by subitems? if you're referring to sidebar content, you can rearrange them to the order you please in the widgets page. dashboard -> presentation -> widgets if you're looking to reorder the blogroll, you can manage them by separating them into different categories (though it will always be arranged in alphabetical order).

  3. 2. Yes
    3. Don't think so

    1. No
    2. I think you could probably do this
    3. Yes
    4. No

    You might find the 'Kubrick for Sandbox' a useful starting point. The code is here:

    But take Sulz's warning seriously. You do have to be able to do this pretty much on your own. The free preview is your friend! Don't buy until you're sure.

  4. <i>Also, it looks like the wordpress css processor does parsing/munging of user supplied css. What you put in isn't exactly what comes out.</i>

    What do you mean by this? Can you give an example?

  5. I would encourage you not to use pixel units for font size; it's bad practice, bad for usability purposes... it's frowned upon. Use em or % instead (i.e. font-size: 0.7em;) for screen, and pt (points) for print.

    If you want to know how to translate pixels to ems, use this formula:

    px/16 = em

    So, if you want your font to be of 11px size, but defined in ems, divide 11/16 and the result is: 0.7em

    I see rosclarke also pointed you to the Kubrick version for Sandbox which uses child selectors. I have to tell you that child selectors <stong>don't work in the Stylesheet editor. At least not for me... Every time I try to use a child selector, the software translates the '>' to '&gt;', thus rendering useless. You won't see this in the CSS Editor, but in source code.


  6. devblog - can you tell us how to use %? (I often wondered about that em that I saw in the stylesheets. Thanks for the info!)

  7. Vivian,

    Let's see: 1em == 100%

    So, you can write:

    p {font: normal 1em Arial;}


    p {font: normal 100% Arial;}

    So, 0.7em == 70%

    Basically, is up to you how you define your font sizes... either 0.75em or 75%


  8. BTW,

    This is an excellent reference you might find useful:

    Convert em,px,pt and % in CSS


  9. Thanks for that info!

Topic Closed

This topic has been closed to new replies.

About this Topic