Question 30720 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Change Events Calendar widget hyperlink colour with custom CSS in WordPress

Have found great help with R on SO–now for something completely different.

I am working in WordPress 5.8.3.

I am building a website using the Blank Canvas theme, a child-theme of Seedlet–Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.

I haven’t gotten permission to publish the site, so unfortunately I can’t offer a live demo. I will try to be explicit.

I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:

The link in yellow should be black.

From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour

.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
    color:#000;
}

It does not. This code makes no visible change. However, when I also change the background-color like this:

.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
    background-color:black;
    color:#000;
}

The result is:

enter image description here

This led me to believe that there is no colour option for this element—HOWEVER, the inspector shows that this element has the ‘color’ property:

enter image description here

And I’m stumped. I’m not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.

Any advice would be greatly appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:

    .tribe-events-widget .tribe-events-widget-events-list__view-more-link {
    color:black !important;
}

    Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.

    Hope somebody else can benefit from my toiling...


  2. 0

    It’s a bit difficult to be certain of the problem as we don’t have the context, however I was surprised that you saw just this:

    .tribe-events-widget .tribe-events-widget-events-list__view-more-link

    and didn’t find an anchor (a) element within it.

    I would have expected that you’d have to do:

    .tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
    color:#000;
}

    as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.

    If that doesn’t work then use your browser dev tools inspect facility to find out more about the context of that a element – you may need to give even more hints to the browser on pinning it down.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search