• 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?

Brogan

XenForo moderator
Staff member
#2
Add this to EXTRA.css

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

Change the colour to suit.
 

Chimpie

Well-known member
#4
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!
 

Panupat

Well-known member
#6
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

Well-known member
#7
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

Well-known member
#8
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;
}
 

Panupat

Well-known member
#11
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

Well-known member
#12
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

Well-known member
#13
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.