problem with .time and other .css styles

[pab]

So I wanted to change the header of my forum to match that of my (joomla) frontpage. And while I did manage to do just that there are some problems mainly in the css/font department.

See my screenshot

edit: And I have no idea how to make thumbnails on this forum, long live the auto thumbnail script .
As you can see in the screenshort certain parts are displayed in a bold style like the time and the amount of readers. Now I checked .time

and that is:
.time
{
color: #D12D2D;
}

So somehow it gets overruled by one of the joomla css templates I put in the header, which I find strange, since they are placed below the vbulletin css stuff.

Any idea what I did wrong? I attached the source of the new forum style to this post.

[Princeton]

most likely inherited from your joomla css

scan your css for "span"

[pab]

Ok, but take this one for example that determines the span for the time:
<span class="time">15:35</span>
Nowhere in one of the joomla css files can I find a span .time?

[Princeton]

you need to look for "span" not "time" ...
the style is inherited via the 'span' values found on your joomla css files (vbulletin doesn't add bold to span)

[pab]

Sorry that I am a noob on this subject, but the joomla css files are filled with spam ehm I mean span for example from template_css.css:

span.pathway {
display: block;
line-height: 220%;
font-weight: normal;
height: 22px;
line-height: 22px;
overflow: hidden;
margin-bottom: 15px;
}

span.pathway img {
float: none;
vertical-align: top;
width: 7px;
height: 22px;
padding-right: 8px;
background: url(../images/inset-arrow.png) 0 50% no-repeat;
}

span.pathway a {
float: none;
padding: 0 10px 0 0;

span.important-title,
span.number {
color: #666;
}

span.important-title4 {
color: #000;
}

span.number,
span.number-color,
span.number-color2 {
display: block;
font-size: 170%;
float: left;
margin: 2px 10px 0 15px;
}

span.highlight {
background: #FFFBD5;
padding: 1px 2px;
}

span.highlight-blue {
color: #0294C1;
}

span.highlight-red {
color: #cc0000;
}

span.highlight-green {
color: #7FA500;
}

span.highlight-orange {
color: #ff9900;
}

span.highlight-bold {
font-weight: bold;
font-size: 120%;
}

span.dropcap,
span.dropcap-color,
span.dropcap-color2 {
display: block;
font-size: 260%;
float: left;
margin: 0px 4px 0 0;
line-height: 100%;
}

span.inset-left {
display: block;
color: #000;
padding: 15px;
float: left;
width: 20%;
font-size: 110%;
font-weight: bold;
font-style: italic;
}

span.inset-right {
display: block;
color: #000;
padding: 15px;
float: right;
width: 20%;
font-size: 110%;
font-weight: bold;
font-style: italic;
}

/* @end */

/* @group Notice Styles */

span.attention,
span.notice,
span.alert,
span.download,
span.approved,
span.media,
span.note,
span.cart,
span.camera,
span.doc {
display: block;
padding: 8px 10px 8px 36px;
margin: 15px 0;
}

span.attention {
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3 url(../images/typo/attention.png) 10px 50% no-repeat;
}

span.notice {
color: #648434;
border: 1px solid #9BCC54;
background: #CDEFA6 url(../images/typo/notice.png) 10px 50% no-repeat;
}

span.alert {
color: #CF3738;
border: 1px solid #FFACAD;
background: #FFD5D5 url(../images/typo/alert.png) 10px 50% no-repeat;
}

span.download {
color: #1C6B8B;
border: 1px solid #6ABCE2;
background: #A8CDE3 url(../images/typo/download.png) 10px 50% no-repeat;
}

span.approved {
color: #666;
border: 1px solid #a8a8a8;
background: #ccc url(../images/typo/approved.png) 10px 50% no-repeat;
}

span.media {
color: #C76E34;
border: 1px solid #FFBB65;
background: #FFE0B6 url(../images/typo/media.png) 10px 50% no-repeat;
}

span.note {
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3 url(../images/typo/note.png) 10px 50% no-repeat;
}

span.cart {
color: #666;
border: 1px solid #C5C5C5;
background: #E6E6E6 url(../images/typo/cart.png) 10px 50% no-repeat;
}

span.camera {
color: #666;
border: 1px solid #C5C5C5;
background: #E6E6E6 url(../images/typo/camera.png) 10px 50% no-repeat;
}

span.doc {
color: #C76E34;
border: 1px solid #FFBB65;
background: #FFE0B6 url(../images/typo/doc.png) 10px 50% no-repeat;
}

But I thought these span attributes can only be activated for example by <span class="doc"> ?

[Lynne]

You need to understand a little bit about how CSS works - and more specifically inheritance.

You have your time sitting in a span tag with the class "time" and that class only defines a color. Surrounding that tag, is the div tag with class smallfont. That class provides both a font size and style and thus your time will have that font size and style. Now, surrounding that tag is a td tag with class alt1. That class defines a background color and a font color. Since your time class is 'closer' to the actual element (your time), that color definition (for class=time) replaces the color definition from alt1. Keep going up and up and look at all the classes that surround your time. If somewhere up above there is a font-weight defined and it is never replaced, then that font-weight takes precedence. You can chase that down and change it, or you can just simply add in the font-weight definition to your time class:

font-weight: normal

[Princeton]

well said Lynne :up:

could be this:

.page span {
    color: #000;
    font-weight: bold;
}

just a guess as you never linked to your site (where problem exists)

[pab]

THanks guys for trying to help me out, sometimes I forget the little things, but this is the direct url to my forum:

www.pokeralsbijbaan.nl/forums

The template I modded can be found by switching to "de nieuwe layout" in the dropdown menu at the bottomleft.

I can't find the .page span anywhere princeton or is that an example of what it could look like?

And I tried adding font-weight: normal to the .time but sadly it isn't doing anything.

But otherwise I'll try to pick up CSS when I have some time later on, really busy with my exams at the moment .

[Lynne]

That.... isn't right!

OK, how about changing that font-weight line to:

font-weight: normal !important;

[pab]

That did the trick, thanks a lot!