Custom Body Class style not being applied

Community Forums Forums Design Tips and Tricks Custom Body Class style not being applied

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Lauren @ OnceCoupled 2 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #104883

    willb
    Participant
    Post count: 7

    I’ve created a custom body class using this code snippet:

    //* Add custom body class to the head
    add_filter( 'body_class', 'sp_body_class' );
    function sp_body_class( $books ) {
    $books[] = 'custom-class';
    	return $books;
    }

    I’ve written the following CSS:

    .books {
    	border-bottom: 2px dotted #BDD3DB;
    	padding: 20px;
    	margin-bottom: 20px;
    	line-height: 1.00em;
    }

    With this HTML on a dev site it works (though this does not work on the intended site):

    <div class="books">
    some stuff here
    and more
    more 
    more stuff
    </div>
    
    <div class="books">
    a second class of books
    which has only two lines</div>
    
    <div class="books">
    a third type of stuff
    this one with lots of lines
    line
    line
    line
    </div>

    With this on the intended site it does not:

    <div class="books">
    <h3><a href="http://www.amazon.com/gp/product/0345434773/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0345434773&linkCode=as2&tag=themodemrsdar-20&linkId=HNA3TTCQHRTBQZRB" target="_blank">Evensong</a><img style="border: none !important; margin: 0px !important;" alt="" src="http://ir-na.amazon-adsystem.com/e/ir?t=themodemrsdar-20&l=as2&o=1&a=0345434773" width="1" height="1" border="0" /></h3>
    <em>by Gail Godwin</em><img style="border: none !important; margin: 0px !important;" alt="" src="http://ir-na.amazon-adsystem.com/e/ir?t=themodemrsdar-20&l=as2&o=1&a=0345434773" width="1" height="1" border="0" />
    
    <a href="http://www.amazon.com/gp/product/0345434773/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0345434773&linkCode=as2&tag=themodemrsdar-20&linkId=472MW3O7RUZLWH3W" target="_blank"><img class="alignleft  wp-image-18910" alt="Evensong" src="http://modernmrsdarcy.com/wp-content/uploads/2014/05/Evensong-192x300.jpg" width="150" height="225" /></a>Bacon ipsum dolor sit amet brisket short loin ball tip meatloaf fatback tongue swine. Shoulder pork loin tail, ribeye meatloaf bacon turkey flank bresaola turducken. Filet mignon biltong beef pork chop shoulder. Salami prosciutto ground round fatback swine sausage biltong.
    
    </div>

    The page is not published yet. But any guesses as to why the simple HTML works on one site and not on another? Is the CSS just not specific enough? Should I add .entry-content .books or something along those lines?

    http://modernmrsdarcy.com
    #104895

    Lauren @ OnceCoupled
    Member
    Post count: 512

    The class you’re adding is custom-class, not books.

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #104908

    willb
    Participant
    Post count: 7

    Thanks for the reply Lauren-

    so you’re saying I should change the line

    $books[] = 'custom-class';
    

    to

    $books[] = 'books';

    That doesn’t seem to change anything and still leaves me wondering why the exact same code would work in the dev environment, but not on the production site.

    Do you have an explanation as to what I’ve done wrong? Trying to learn as well as fix my problem :)

    #104911

    Lauren @ OnceCoupled
    Member
    Post count: 512

    Well now it allows you to see (when using the browser inspector) that clicking on the body tag shows no .books styles being applied to it. That means the line in your code isn’t being read. When I went into your CSS and grabbed that block of code, and copied it into the top of your file, is appears. This means your file is likely missing a closing bracket, keeping later code from being read.

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #105023

    willb
    Participant
    Post count: 7

    Lauren I still cannot find the unclosed bracket or a comment that doesn’t end, but it’s working.

    Thanks for your help.

    #105028

    Lauren @ OnceCoupled
    Member
    Post count: 512

    You are missing multiple closing brackets: lines 1532 and 1641. If you close those and move your block of code back to the bottom, you should see it working still.


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.