1

[bluebox54]

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]

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");

}

[Kenneth John Odle]

Kenneth John Odle

#25651

You can also use the before css pseudo class:

.post-title:before {image stuff here}

Not tested; YMMV

[bluebox54]

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]

bluebox54

#25653

Hi Josh and Kenneth,

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

[Anonymous]

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]

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]

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,

[bluebox54]

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]

Anonymous

#25658

Add this too,

.child-page .post-title {

background: none;

}