1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

EXTRA.css guide (basics)

Discussion in 'XenForo Questions and Support' started by Morgain, Nov 17, 2011.

  1. Morgain

    Morgain Well-Known Member

    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

    Code:
    .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?
     
  2. Fuhrmann

    Fuhrmann Well-Known Member

    This is a bit of basics CSS.

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

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

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

    Code:
    <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:

    Code:
    <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)


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

    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:

    Code:
    .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.
     
    DSF, EQnoble and Morgain like this.
  3. Morgain

    Morgain Well-Known Member

    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.
     
    principia and Fuhrmann like this.
  4. Fuhrmann

    Fuhrmann Well-Known Member

    I have updated my post with more information.
    Hope you liked. :)
     
    principia and Morgain like this.

Share This Page