[Customizr] CSS custom class only applies to certain tags

  • Resolved DannThorr68

    (@dannthorr68)


    9 years, 4 months ago

    Not sure if this is the right place to post this, but on my site i have a custom css class .gray-link that should change the link color to a dark gray. It seems to work for the most part, however, certain elements with the class are still displaying as orange. Furthermore, the elements that don’t have the css applied vary through browsers. The hover color still applies but not the main color.

    I am using Customizr but I don’t see the theme as being a problem.

    Just curious as to why some of these elements are not displaying CSS properly and if I can somehow fix this. I am not the best when it comes to CSS, mainly just teaching myself while working on this site.

    Link is here

    The missing css elements in IE and Chrome are the same, which are the 2 Learn More lines under Other, and License Plates. Firefox is 2 Learn More lines under Paper / Foam, and Stakes.

    My CSS is:

    .gray-link:link {
color:#9c9c9c; }

.gray-link:hover {
color:#8c8c8c; }

    Also, all of the a tags surrounding Learn More have the .gray-link class.

Viewing 3 replies - 1 through 3 (of 3 total)
  • CrouchingBruin

    (@crouchingbruin)

    9 years, 4 months ago

    All of the links seem to turn dark gray for me, in both Chrome and Firefox. Maybe you just needed to wait for WP Total Cache to refresh? Sometimes it’s helpful to turn off any caching plugins while you’re doing development work so the changes appear right away. Then turn the caching plugin back on when you’re done.

    One tip, though: avoid including property values in your class names. Instead, choose class names which indicate a function, like learn-more or product-name. Here’s why: Let’s say you want links you create in the footer to also be gray, so you assign the gray-link class to those link elements. But then later you decide that the Learn More links would be better if they were blue, and a slightly heavier font-weight. You can’t change the properties of the gray-link rule to blue and bold, because you want to keep the footer links gray. So, you end up having to change the class names for all of the Learn More links. If you create a class called learn-more and assigned that class to those links, then you can alter the CSS without unintentionally affecting other elements.

    Thread Starter DannThorr68

    (@dannthorr68)

    9 years, 4 months ago

    Thanks for the tips!

    Also, I know it has to be a caching issue. Checked it on two other computers earlier yesterday afternoon and all the links were gray.

    innowhat

    (@innowhat)

    9 years, 4 months ago

    I had the exact same problem with my css files but its fixed now!! Apparently my web host(Siteground) caches all my website files by default to improve performance, so I simply logged in to my control panel and turned it off and cleared all cache as well. All good now, hope it works for you !!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Customizr] CSS custom class only applies to certain tags’ is closed to new replies.