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

Changing the copyright inco color?

Discussion in 'XenForo Questions and Support' started by Bain, May 6, 2011.

  1. Bain

    Bain Active Member

    Hello,

    Could someone tell me what I need to change in order to make the xenforo copyright information a different color? I am using it @ http://www.coasttocoastam.net/

    The copyright is still there but not visible due to the black background.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Add this to EXTRA.css

    /* Change colour of the copyright text */
    #copyright {
    color: @dimmedTextColor !important;
    }

    Change the colour to suit.
     
    Bain likes this.
  3. Bain

    Bain Active Member

    Thank you for the help brogan!
     
  4. Chimpie

    Chimpie Well-Known Member

    Sorry to bring this back up but I was running into the same problem: www.chimpie.com/xenforo

    I was able to fix the copyright info but can't seem to get this to work with for the legal text. I wrote:
    Code:
    /* Change colour of the copyright text */
    #copyright {
    color: @primaryLight !important;
    }
    
    /* Change color of the legal text */
    #legal {
    color: @primaryLight !important;
    }
    
    Thoughts?

    Also, what does "!important" do?

    Thanks!
     
  5. Panupat

    Panupat Well-Known Member

    important makes that line of css higher priority than other ones also applying styles to the same elements.
     
    Chimpie likes this.
  6. Panupat

    Panupat Well-Known Member

    By the way, either of your styles are applying because they're links. Not just text. You're going to need to add an "a"

    #legal a { ...

    and

    #copyright a { ..
     
    Chimpie likes this.
  7. Chimpie

    Chimpie Well-Known Member

    Thanks. For some reason the #copyright worked without the 'a' but added it anyway and it's just fine and the text shows.

    Thanks again.
     
  8. Panupat

    Panupat Well-Known Member

    Your #copyright was actually being colored by another css before this.

    HTML:
    .concealed, .concealed a, .cloaked, .cloaked a {
      color: inherit !important
      text-decoration: inherit !important;
    }
     
  9. Chimpie

    Chimpie Well-Known Member

    Can you break that down for me? <still learning>
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Try this:

    /* Change colour of Terms and Rules */
    #legal a:link, #legal a:visited {
    color: @dimmedTextColor !important;
    }
     
    Chimpie likes this.
  11. Panupat

    Panupat Well-Known Member

    if you look at your link inside the #copyright, you'll see

    <a class="concealed" ....

    So it got colored by the CSS class I showed you earlier. .concealed

    While your CSS #copyright cannot really do anything to it. You need to tell the CSS you want to color the <a...> inside it. Which is why you need to add an "a" like I suggested

    #copyright a { .....
     
    Chimpie likes this.
  12. Chimpie

    Chimpie Well-Known Member

    Panupat, thanks for your responses. I'm just getting back into XF and am just now starting to learn their ways.

    What is .concealed, .concealed a, .cloaked, .cloaked a ?
    Does the 'a' mean all?

    Thanks!
     
  13. Panupat

    Panupat Well-Known Member

    hmmmm let's see

    In CSS you can style HTML directly. For example
    div { color: #000000; }
    This will apply to all <div>

    dot stuff are classes. For example
    <div class="redBG">
    This can be styled using the class
    .redBG { ..... }

    # means ID.
    <div id="header">
    can be styled with
    #header { ... }

    You can define multiple class together. They're separate by comma
    .firstClass , .secondClass , .thirdClass, #someID { ..... }

    Next it's about... not sure how to call it. But it's a way to point to specific elements you want to style. Take a look at this example

    HTML:
    <div id="header">
        <div class="first">
              <img .....>
              <a href=..........>
        </div>
        <div class="second">
              ......
        </div>
    </div>
    As you see, img is inside .first, and .first is inside # header. You can create CSS to specifically point to this img like this
    #header .first img { .... }
    or the <a href....>
    #header .first a { .... }
    This way your CSS will not apply to other img or a outside of this structure.

    Combine all above together, you should be able to understand this one

    .concealed, .concealed a, .cloaked, .cloaked a { .... }

    I hope that make sense.
     
    Chimpie likes this.
  14. Chimpie

    Chimpie Well-Known Member

    With your post and looking at W3 I'm starting to get in the grove again. Thanks!
     

Share This Page