Problem with text style for preacher-description (7 posts)

  1. Calvary Communications
    Posted 2 years ago #

    The site I've become the manage for uses Sermon Browser to post sermons. The About [preacher] text appears in an unsuitable style (all caps and very light grey, see link)

    I've looked at the style sheet in the Sermon Browser plug in (below) but all I see is code for the preacher-description for font weight and font size.

    So I'm thinking it might be something to do with the WordPress Theme (Suffusion-child). I'm still learning CSS. Any and all help appreciated.

    [No need to post CSS code here - it's all visible on your site. Please see: http://codex.wordpress.org/Forum_Welcome#Posting_Code

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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.

  3. Calvary Communications
    Posted 2 years ago #

    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.

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    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.

  5. Calvary Communications
    Posted 2 years ago #

    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.

  6. Andrew
    Forum moderator
    Posted 2 years ago #

    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.

  7. Calvary Communications
    Posted 2 years ago #

    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.


Topic Closed

This topic has been closed to new replies.

About this Topic