EXTRA.css guide (basics)

[Morgain]

Could someone help us learn how to use EXTRA.css template because it's very powerful.
Most of what I want customised has been kindly given to me in code snippets to put in EXTRA.css

I understand it can override the other templates.
Also that it will not be affected by upgrades so it is a very timesaving place to make edits so as not to need repeat edits later. Maybe a little adjustment in EXTRA.css after an upgrade if something looks funny
I can just about cope with some css and look up bits I don't know, to do the commands in it.

The bit I do not understand is the first line of each snippet.
Example

.userBlurb
{
float:right !important;
}

Translated:

A THINGY called userblurb must position on the right.
OK but there is no template called "userBlurb."
I searched.

I have lots of these now followed by css commands.

.navTabs .navTab.forums
.navTabs .navTab.wiki .blockLinksList

etc

So what are these identifiers?
How do I find one to make a command in EXTRA.css to do something?

 

[Fuhrmann]

This is a bit of basics CSS.

If you use .navTabs will get all the elements with the CLASS .navTabs:

<div class="navTabs">Hello I am a navTab!</div>

If you use #navTabs will get all the elements with the ID #navTabs.

<div id="navTabs">Hello I am a navTab!</div>

The EXTRA.css template is used to override all css class that you want to change and after an upgrade will not get changed.

Let's say that you want to override the class of the private controls, here, where you can see in every post "Edit", "Delete".

First, you have to know which class is:

<div class="privateControls">
    <span class="item muted">
        <a href="members/fuhrmann.5313/" class="username author">Fuhrmann</a>,
        <a href="threads/extra-css-guide-basics.23339/#post-289174" title="Permalink" class="datePermalink"><abbr class="DateTime" data-time="1321489631" data-diff="89" data-datestring="Nov 16, 2011" data-timestring="10:27 PM" title="Nov 16, 2011 at 10:27 PM">1 minute ago</abbr></a>
    </span>
    <a href="posts/289174/edit" class="item control edit OverlayTrigger" data-href="posts/289174/edit-inline" data-overlayoptions="{&quot;fixed&quot;:false}" data-messageselector="#post-289174"><span></span>Edit</a>
    <a href="posts/289174/delete" class="item control delete OverlayTrigger"><span></span>Delete</a>
    <a href="posts/289174/report" class="OverlayTrigger item control report" data-cacheoverlay="false"><span></span>Report</a>
</div>

As you can see, all the div that holds this private controls is the class="privateControls".

Since you know the class, you can do whatever you want. When you are done with the "'discovering", go to you EXTRA.css template and put some css rule in there:

(note, we are using a class, so we use a DOT)

.privateControls
 
{
 
    width: 200px !important;
 
}

This !important thing, is in there because we want to override the existing class with a customized css rule. So we have to set this as important, to XenForo knows that this rule is the valid rule, not the others.



If you have this in your HTML:

<div class="myclass">
    <div id="myid">
        Hello, here I am!
    </div>
</div>

And you want only to change the style of the "myid", not the "myclass", use this:

.myclass #myid
{
color:red;
text-align:center;
}

You can take a look at HERE(class) and HERE (id) to learn a little about css syntax. This could help you a lot!

And you can try your skills in HERE.

 

[Morgain]

This is a bit of basics CSS....
You can take a look at HERE(class) and HERE (id) to learn a little about css syntax. This could help you a lot!

Fuhrmann you are splendidly generous and excellent at explanation.
I'm sure this will help others a lot as well. I will study your guide thoroughly.

 

[Fuhrmann]

Fuhrmann you are splendidly generous and excellent at explanation.
I'm sure this will help others a lot as well. I will study your guide thoroughly.

I have updated my post with more information.
Hope you liked.