Hello,
Someone helped me solve an issue I was having with the CSS code below. I loved the changes, but I just now realized that the change is being applied to every single page on my website: http://www.inkwellcoach.com.
What i’d like to do is use two different colors for bold fonts on two separate pages, so as to distinguish the services/product. The pages are: http://inkwellcoach.com/work-with-liz/college-essay-maverick/ (bold blue font #7a9cd4 ) and http://inkwellcoach.com/work-with-liz/next-level-scholars/ (bold green font #8a9b0f ). When I emphasize something on the first page, I’d like it to be emphasized in bold blue, and on the second page, bold green. Does that make sense?
Thanks so much!
.main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6, .main_color strong, .main_color strong a, .main_color .sidebar .current_page_item a, .main_color .pagination .current, .main_color .comment-count, .main_color .callout .content-area, .main_color .avia-big-box .avia-innerbox, .main_color .avia-big-box .avia-innerbox a { color: #8a9b0f; }
Hey simisola80!
If you want to change the style of a specific element on a certain page or post, you can use the Google Chrome Inspect Element. Look for the unique css body class.
On the example above, the page’s unique selector is .page-id-2251. We can use it to change the element within that page.
.page-id-2251 .main_color h1 {
color: #8a9b0f;
}
Cheers!
Ismael
Hi Ismael,
I tried that, but I’m getting this error:
Thanks!
Here’s the link that has an image of what I am talking about: http://tinypic.com/r/2ujs2o3/8
Any idea why it crossed it out?
Hey!
There’s a typo, the correct code should be:
color: #7a9cd4;
Remove that extra “:”.
Cheers!
Josue
DUDE…you guys seriously ROCK!! Thank you for helping me with this. I’m new at website building/coding and I’m definitely learning a lot with your help :-D. Thanks!
You are welcome, glad we could help :)
Regards,
Josue