vb.org Archive - problem with .time and other .css styles

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)

- - problem with .time and other .css styles (https://vborg.vbsupport.ru/showthread.php?t=193766)

problem with .time and other .css styles

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.

most likely inherited from your joomla css

scan your css for "span"

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?

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)

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:

Quote:

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"> ?

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:

HTML Code:

font-weight: normal

well said Lynne :up:

could be this:

Code:

.page span {

    color: #000;

    font-weight: bold;

}

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

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 :(.

That.... isn't right!

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

HTML Code:

font-weight: normal !important;

That did the trick, thanks a lot!

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (2)bbcode_html_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01038 seconds Memory Usage 1,744KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (2)bbcode_html_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: