Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: css wp question

  1. #1
    Member Needs New Keyboard Array
    Join Date
    Aug 2008
    Posts
    4,128

    Default css wp question

    I have plaid around with wp a bit, but not much. I installed it last night on a domain I'm not using so a friend who wants to learn to write web sites can play with it. I also want to use it on some other sites. Two questions relating to css.

    For my friend who doesn't know anything about web design, is there a way to change font sizes in the non code editor or is he going to need to add classes or id's in the html mode?

    VG, how do you work with the css when writing a page? By that; do you keep a cheat sheet around with the classes and and what they do (h1 12px white text class is X) or do you keep the style sheet open all the time (kind of clumbsy to always be scanning through a css sheet). Do you tile the page? Since you primarily write in code which is what I do, I was curious how you work when you need to at least know what the classes are as you are writing a page. If you are dealing with a bunch of sites its unlikely that all the classes are the same on every site.

  2. #2
    Post Impressionist Array vangogh's Avatar
    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    13,259

    Default

    If the sites are ones I've developed then it's likely that the html structure, the classes, the ids, etc are the same or similar since I try to be consistent across sites. If it's a site I didn't develop then yes I do keep looking through the files. My editor allows for tabbed pages so I probably have the css file and any other relevant files open at the same time. If the previous developer knew their stuff it's usually pretty easy to find what needs to be changed. If not then it's going back and forth in files to find what needs to be changed.

    I also use the developer tools built in or added to the browsers I use to find things quickly. For FF there's an extension called CSS Viewer (css view?) which lets you mouse over parts of the page as you view it in your browser and it reveals which html element and class/id you're viewing.

    Also since I've been doing this now for a few years it's not too hard for me to find what I need in the files. It becomes second nature after awhile.

    For your friend he has to change things in the code. There's WYSIWYG unless someone built a plugin. He can download an editor and ftp program or use the file editor built into the WP admin.
    l Search Engine Friendly Web Design | Vanseo Design
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Custom WordPress Themes |Get my book about Design Fundamentals

  3. #3
    Member Needs New Keyboard Array
    Join Date
    Aug 2008
    Posts
    4,128

    Default

    I'll take a look at the FF plugin. That sounds helpful.

    Thanks.

  4. #4
    Post Impressionist Array vangogh's Avatar
    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    13,259

    Default

    If you have an hour or two look through all the developer plugins. The web developer toolbar is my favorite and another great one is Firebug, which also has many other extensions for debugging that work on top of it.

    And while I'm at it here's the link to CSS Viewer.

    There are many, many more useful extensions depending on what works best for you. Do a search for excel while you're there. You'll find some extensions like Table2Clipboard, which lets you copy table data from a web page and more easily paste it into Excel.
    l Search Engine Friendly Web Design | Vanseo Design
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Custom WordPress Themes |Get my book about Design Fundamentals

  5. #5
    Member Needs New Keyboard Array
    Join Date
    Aug 2008
    Posts
    4,128

    Default

    Funny, I had a couple of those already installed but I forgot about them. Particularly Firebug. I also have colorzilla installed which is an eyedropper to see the color on a site. Thats nice for when you see a site with a color scheme you like, you can grab it. It's not real accurate, but helpful at times.

  6. #6
    Post Impressionist Array vangogh's Avatar
    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    13,259

    Default

    I have colorzilla installed and another extension called measure it, which lets you measure how many px things are on the page.
    l Search Engine Friendly Web Design | Vanseo Design
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Custom WordPress Themes |Get my book about Design Fundamentals

  7. #7
    Member Needs New Keyboard Array
    Join Date
    Aug 2008
    Posts
    4,128

    Default

    fonts, inheritance and stuff like that

    In selecting font sizes, it was my impression that a good way to control page fonts in css is to state a size in the body tag (say 12px). After that use em or percentages. em's seem to be more popular.

    My page source starts out like:

    <body>
    <div id="wrapper">

    Neither the body or wrapper have any kind of font size setting. The rest of the page uses em's with the exception of padding for individual items.

    In the css sheet I tried font-size: 5px; for the body. It did not affect anything. In the wrapper it affected the page fonts as would be expected.

    I'm assuming this is an inheritance issue. So why wouldn't the body tag have any effect. Also, since I couldn't find any default base size px, em's... Does the browser assume some default. I was using FF. It is my understanding that em's are strictly a ratio of the parent size?

    __________________________________________-
    I take that back, both the body and wrapper work. Had a typo. The body appears to be the parent of "wrapper" which makes sense.

    That still leaves one question though. If you don't declare a size in any parents in px and use em throughout the rest of the css, what is it going to use for the default size? Is it browser dependent?
    Last edited by billbenson; 07-21-2009 at 04:35 AM.

  8. #8
    Post Impressionist Array vangogh's Avatar
    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    13,259

    Default

    I had a whole answer about why the font-size didn't work on the body, but now I see you had a typo, which was one of the possibilities I was going to suggest.

    In the past ems were recommended over px because with px you couldn't resize the text in IE. I think IE8 fixed that, but IE7 may still need the relative measurements.

    It's up to the browser and maybe the individual changing the browser settings for the default size. 16px is the common default, though it's possible browsers can deviate from that. Don't hold me to it, but I think all browsers may default to 16px. If not all then most.

    You were right that there's an inheritance thing and it can get a little confusing. Say you have

    HTML Code:
    <div id="wrap1">
     <div id="wrap2">
      <div id="wrap3">
      </div>
     </div>
    </div>
    and say you set the body to be 16px.

    Now if you give the wrap1 div a font-size of 0.75em it should be 12px. wrap2 and wrap3 would also be at 12px due to inheritance. If you then wanted to change wrap2 to be 8px you might think to set it to 0.5em since 8 is half of 16, but you'd really need to set it to 0.67em since you'd need 8/12.

    One trick I've seen is to set your body to 0.625em which would be 10px (assuming a 16px default) That makes your ems easier to set later since you're dividing by 10.

    If you also set the widths in your layout to use em measurements you can get a nice fluid design that expands and contracts as the text is resized.
    l Search Engine Friendly Web Design | Vanseo Design
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Custom WordPress Themes |Get my book about Design Fundamentals

  9. #9
    Member Needs New Keyboard Array
    Join Date
    Aug 2008
    Posts
    4,128

    Default

    Thanks, one of these days I may actually figure this stuff out.

  10. #10
    Post Impressionist Array vangogh's Avatar
    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    13,259

    Default

    It really does get easier. You do a few things and one doesn't work so you spend a few frustrating hours trying to figure out why. Once you figure it out you never make the mistake again and it's one less thing to worry about.

    If there's anything you're having trouble with let me know. I'm always looking for ideas for blog posts. If there's anything you'd like me to write a tutorial about just say the word.
    l Search Engine Friendly Web Design | Vanseo Design
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Custom WordPress Themes |Get my book about Design Fundamentals

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •