Home>Support>Custom link colours not applied to sidebar widgets

Custom link colours not applied to sidebar widgets

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

I have just installed Vantage Premium and am very impressed with the theme.

I’ve found nearly everything works very smoothly, but have just noticed that the CSS rules for custom link colours are not applied to sidebar widget links (e.g. post archive links etc.).

The problem seems to be that the selectors are too specific, applying only to anchors within paragraphs within the #secondary container, e.g.:

.entry-content p a, .entry-content p a:visited, #secondary p a, #secondary p a:visited { color: #92000b }
.entry-content p a:hover, .entry-content p a:focus, .entry-content p a:active, #secondary p a:hover { color: #005d53 }

The issue here is that the widget links are contained within unordered lists, _not_ paragraphs, and so the rules are not applied to them.

I’ve worked around the issue using custom CSS with a modified selector:

#secondary a, #secondary a:visited { color: #92000b }
#secondary a:hover { color: #005d53 }

This is okay for now, but just wondering if there is a reason for such specific selectors? I can foresee problems with bulleted list links within .entry-content containers, which would require a similar workaround.

Look forward to any responses.

Cheers,
John

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi John

    Thanks for running Vantage and for your feedback. There is unfortunately a limitation to the way links have been handled in the Customizer. We do have this logged for review. What you’ve done is perfect. You could also apply it to the containing div as follows:

    /* Links */
    
    #main a { color: #dd3333; }
    
    #main a:hover { color: #2b1100; }
    

    As long as these selectors are added to Appearance > Custom CSS or a child theme, you’re all good.

  2. 10 years, 10 months ago John Fitzpatrick

    Thanks for your help and for clarifying Andrew.

  3. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    No problem. Glad we could help out there. Thanks for the wait.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More