Wanted to just add some info:
I’m using the shortcodes instead of the archive page.
Here is the code all the code I’m trying to edit and what I’m trying to edit it to. When I inspect it using Chrome, it shows both sets of CSS, but the plugin overrides my theme CSS.
Current code
.title-meta {
background: rgba(0, 0, 0, 0.5);
padding: 10px;
position: absolute;
bottom: 0px;
width: 100%;
color: white;
font-size: 13px;
line-height: 1.3em;
font-weight: bold;
}
.staff-grid-archive .content .entry-title a,
.staff-profile .entry-title a,
.staff-member.type-staff-member .entry-title a {
color: #fff;
border:none;
}
.staff-grid-archive .content .entry-title a:hover ,
.staff-profile .entry-title a:hover ,
.staff-member.type-staff-member .entry-title a:hover {
color:rgba(255,255,255,0.6);
}
New/desired code
.title-meta {
background: none;
position: inherit;
padding-top: 0px;
bottom: 0px;
width: 100%;
font-size: 13px;
line-height: 1.3em;
font-weight: bold;
}
.staff-grid-archive .content .entry-title a,
.staff-profile .entry-title a,
.staff-member.type-staff-member .entry-title a {
text-decoration: none;
color: #c01414;
}
.staff-grid-archive .content .entry-title a:hover ,
.staff-profile .entry-title a:hover ,
.staff-member.type-staff-member .entry-title a:hover {
color: #55acee;
}
If you put “body” in front of each selector, that will let you override it pretty easily without sticking !important declarations everywhere.
So something like this:
body .staff-grid-archive .content .entry-title a,
body .staff-profile .entry-title a,
body .staff-member.type-staff-member .entry-title a {
color: #fff;
border:none;
}
Do be careful on the .title-meta one; that’s a class that might happen to be used for some other things that you may not want to edit.
Thanks! I will try that and let you know how it goes. Thanks too for the heads up about the title meta. That class is where most of my edits are. I do not believe that the class exists anywhere else in the CSS for my site. I’ll double check, though.
