Learning about CSS

  • Author
  • #23746


    Be sure to read our Editing CSS page, as it explains the ins-and-outs of editing CSS using WordPress.com’s Custom Design upgrade.

    We have also provided some outside resources in our support documentation. (You can always ask questions in the CSS Customization forum as well.)


    this is the one i use, day in and day out:





    Sheesh – With 5 threads (and counting) currently on the CSS run here it certainly looks like css people need a special forum section all to themselves.

    I’m wondering if there is any specific reason why the forum here can’t be split into two topical theme sections like it is over here http://wordpress.org/support/

    Current CSS threads






    This is the CSS forum :)

    Scroll down on the main page.



    Ahhhh – so it’s intended to be all intermingled together, eh. I didn’t quite get that weirdness but I’ve got it now. I was thinking along the lines of separation.



    real quick here as I’m running for a bus. How does one pull up the theme’s css? All I get is a blank box.



    You don’t “pull up the theme’s css”–you make your own that is added to the page after the theme’s css.



    Drmike, I think that what you put in the box will overide the theme’s css. But, if you want to see the theme’s default css, I guess the easy way to do it would be to view the HTML source of the blog and get the address of the css stylesheet from the <link rel=”stylesheet” href = “location of the css file”>. I got the default Kubrick css in this way.



    So we’re building on top of the default stylesheets, rather than replacing them? Like Livejournal overrides?



    wank, there is a theme called Sandbox that lets you turn off all default stylesheets.



    I’m aware of that; but can people use the Sandbox skins provided and put presentational stuff in the custom CSS, or do they need to start from scratch? It sounds like the former, with the latter as an option for people who want to handle positioning themselves, but it isn’t being made very clear.

    OK, let’s try again. This is how I’m assuming stylesheets for Sandbox will work:

    basic stylesheet (same for everyone using the theme, sets font sizes & margins and stuff, cannot be edited)
    + optional ‘skin’ stylesheet to control the number and position of columns (selected by user in presentation panel, available to all users, cannot be edited)
    + optional custom CSS (written by user or copy/pasted from somewhere else, available to paid users only)

    (To be pedantic, the web developer extension suggests that the skin loads before the basic stylesheet, but I’ve kept this order as it makes more sense conceptually)

    Most other themes:

    basic stylesheet
    + optional custom CSS

    Because the custom CSS is being loaded after the basic stylesheet, it can override its settings. But if you leave a property alone in the custom CSS, it will default to the basic stylesheet (fairly obvious to anyone who already knows about CSS, but it may not be quite as obvious to everyone else).

    Am I missing anything?


    as near as i can tell, the sandbox doesn’t have a basic stylesheet. hence the 1998 appearance. so it’s just

    skin stylesheet (if selected, otherwise nothing)
    +user stylesheet



    That’s what I thought initially, but the almighty Firefox web developer toolbar told me otherwise. The basic stylesheet for Sandbox sets a whole bunch of margins and weighs in at about 5kb.

    It’s important to get this clear because designers of custom stylesheets need to know what elements have already been coded for. Otherwise, they’re going to be ‘huh? where did that margin come from?’



    I gotta admit that I’m lost now but I’ll point out that I still haven’t played with it yet. (It’s Saturday. I only get 6 hours of computer time and I lost 3 of that helping someone with an issue local to here.)

    I’m with Wank though as to my understanding of the topic.

    If I make modifications to a currently defined div container, will my modifications override the defaults? Say on something like column width?



    OK, I just took two seconds and plugged in the entire CSS file from Sapphire (However you spell it) and just made changes to the width. And only the widths.

    It accepted the changes fine. Royally screwed up the background images of course since their widths remained the same of course but the width was adjusted.

    It did strip out the comments from the CSS file just to let folks know. So if you comment your CSS, be aware that those comments will be removed.

    I think I can work with that. :)

    Hope this helps,



    style type=”text/css”>.bar11214{width: 360;height: 362;background-color: black;} img .img11214{padding: 0;margin: 0;}</style><table><tr height=”362″><td class=”bar11214″ width=”360″><div class=”bar11214″><img class=”img11214″vspace=”0″ src=”http://bandtools.nabbr.com/bandtools/media/Work/linkBar2.jpg” width=”360″ height=”20″ border=”0″ useMap=”#NabbrMap” /><Map name=”NabbrMap” id=”NabbrMap”></Map><embed vspace=”0″ src=”http://bandtools.nabbr.com/bandtools/flash.php?bandid=3&instanceid=33bbe0e17acf875be762c2a87732366f&affiliateid=13&autoplay=1″ width=”360″ height=”320″ quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash”></embed><br><img class =”img11214″ src=”http://bandtools.nabbr.com/bandtools/media/Work/linkBar.jpg” border=”0″ useMap=”#NabbrMap2″ /><Map name=”NabbrMap2″ id=”NabbrMap2″></Map></div></td></tr></table>



    Pooyesh – your post (neither of them!) makes no sense. It’s just html.



    Thanks Key Master aka Andy for the links. Awesome! Also lorelle thank you very, very much!



    Hi everyone.
    I wanted to ask for some help regarding CSS.
    I’m new at it, and need some help in learning about it. I’ve been working with html for some time now, but never CSS.
    So I am using the new dark theme, and I wanted to change the font size. I’ve tried to adjust the font size from 12px to 8px and when I previewed the changes it had moved the main content over, squishing the widget area.
    What part of the code do I change to specifically change the font for the main & widget content?

The topic ‘Learning about CSS’ is closed to new replies.