[Answered] Class question

[kiint]

I've noticed in the header template that there is a line like this:

<li class="popupmenu nonotifications"

where does the template get the information for the nonotifications part?

I'm currently messing with a template which has the following code:

            <dl class="eventrow stats">
                <dt>{vb:rawphrase calendar}</dt>
                <dd>{vb:raw calendarinfo.title}</dd>
            </dl>

there are various different calls to this class like:

<div class="eventrow dstsettings
<div class="eventrow floatcontainer">
etc

but where does it get the information for the second part of the class? stats, dstsettings, floatcontainer etc?

[Zachery]

I don't really follow what you're asking for. Are you asking how vBulletin determines if those secondary classes are required? or what css those secondary classes are using?

[TheLastSuperman]

I've noticed in the header template that there is a line like this:

<li class="popupmenu nonotifications"

where does the template get the information for the nonotifications part?

I'm currently messing with a template which has the following code:

            <dl class="eventrow stats">
                <dt>{vb:rawphrase calendar}</dt>
                <dd>{vb:raw calendarinfo.title}</dd>
            </dl>

there are various different calls to this class like:

<div class="eventrow dstsettings
<div class="eventrow floatcontainer">
etc

but where does it get the information for the second part of the class? stats, dstsettings, floatcontainer etc?

That's basic CSS of course .

What you need to realize is how CSS works... you can define one definition or get tricky with it and define a few so for example:

<div class="eventrow dstsettings
<div class="eventrow floatcontainer

You would search in templates for the text "eventrow" and when the templates come up in the results, you know to look in only the CSS templates for something along the lines of:

.eventrow {
background: #FFFFFF
more etc
more etc
}

The floatcontainer part is another css definition in itself HOWEVER they used a space as you see above yet have it calling both in that order (left to right is read by the browser/webpage as top to bottom because CSS is a "Cascading Style Sheet" like a waterfall ).

So to find floatcontainer in the CSS templates you would search for floatcontainer text only.

Now some things to note:

You can overwrite just certain CSS by using a . so basically yuou could post in additional.css any default deifnitions BUT w/ your new code so it overwrites the default code follow? IF you do that here is a example, try this in additional.css to see if you understand what I've explained so far:

.eventrow.dstsettings {
background: #000000 !important;
color: #FFFFFF !important;
}

The new code should change the background of that area to black and the font within to white, if so now you have a prime example of a simple css change .

*One key thing to realize is one CSS definition can be in use (via a combination method such as the above class="definition1 defintion2 defintion3 defintion4" ) in several templates so please be sure your using the .definition1.definition2 { code code } trick I showed you above so your don't overwrite one definition that could affect another area of your site... the best way I can explain that is floatcontainer is used not only there but elsewhere all over your site so do not simply overwrite or change .floatcontainer by itself for any reason unless you know what your doing and have a little more experience in css at that point in time .

[kiint]

Thanks very much for the info, this has helped me understand things a lot more.

Most appreciated.