This is the CSS that is styling that text:
.description {
color: #CCCCCC;
}
.description {
float: right;
font-size: 116%;
margin-left: 20px;
margin-right: 20px;
margin-top: 21px;
text-align: right;
text-transform: uppercase;
}
To change it, all you need to do is copy the attributes that you want to change into the child theme — for example:
.description {
color: #000;
text-transform: none;
}
If you want other things changed, add those attributes to the above.
I appreciate the speedy response and looking at your code I can see how it accurately describes the text style I’m hoping to replace, but I cannot find a such a reference in either the Suffusion, Suffusion-child or Sermon Browser style sheets.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You don’t need to fish for the CSS styling the text. From WPYogi’s instructions, you’ll need to create a new style to override the old style.
Maybe I’m still not understanding but I’m assuming I have to find the code for the “old style” (which would look something like WPyogi’s “CSS that is styling that text:”) in order to change it and there in lies the problem and what brought me to post here in the first place.
I cannot find any code in any of the style sheets that describes the current text style for the “preacher-description” portion of the post. I can find the code that describes the body text but not the preacher-description. I would expect to find it in the style sheet for Sermon Browser but I don’t. Here is what I see:
}
div.sermon-browser-results div.preacher-description {
margin-top: 0.5em;
}
div.sermon-browser-results div.preacher-description span.about {
font-weight: bold;
font-size: 120%;
}
Nothing about font color or upper case or right justified. And there is nothing elsewhere in the Style sheet that refers to that either.
Nor can I find any reference in the theme style sheet that might style the preacher description.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try using a browser developer tool for this kind of exploratory CSS work.
I used Google Chrome’s built-in Developer Tool and it exposed the CSS and HTML elements of that particular description section of the page [screenshot]. In the screenshot; the CSS applied is to the right of the toolbar and HTML to the left.
Now that you know the style, from being exposed by the Developer Tool, you can add a new style to override it.
You ought to add new styles externally, not within the theme’s files. Changes to the theme’s files will compromise the theme and be compromised when the theme updates.
External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.
I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.
Thanks WPyogi and Andrew:
I did use an element inspector early on but it did not lead me to the solution. I finally found some code in the Theme CSS that defines blog entries and was affecting the Sermon Browser entries. I was able to fix the change the uppercase and right justification but I still haven’t tracked down the font color instructions. Onward and upward.
Anne
![[screenshot]](http://snag.gy/teHLw.jpg){kind=link}