Anyone want to give me some free CSS help?

Replies to This Discussion

Permalink Reply by cooper on September 29, 2009 at 8:06pm

First make sure the theme is compatible with the version of WP you are using, it almost looks like that theme is made for wp 2.6 and I'm not sure it's been updated. I assume you are using the most current version of WP 2.84.
You have this
h1, h2, h3 { font-family: Georgia, 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; }

h2, h3 { font-weight: bold; }
h1 {
font-weight: normal;
font-size: 3em;
text-align: left;
}

#title .description {
font-size: 1.2em;
text-align: left;
padding-right:20px;
padding-top:15px;
float:right;
}

You can change the size of the font under description, and I believe in order to change the type of font for the title, and not the rest you'd have to take this line h1, h2, h3 { font-family: Georgia, 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; } - take h1 out of it, and make a seperate line for H1 with the font you want. How it shows up on all browsers depends more on the theme construction, than the header setting itself I think.


I think there are some experts here and they will probably pop in soon. It would take me hours to figure it out whereas those who di it all the time can tell you fairly quickly if they can help or not. It might be a good idea for you to post you CSS for them to look at, it makes it more convenient for them to do a quick pass and see if they can help without too much difficulty.

• ▶ Reply

Permalink Reply by Nick Tabick on September 30, 2009 at 6:00pm

Actually, I prefer seeing the CSS in-action on the site, so a link to where it's being used is just fine with me.

I, as well as most of the web developers you'll find, actually have tools for both Firefox and IE that allow us to manipulate the CSS and test the effects of those changes in real-time. I could eyeball solutions, but it's nice to be able to test them before posting. (The previously posted solution was verified in this manner. ;) )

Also, Ning allows a lot of HTML to be used in their text fields, which for most people means that what they post (if it happens to be a snippet from a page) will usually end up having random bits eaten as everyone else's browsers attempt to interpret the (unescaped) pasted text as actual HTML. The proper use of a pastebin just adds confusion to the mix, too, so I think the way Tabitha wrote her request up is just fine.

As a side note, WordPress themes will generally behave just fine with newer versions of WordPress than they were intended for. You might miss out on things (generally, older themes don't have widget support enabled, and the threaded comments are still new enough that many themes don't have support for them yet, though these things can be added), but provided you can live without those features or can add them in, you should be alright. I can't say that all themes will work in 100% of cases (especially themes that do their magic, like content retrieval, in non-standard or unsupported ways), but for the most part you should be just fine.

(Oh, and for the record, Tabitha is using WordPress 2.8.4, according to the <meta>-generator tag.)

• ▶ Reply

Permalink Reply by Nick Tabick on September 30, 2009 at 5:39pm

1. I don't mean to sound rude, but which header are you talking about? As of this posting, you have a text-based "Wearable Joy" in the upper-left corner of the page and the same text in a script-like font embedded into the image you use at the top. If you're talking about the text-based version, the best thing for you to do is continue sticking to web-safe fonts like Arial, Helvetica, Verdana, Times New Roman, etc.
2. The easiest way to accomplish this would be to change your min-width property to a forced width by replacing it with width: 1024px; in your .body class (since you seem to want the site to remain fixed-width).
3. Add background: #fff; to the appropriate CSS class for your content area (#page should work nicely in this case) and then change the .body background color as appropriate.

Let me know if there's anything else I can help you with.

• ▶ Reply

Permalink Reply by Tabitha on October 1, 2009 at 11:54am

1) Ah -- when I first posted this discussion topic, I hadn't added the script version of "Wearable Joy" to my header image. Now what I need to figure out is a) how to get rid of the upper-left, text-based "Wearable Joy" AND how to make my header image a clickable link back to the home page.

2) I changed it to 1024px -- Yay! That's better. Thanks!

3) Done, and you are my favorite person ever.

A couple more tweaks I'd like to figure out (in addition to the header follow-up in #1)...

- My sidebar looks kind of funky because the Calendar and the Category dropdown appear to be left-aligned, while the green headers for each are centered. Where can I find the proper place to center the whole sidebar?

- Is there an easy way to get my search bar to show up in the lower left portion of my header image? I'm planning on taking out "Taking care of beadness" and putting it below the script title (it may be done by the time you look again), so I'd just want it to say "Search the blog" or something, and be inside the header image area...

Anyway, already I feel a lot better about the look of my site (however basic it still may be)...thank you SO much!

• ▶ Reply

Permalink Reply by Nick Tabick on October 1, 2009 at 5:10pm

This is my second time writing this post because I wasn't paying attention and closed the wrong window.

1. To remove the text version of your blog's header and subheader, you will need to modify your theme's header.php file. You'll want to remove the entire <div id="title"> block (including its matching </div>), which should remove everything above your image. To make it a link, the most standards-compliant way of doing it would be to move the image from the background into a new layer and modify the stylesheet to put everything back into place. It would be easier for you to e-mail me a copy of your theme than try to go back and forth and I can work some magic on it for you.
2. You can make tweaks to these by adding styling for the #calendar_wrap and #cat objects in your CSS file.
3. After following my instructions above for removing the header/subheader, my recommendation would be to add the Search widget to your sidebar. If you prefer it on top of the image as you described and not as a sidebar widget, we can do that, but it will be a little more involved.
4. Depending on how dirty you want to get, there are plugins that you can use to add a feed widget or you can add <a href="<?php bloginfo('atom_feed'); ?>">Subscribe</a> (or something similar) to the appropriate place in your theme's sidebar.php file.

• ▶ Reply

Permalink Reply by Tabitha on October 1, 2009 at 8:37pm

1, 3, 4) Oof...tried a couple of things to remove the header and almost gave myself a heart attack because stuff started looking funky. I think I fixed it, but I'd LOVE to let you play with the theme and do it like a pro. Where should I send it? And uh...how? I mean, should I just send you the text for all of the theme files? (There's the Style CSS sheet, then a bunch of .php template file thingies...) Also: I don't think I really NEED to make the header a link, since there is the "Home" tab up top... And I put a search widget in the sidebar, so we can get rid of the upper one. AND I added a feed widget, which will do for now. Kinda wish I could get the orange icon to be a more complimentary color to the rest of the scheme...
2) Couldn't find the #calendar_wrap or #cat stuff to make those changes...

Thanks again!

• ▶ Reply

Permalink Reply by Nick Tabick on October 1, 2009 at 9:51pm

The easiest way to make this happen would be to zip up the entire theme folder (images, stylesheets, PHP template, and all) and e-mail it to one of the e-mail addresses listed here.

I'll take care of your calendar changes, too.

• ▶ Reply

Permalink Reply by Tabitha on October 1, 2009 at 1:27pm

Oh, and also: What's the easiest/coolest/most effective way to put an RSS subscribe button on my page? There is a link at the very bottom that came with the template, but I don't think it's really going to do much good...

• ▶ Reply

Permalink Reply by nicopolitan on October 1, 2009 at 1:27pm

I was about to bring up the tech peeps like cooper and NickTabick but it seems you guys jumped on this already. :D

I guess that means the only thing I should add here is to use absolute links over PHP calls as much as you can to help inch browser load time forward. Just a common best practice. NickTabick knows what I'm talking about.

• ▶ Reply

Permalink Reply by Nick Tabick on October 1, 2009 at 5:12pm

Except for one itty-bitty minor detail: Hard-coding a feed URL would mean that the link might not respect the permalink settings if they were changed. ;) K.I.S.S. reigns supreme.

• ▶ Reply

Permalink Reply by nicopolitan on October 29, 2009 at 2:37pm

I guess this is why feedburner solves so many problems.

• ▶ Reply