Help. CSS issue with SMF forum

Started by platinummack, November 25, 2014, 11:45:10 PM

Previous topic - Next topic

platinummack

Here is my forum



SO I wanted to know how to change the board name links
These would be general discussion, introduce yourself, field reports
I can't seem to find the CSS class or div within which I can locate the a link property to manipulate its color

Also, I want to change the color of the table heading blocks background

These would be

General Category

The Best of McMaax

Maaximum Seduction.....VIP forum....Info centre.

These table heading blocks are the ones whose background I want to change to another color and I can't locate the div/class in Css that governs the background color.




Kindred

I suggest using Firefox and installing firebug.  This will enable you to query and discover the specific css that any location uses.., 
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

platinummack

I'm using the inspect tool in Chrome. I just can't seem to determine what class/div is responsible for them. I will try firebug and see if that makes a difference. Thanks.

Kindred

I prefer firebug over the chrome inspect - I think it is a cleaner view. :)
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

ARG01

In index.css

.table_list tbody.content td.info a.subject {
    color: #800000;
    font-size: 110%;
    font-weight: bold;
}


h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
    color: #fff;
}
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

platinummack

The subject link color code is exact and did work.

However isn't the second one for links and not the background color?
Also isn't #fff white? The color of the background for the table headers is a greyish

platinummack

I used firebug and it looks like it "inherited" the color from the main body background of the wrapper which is that grey color.

ARG01

Quote from: platinummack on November 26, 2014, 02:46:00 PM
I used firebug and it looks like it "inherited" the color from the main body background of the wrapper which is that grey color.

No. Try looking at the color for this around line 417.

.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

platinummack

I see so that grey color is actually a "block.png" repeated x times.
I can remove that and then it will be left to white (#fff)
then I can change that to my preferred color.
Make sense?

ARG01

I don't think that we are on the same page here? I was under the impression that you wanted to change the text color.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

platinummack

No, I know how to do that, the background of those TD bars

platinummack

It's a block(img)
So how do I replace that with the color I want?

ARG01

Well that is a bit trickier. Since it is the main_block.png image, you have four choices.

1. Using a graphics program such as Photoshop, Gimp, etc., you will need to manipulate the image to change the color of that specific area.

2. Look in index.css for all instances of main_block.png that have a position setting of "0 -160px" and change that position to use an alternate area of the main_block.png.

3. Create a new, separate image about 31px X around 10px and name it main_block_alt.png. Look in index.css for all instances of main_block.png that have a position setting of "0 -160px" and adjust the settings for the new image and set it to repeat (repeat-x)

Example:
div.cat_bar {
    background: url("../images/theme/main_block_alt.png") 0 0 repeat-x;
    height: 31px;
    margin-bottom: 1px;
    overflow: hidden;
    padding-left: 9px;
}


4. Look in index.css for all instances of main_block.png that have a position setting of "0 -160px" and simply switch the image settings for a color.

Example:
div.cat_bar {
    background: #91000;
    height: 31px;
    margin-bottom: 1px;
    overflow: hidden;
    padding-left: 9px;
}
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

platinummack

Here is the solution. I got this from someone else

You can change the following block of code:
Code:
h4.catbg, h4.catbg2,h3.catbg, h3.catbg2, .table_list tbody.header td.catbg {
background: url(../images/theme/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
}
And have the "background" attribute instead do:
Code:
h4.catbg, h4.catbg2,h3.catbg, h3.catbg2, .table_list tbody.header td.catbg {
background: #cc4343;
background-color: #cc4343;
padding-right: 9px;
}
But note if you do that, you need to also change the corner block color (which by removing the image, you won't make it rounded):
Code:
div.cat_bar {
background: url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
}
That background attribute can be changed to a Hex color code as well, but won't be rounded anymore without additional CSS.
So change:
Code:
div.cat_bar {
background: #cc4343;
background-color: #cc4343;




My forum works now with the colors I wanted. You can close this thread now.

ARG01

Example #4 in my posts would have worked the same. If you use background: #cc4343; you don't need background-color: #cc4343;. Either will work, but both are not needed. If you want rounded corners you just need to add a radius to CSS.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Advertisement: