Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Konstantin Nikkari
5,185 PointsOverride 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!
4 Answers
Andrew McCormick
17,730 Pointsuse p#copyright { ... }
Konstantin Nikkari
5,185 PointsI 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
17,730 Pointsthat'll work, but I like to avoid !important where ever possible. Just for future proofing.
Konstantin Nikkari
5,185 PointsWhat kind of problems !important can cause in future?
Andrew McCormick
17,730 Pointsp#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.
Konstantin Nikkari
5,185 Pointsi just learn something new. Thank you for teaching me ☺️
Konstantin Nikkari
5,185 PointsUnfortunately neather "footer p #copyright { }" nor "p #copyright { }" works.
EDIT: p#copyright worked. The space was the problem.
Andrew McCormick
17,730 Pointsyou shouldn't have space between p and #copyright. It should be p#copyright which will then override the specificity.
Konstantin Nikkari
5,185 PointsWhat 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?