Adding an image to the left hand side of title H1

  • bluebox54

    #3739

    Hi,

    I want to set an image to the left of a page title H1 so it loads (the same icon) for all pages… I’ve heard people talk about adding code to page.php and/or the main style sheet…

    Has anyone got any suggestions or examples they could share?

    Thanks

    Jamie

    Anonymous

    #25650

    Hmmmmm….

    Maybe you could create a transparent .png file with your image on the far left… then float your post title slightly to the right. And bring everything together with some custom css.

    Something like this might work:

    .post-title, .post-title a {
    color: #1772AF;
    font: 22px arial;
    backgound:url("path to the image file");
    }
    Mod

    Kenneth John Odle

    #25651

    You can also use the before css pseudo class:

    .post-title:before {image stuff here}

    Not tested; YMMV

    bluebox54

    #25652

    Hi Josh and Kenneth,

    Thank you both for your feedback. It’s an interesting addition I want to add to the theme but I accept it’s a little out there…

    I read this discussion on WordPress.org: http://wordpress.org/support/topic/how-to-add-an-image-to-the-left-of-page-titles?replies=8 so I know its doable… either as a default image (like I’m planning) or using the featured image for variations per section…

    I’ve tried your suggestions above by adding to the style.css but I’m new to PHP & CSS and must be doing something wrong… can you guide me a little more?

    This is the image URL: http://79.170.44.86/petlodge.co.uk/wp-content/uploads/2012/03/paw.jpg

    Do I amend the css and if so can either of you outline exactly what I need to add… or do I also need to amend page.php as discussed in the above discussion on WordPress.org?

    Many thanks for your help (sorry this is a curve ball from a newbie in the UK!)

    Chat soon

    Jamie

    bluebox54

    #25653

    Hi Josh and Kenneth,

    Can either of you or anyone help me with this a little more… I’m stumped.

    Anonymous

    #25654

    Okay, are you using a child theme? If not, shame on you. Check this thread:

    https://forum.graphene-theme.com/graphene-support/beginners-resources-possible-sticky

    Then, upload your background image to your server.

    Now, add this to your css:

    .post-title:before {background-image:url("http://www.PATHTOYOURIMAGE");}

    Where PATHTOYOURIMAGE is the url to your image file.

    This is untested… but see what that does.

    bluebox54

    #25655

    Hi,

    (I’ve just read the child theme notes you’ve provided and will do this – thank you)

    I’ve tried .post-title:before and although the image still isn’t displaying I can see it’s trying to when I inspect the element in Firebug…

    can you have a look at this and see if I’ve just done sometyhing silly? http://79.170.44.86/petlodge.co.uk/

    I also tried background-position & Z-index if it was infact there but hidden… still no joy.

    Any ideas?

    Anonymous

    #25656

    Try this,

    .post-title, .post-title a:before {
    background: url("http://79.170.44.86/petlodge.co.uk/wp-content/uploads/2012/03/paw.jpg") no-repeat scroll 0 0 transparent;
    height: 41px;
    padding-left: 45px;
    }

    It may give,

    G9ze0.png

    bluebox54

    #25657

    Hi Prasanna, Great stuff thank you 🙂

    The only problem is it now shows on the child page links lower on the page as well… is there a way to stop that, other than turning off the child page links with-in a section?

    Anonymous

    #25658

    Add this too,

    .child-page .post-title {
    background: none;
    }
Viewing 10 posts - 1 through 10 (of 11 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!