Learning about CSS

  • Author
    Posts
  • #23746

    andy
    Member

    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.)

    #23945

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

    http://www.westciv.com/style_master/academy/css_tutorial/

    #23976

    lorelle
    Member
    #23977

    timethief
    Member

    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
    http://wordpress.com/forums/topic.php?id=3230&replies=24

    http://wordpress.com/forums/topic.php?id=3243&replies=6

    http://wordpress.com/forums/topic.php?id=3239&replies=12

    http://wordpress.com/forums/topic.php?id=3247&replies=1

    #23978

    podz
    Member

    This is the CSS forum :)

    Scroll down on the main page.

    #23979

    timethief
    Member

    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.

    #23982

    drmike
    Member

    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.

    #23983

    andy
    Member

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

    #23986

    sdrane
    Member

    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.

    #23987

    wank
    Member

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

    #23992

    andy
    Member

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

    #24026

    wank
    Member

    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?

    #24029

    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

    #24041

    wank
    Member

    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?’

    #24050

    drmike
    Member

    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?

    #24054

    drmike
    Member

    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,
    -drmike

    #24494

    pooyesh
    Member

    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>

    #24495

    cornell
    Member

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

    #24569

    onemorecup
    Member

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

    Onemorecup

    #24571

    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.