Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WP, need different background for p and img

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #39071
    Ranger
    Member

    okay, so I want to put a different background image behind my images than my other (text) p elements. I can get a background behind the images using the img selector, but the problem is that is also inside of a p element, so any background i put on the p elements also gets put behind the img’s. So does anyone know of a way to put a background behind just the normal p elemnts (as in the post text/paragraphs) and not behind the post images? Am I making sense?
    I’m working on this site, if that helps
    thanks

    #106800
    AntonNiklasson
    Participant

    Create a pen at http://www.codepen.io and try to isolate your problem. Makes it a lot easier for any forum member to help.

    #106817
    wolfcry911
    Participant

    @AntonNiklasson, I may be in the minority, but I respectfully disagree with you. I find a link to an actual live page/site is far better than a test bed. If a live page is not available, then I agree and think a test bed is better than just posting code (or worse an image, or still worse just trying to describe the problem).


    @Ranger
    , I’m not a wordpress guy, but I can think of three things you could try. The simplest is to use a caption on the image. I believe WP will then wrap the image in a div instead of p. The caption could be just a single space, or you could use CSS to hide the caption with .wp-caption-text {display: none}.

    The second thing you could do is use jquery to add a class to p’s that have img.

    $(document).ready(function() {
    $('p').has('img').addClass('image');
    });

    should work.

    The third and most technical would be to edit the functions.php so that images would be wrapped in an element of your chosing.

    // img unautop
    function img_unautop($pee) {
    $pee = preg_replace('/

    \s*?(<\/a>|)?\s*<\/p>/s', '

    ', $pee);
    return $pee;
    }
    add_filter( 'the_content', 'img_unautop', 30 );

    courtesy Robert O’Rourke

    #106819
    Paulie_D
    Member

    I’m not a WordPress expert or anything but it seems to me that something is fundamentally wrong if it’s wrapping individual ‘posts’ in p tags.

    Surely these should be wrapped in divs with a class of ‘post’ which then contains paragraphs and images etc.

    #106832
    Ranger
    Member

    @wolfcry911, I’ll give that a try. If I can successfully get the images wrapped in divs instead of p’s, that would be great.


    @Paulie_D
    , As far as I’m aware, everything in a wordpress post is wrapped in it’s own p tag. It’s true the post as a whole is wrapped in it’s own div, but each element inside is wrapped in a p tag including each paragraph and image. (images also have an img tag inside said p tag).

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.