Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Override footer code in WordPress Canvas by WooThemes

Hi I have this code in my WordPress Canvas by WooThemes footer.php

<footer id="footer" class="col-full">

      <a href="#" id="totop">
      <img src="http://raccoonbox.com/sitedata/wp-content/uploads/2015/01/arrow_rideup.png" alt="Arrow Up" class="arrow_rideup">
      Raccoonbox tarjoaa ilmaisen kyydin ylös<img src="http://raccoonbox.com/sitedata/wp-content/uploads/2015/01/arrow_rideup.png" alt="Arrow Up" class="arrow_rideup">
      </a>
      <p id="copyright">© 2015 Raccoonbox Oy. Nämä sivut on suunnitellut ja toteuttanut Raccoonbox. Kaikki oikeudet pidätetään.</p>

</footer>

And this in my style.css

#copyright {
  font-size: .7em;
  color: #696969;
}

Like you see I would like to have my copyright paragraph smaller than the back to top link above BUT the Canvas theme override's it somewhere and any styling for font size and color doesn't effect at all. Only place where I can change size and color is the Canvas - Settings - Header & Footer. But those settings effect all text in footer and I only want this specific paragraph to be smaller.

Anyone familiar with Canvas theme?

Please help me!

www.raccoonbox.com/sitedata

4 Answers

I got an answer from WooThemes forum which solver my issue!

"Hil! You can add the !important directive in order to force the usage of your CSS code. So your code should be like:"

#copyright {
font-size: .7em !important;
color: #696969 !important;
}
Andrew McCormick
Andrew McCormick
17,729 Points

that'll work, but I like to avoid !important where ever possible. Just for future proofing.

What kind of problems !important can cause in future?

Andrew McCormick
Andrew McCormick
17,729 Points

p#copyright is saying get the p element that has an id of copyright.
p #copyright is saying get me the element that has an id of copyright which is nested inside of a p element.

as for why not use !important. It's because !important reigns supreme in the specificity battle. So if I use p#copyright but on another page I want to overwrite that, I can use something like .thispage p#copyright and give it a new style. But if had used !important, then it would be tough to overwrite it without including important every time you want to overwrite that style. This may seem trivial when you are only working on one element here, but if you get to a thousand line css sheet it can become a pain to try and figure out why you aren't able to overwrite a style or where the !important is at, etc.

i just learn something new. Thank you for teaching me ☺️

Unfortunately neather "footer p #copyright { }" nor "p #copyright { }" works.

EDIT: p#copyright worked. The space was the problem.

Andrew McCormick
Andrew McCormick
17,729 Points

you shouldn't have space between p and #copyright. It should be p#copyright which will then override the specificity.

What is the difference in p#copyright and p #copyright? I tried p#copyright all together and it worked! If I write them together is it something else than p for selecting the paragraph and # for the id?