image on right side of page title

  • Resolved skippywp

    (@skippywp)


    12 years ago

    Hi, I am having trouble getting an image to appear on the right side of the page title on pages other than the home page. My right side image is displaying on either a second line or has been pushed way out right so it appears on a 2nd line.

    I followed the directions of a number of sites that have the image on the right, and this is the code that came the closest to getting the right image displayed, using :after . I know there is something missing that I need to add, but haven’t found it yet. Any ideas?

    CSS:

    #thetitleimagebefore {
    background: url("https://wc.marketingoutloud.biz/wp-content/uploads/2013/02/leaf2_03.gif") no-repeat scroll left top transparent;
line-height: 38px;
padding: 0px 0px 10px 42px;
width: 42px;
    }

body.home #thetitleimagebefore {
  display: none;
}

#thetitle {
    font-weight: bold;
    font-size: 24px;
color: #1F4892;
    text-transform: uppercase;
padding: 5px 3px;
}

body.home #thetitle {
  display: none;
}
#thetitle:after {
  content: url("https://wc.marketingoutloud.biz/wp-content/uploads/2013/02/leaf2_03.gif") ;
    line-height: 38px;
width:auto;
margin-left:120;
}

    The code from the page.php:

    <div id="thetitleimagebefore">
<h2 id="thetitle"><?php the_title(); ?>
</h2></div>

Viewing 2 replies - 1 through 2 (of 2 total)
  • lattyak

    (@lattyak)

    Instead of using background images, you should put the images in-line. The the_title() function can take additional parameters for to add stuff before and after the title. Check out the documentation at https://codex.www.ads-software.com/Function_Reference/the_title

    The trick is to put the text in a separate <span>, and use CSS id’s for each element. The before parameter opens the <span>, and the after closes the </span>. Now you have 3 elements in a row, which are at the same level in the hierarchy. And you can pad them independently.

    <?php the_title( ‘<img id=”titleimg” src=”https://wholycancer.marketingoutloud.biz/wp-includes/images/leaf2_03.gif&#8221; /> <span id=”titlespan”>’, ‘</span><img id=”titleimg” src=”https://wholycancer.marketingoutloud.biz/wp-includes/images/leaf2_03.gif&#8221; />’ ); ?>

    In the CSS set “vertical-align: middle” for each element — that attribute is not inherited, so it needs to be applied at the lowest level.

    #titleimg {
    vertical-align: middle;
    }

    #titlespan {
    vertical-align: middle;
    line-height: 38px;
    padding: 2px 5px 0px 5px;
    font-weight: bold;
    font-size: 24px;
    color: rgb(31, 72, 146);
    text-transform: uppercase;
    }

    You should only need a small amount of padding on the span to fine tune the alignment and spacing. Middle alignment doesn’t work perfectly because it includes the font’s decent, while visually you want middle to be halfway between the baseline and ascent. I think padding the top of the span by half the descent, 2 or 3px, should work.

    One more issue to watch out for when mixing text and images in-line is units. Everything needs to be specified in points or pixels. If using points the width= and height= need to be specified, in points, in the <img> tags.

    Thread Starter skippywp

    (@skippywp)

    lattyak – That worked! The span and the
    having the 3 elements in a row, which are at the same level in the hierarchy, did the trick!

    Thanks so much for taking the time and providing a great explanation!
    Cheers,

    skippywp

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘image on right side of page title’ is closed to new replies.