Help needed with stylesheet

Hi, I tried to change my stylesheet and I was partly succesfull.

I just can't seem to find where the colors of the buttons in the picture below are defined.

I want to chaneg to colors of the buttons only.

Can someone give me some pointers please?

[Linked Image]

As stated over at central; these gradients are controlled by the "tdheader" class in the stylesheet editor.

You can use various tools in firefox (such as the colorpicker) which will display the class(es) for specific areas.

Originally Posted by mikey81

I want to chaneg to colors of the buttons only.

Can someone give me some pointers please?

sure i can. here's what you do.

i'll give an example where you change just the 'Forum Options' button.

open up /templates/default/postlist.tpl

find:

Code

<table width="100%" class="t_standard">
<tr>
<td class="tdheader" style="cursor: pointer" id="options_control" onclick="showHideMenu('options_control','options_popup')">
{$lang.FORUM_OPTIONS} <img style="vertical-align: middle" src="{$config.BASE_URL}/images/{$style_array.general}/toggle_open.gif" alt="" />
</td></tr>
</table>

note where it says 'class="tdheader"' .. that's the style that is shared by all. since you want to be specific for just buttons, you can use the 'Cascade' in Css and add another class like so:

Code

<table width="100%" class="t_standard">
<tr>
<td class="tdheader muhaha" style="cursor: pointer" id="options_control" onclick="showHideMenu('options_control','options_popup')">
{$lang.FORUM_OPTIONS} <img style="vertical-align: middle" src="{$config.BASE_URL}/images/{$style_array.general}/toggle_open.gif" alt="" />
</td></tr>
</table>

now all you have to do is go to your styles editor and edit the style in questions.

go down to the Extra CSS section and paste this in it:

Code

.muhaha {
background: hotpink;
color: #000;
}

for example. now when the browser renders that button, it cascades to the second class, which overrides the tdheader for background and color.

obviousely you aren't going with hotpink, but i use that as an example. also, you probably aren't going to use 'muhaha' either, but more likely a descriptive name like '.my-buttons'

you can do this for other parts of that template to style the other buttons as well.

now as for the pager stuff, it's a different story and once you get this first part, i can show you how to do your pager

Thx!

I have changed the file in your example and did the same with the pagecalculator. It now looks perfect.

Mike