CODEWITHSUNDEEP
wordpresscss
Jeremiah Jacob
Jeremiah Jacob

Reputation: 39

customizing an attribute in wordpress site

This is my site. "www.silenttunes.net". I'm able to customize the CSS of all the elements on my page, except for one. "View all events". I do not know why. Can someone please help. Below I've mentioned all the combinations I've tried.

 #aside p.tribe-events-widget-link a{
 font-size:12px;
 font-weight:100;
}

 p.tribe-events-widget-link a{
 font-size:12px;
 font-weight:100;
 }

 .tribe-events-widget-link a{
 font-size:12px;
 font-weight:100;
 }

 .tribe-events-widget-link {
 font-size:12px;
 font-weight:100;
 }

Upvotes: 0

Views: 20

Answers (1)

pbaldauf
pbaldauf

Reputation: 1681

When inspecting your document with Chrome Developer Tools we see the following rules applied on your document.

.tribe-events-adv-list-widget .tribe-events-widget-link a,
.tribe-events-back a,
.tribe-events-list-widget .tribe-events-widget-link a, 
ul.tribe-events-sub-nav a {
    font-size: 15px;
    font-weight: 700;
}


Solution: Add a more specific CSS rule like this:

aside.tribe-events-list-widget .tribe-events-widget-link a {
    font-size: 12px;
    font-weight:100;
}

Note: Adding !important behind a CSS rule also increases specifity. But it's suggested using this method only if there is no other possibility

tribe-events-list-widget .tribe-events-widget-link a {
    font-size: 12px !important;
    font-weight:100 !important;
}

Upvotes: 1

Related Questions