PDA

View Full Version : css wp question



billbenson
06-24-2009, 02:43 AM
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.

vangogh
06-24-2009, 10:37 AM
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.

billbenson
06-24-2009, 03:33 PM
I'll take a look at the FF plugin. That sounds helpful.

Thanks.

vangogh
06-24-2009, 03:47 PM
If you have an hour or two look through all the developer plugins. The web developer toolbar (https://addons.mozilla.org/en-US/firefox/addon/60) is my favorite and another great one is Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843), 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 (https://addons.mozilla.org/en-US/firefox/addon/2104).

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 (https://addons.mozilla.org/en-US/firefox/addon/1852), which lets you copy table data from a web page and more easily paste it into Excel.

billbenson
06-24-2009, 04:43 PM
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.

vangogh
06-24-2009, 05:15 PM
I have colorzilla installed and another extension called measure it, which lets you measure how many px things are on the page.

billbenson
07-20-2009, 10:37 PM
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?

vangogh
07-21-2009, 12:28 AM
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



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

billbenson
07-21-2009, 12:32 AM
Thanks, one of these days I may actually figure this stuff out.

vangogh
07-21-2009, 02:12 AM
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.

rezzy
07-21-2009, 11:00 AM
I find it hardest having to work with other peoples code, if its not well thought out or well commented.

The aformentioned plugins are life savers and I can not see being a developer without them. As with any programttic language, learning the method to the madness is always the hardest part. Once you get past that, its always a bit easier.

vangogh
07-21-2009, 12:02 PM
Yeah. It depends on who did the coding of course. There's usually a short learning curve even with good code while you get used to an author's style, etc, but when you get handed some really bad code you almost prefer to junk it and just start from scratch.

I really appreciate when I work on a site and the developer did a good job with their code.

billbenson
08-16-2009, 04:05 PM
I have a sidebar box in wp. It has a gradiant image as the background in the css. Its dark at the bottom and grows lighter at the top. The div grows, so if the div is taller than the image, its white above the image (I guess that is the page background color).

Is there a way to either stretch the background image to meet the height of the div, or to put the background image over a background color so the top is the top above the image is the div background color? Something like the following (doesn't work)

.block-content {

background-image: url(images/rightsidebg.jpg);
background-repeat: no-repeat;
background-color: 0a40a4;

background-position: bottom left;
}

I guess I could just stick the image on the page with a -1 z index?

vangogh
08-17-2009, 11:18 AM
Stretching the image is probably not going to be the most workable idea. Having it site on top of a color of your choice is. Your code looks like it has a simple error, which is why it's not working.

background-color: 0a40a4; should be background-color: #0a40a4;

You forgot the # before the hex color. If fixing that still doesn't work try placing the background-color code before the background-image code. Actually I would write the whole thing as one line.

.block-content {background: #0a40a4 url("images/rightsidebg.jpg") top left no-repeat;}

You shouldn't need to use a z-index. In general using absolute or relative positioning and z-indexes is not what you're looking for. More often than not it only causes more problems.

billbenson
08-17-2009, 12:26 PM
That worked VG. Thanks. Commas, #'s etc are so easy to miss when you are looking for errors. Should have popped it into W3 I guess. I'm always chasing for that stuff in php, but at least there you get an error with a line number.

vangogh
08-17-2009, 07:53 PM
I've learned over the years that the syntax is the first thing you should check. I can't even tell you how many times I spent hours looking for a solution when the problem was a missing semicolon or something similar. Unfortunately with css you don't get an error. It just won't work.

There are some css specific editors out there. I don't use one myself, but I wonder if any will have some kind of built in error reporting to catch the syntax mistakes.

billbenson
08-17-2009, 07:58 PM
If you run into any decent css editors, let us know. I've looked and haven't found anything that would check syntax or suggest code.

vangogh
08-17-2009, 08:17 PM
Just doing a quick search now. You might like CSSED (http://cssed.sourceforge.net/), since it's for Linux. I think it validates your syntax if I read it right.

Here are a couple of posts I found listing a variety of css editors, mostly Mac and Windows, but some Linux and cross platform

CSS Editors Reviewed (http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/) - Smashing Magazine

7 Free CSS Editors, Which Is the Best? You Choose (http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/) - SpeckyBoy

There are plenty more posts too with css editor roundups.

vangogh
08-17-2009, 08:17 PM
Just doing a quick search now. You might like CSSED (http://cssed.sourceforge.net/), since it's for Linux. I think it validates your syntax if I read it right.

Here are a couple of posts I found listing a variety of css editors, mostly Mac and Windows, but some Linux and cross platform

CSS Editors Reviewed (http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/) - Smashing Magazine

7 Free CSS Editors, Which Is the Best? You Choose (http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/) - SpeckyBoy

There are plenty more posts too with css editor roundups.

billbenson
08-17-2009, 09:14 PM
Don't recall seeing that one before VG. I'll give it a try this weekend.