Thread

I’m redesigning my site. I’ve got the dev stuff done, and I’m working the colors for the forum to match. I haven’t deployed the site itself but I’m working on the forum live.

I’ve found where most of the color statements are, but there are a couple things escaping me right now.

1. The color in the background pagination Notice the page numbers… background is still purple.

2. thread title text. That still looks purple too but I’ve changed what I thought was the value. I also want to reduce the size

3. Page width. I don’t want a fluid width. I want it set the same as the new site which is 1024. Well 1020px. I changed it in the html statement but it hasn’t changed it.

Can anyone help here? is there a diagram around that shows what colors and statements do what? it’s impossible to do this like I’m doing it. I’m guessing 80% of the time.

Oh, here’s the forum so you can see what I’m missing:

My Forum

Hey JT,

I know what you’re going through. Customizing the forum templates isn’t exactly the easiest thing you do. A nice little tip I got from Boyink helped me a lot. See this thread to find out more.

Good luck,
-Mats

Yeah that’s a good point.

vBulletin has this feature built in. You can turn on debug and it adds comments to the top and bottom of every template for this exact reason.

Thanks!

As for the width, I just got lazy and put a width and margin statements in the body element.

But the header doesn’t seem to like that. it’s still too wide.

Yeah, I think this feature should be built in into EE, too. (Paul et al, are you listening…?  😉 )

Well I’m stumped. Regardless of the template comments I simply can’t figure out why that dang header is wider than the body statement allows. This is crazy!

And yes it would be great if it were added (comment options). Just like vb did would be great. where you turn debug mode on to use it.

Well I’m stumped. Regardless of the template comments I simply can’t figure out why that dang header is wider than the body statement allows. This is crazy!

Just to make sure, I pulled out my pixel ruler and measured the header. It’s 1020px, just as the body:width selector says it should be. Maybe I’m missing something?

-Mats

If that’s the case the header would fit inside a 1024X768 window, but it doesn’t. i’m going to say it’s at least 1030px

The forum itself is correctly adopting 1020

Wow that’s bizarre. You’re right.

Do you get a side to side scroll bar at 1024X768?

It looks like my browse window might be lying to me…. hmmm

JT, did you start from the Grey theme or the Developer theme?  The latter is much easier to restyle, as it has fewer rules, neutral colors, and no background images.  Also you are generally always better off copying and renaming a theme instead of modifying an existing theme, as updates will be much easier to work through.

If there are particular elements that you are unsure of what is affecting their styling, I highly recommend either Web Inspector if you use Safari, and Firebug if you use Firebox.  Both allow you to use your mouse to inspect individual elements and reveal what CSS rules and attributes are affecting their styling.  Using these tools:

2. thread title text. That still looks purple too but I’ve changed what I thought was the value. I also want to reduce the size

Styling for a is controlling the color.  The font size it is inheriting from .topicTitle

3. Page width. I don’t want a fluid width. I want it set the same as the new site which is 1024. Well 1020px. I changed it in the html statement but it hasn’t changed it.

The width of the body is 1020px, and is being respected in my browser.  Is that not what you are seeing?

If a window is 1024 and the content is tall enough to demand a vertical scroll bar, then a 1020 width won’t fit in the window, as scroll bars are more than 4px wide. 😉

If a window is 1024 and the content is tall enough to demand a vertical scroll bar, then a 1020 width won’t fit in the window, as scroll bars are more than 4px wide. 😉

Yes, that’s just what I was going to suggest. Thanks for filling me in, Derek!  😉

If a window is 1024 and the content is tall enough to demand a vertical scroll bar, then a 1020 width won’t fit in the window, as scroll bars are more than 4px wide. 😉

bah.. lol you’re right. i can’t believe I wasn’t thinking that way. 😊 yeah it’s fine. i reduced it to 1000 and it’s just fine.

I used the grey theme. Once I’m done I’ll rename the theme and do other stuff I’m just not ready yet. To be honest I wasn’t even planning on doing this right now. I was playing around with Photoshop cs3 and thought I’d create an automation and run it on a folder. So i changed the hue/saturation so the grey images were blue and just ran it, then uploaded.

The thing is, I like the layout, I just didn’t care for the colors and they didn’t match the site. but like I said I’ll rename it.

I figured there wasn’t any sense in re-inventing the wheel. Since the layout looked nice there wasn’t any reason not to use it.

JT, did you start from the Grey theme or the Developer theme?  The latter is much easier to restyle, as it has fewer rules, neutral colors, and no background images.  Also you are generally always better off copying and renaming a theme instead of modifying an existing theme, as updates will be much easier to work through.

If there are particular elements that you are unsure of what is affecting their styling, I highly recommend either Web Inspector if you use Safari, and Firebug if you use Firebox.  Both allow you to use your mouse to inspect individual elements and reveal what CSS rules and attributes are affecting their styling.  Using these tools:

2. thread title text. That still looks purple too but I’ve changed what I thought was the value. I also want to reduce the size

Styling for a is controlling the color.  The font size it is inheriting from .topicTitle

3. Page width. I don’t want a fluid width. I want it set the same as the new site which is 1024. Well 1020px. I changed it in the html statement but it hasn’t changed it.

The width of the body is 1020px, and is being respected in my browser.  Is that not what you are seeing?

Yeah I found the answer about the ‘a’ tag when i grabbed all the css stuff and pasted it into topstyle. made it much easier to follow.