Changing the copyright inco color?

[Bain]

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.

 

[Paul B]

Add this to EXTRA.css

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

Change the colour to suit.

 

[Bain]

Thank you for the help brogan!

 

[Chimpie]

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:

/* 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!

 

[Panupat]

important makes that line of css higher priority than other ones also applying styles to the same elements.

 

[Panupat]

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]

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.

 

[Panupat]

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

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

 

[Chimpie]

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

 

[Paul B]

Try this:

/* Change colour of Terms and Rules */
#legal a:link, #legal a:visited {
color: @dimmedTextColor !important;
}

 

[Panupat]

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

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]

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!

 

[Panupat]

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

<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]

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