Jump to content
Sign in to follow this  
daskim

How To Change The Home Icon in the Header To A Custom Graphic

Recommended Posts

daskim

I have the graphic and have uploaded it to my media libarary. It is a transparent png. I'd like it to look like this change: http://golfclub-stippelberg.nl/wp/ Also how to a replace the text name of my site with a graphic like the same site? thank you? And sometime a little detail is great in understanding for us non knowing people

Share this post


Link to post
Share on other sites
Jackey

O.K. A little warning in advance: All these changes can give unpredicted results in old browsers like IE6.

Also how to a replace the text name of my site with a graphic like the same site?
This can be done (out-of-the-box) in [iBlogPro3 Options][Custom Images][Custom Header Image], I use a PNG image file so I can use transparency.
How To Change The Home Icon in the Header To A Custom Graphic
I found the need to ad a logo in a way that it does not use a lot of space, so on top of the menu-bar was a good option. Since the home-icon was already there, and perfectly positioned in relation to the menu-bar, I replaced that image with my image /wp-content/uploads/badge.png. How to change the home icon (into a 100x100 pixel badge.png): File involved `iBlogPro/library/_nav.php` (please make backups) Change line 5: `` To: `badge.png` Or replace line 5 with: ` badge.png ` You need to tweak the `margin-top: -50px; margin-bottom: -10px;` to adjust the position vertically. I think that ideally it should zero out: margin-top+margin-bottom+(badgeheight-24)=0 How to move the title: Ad this to your [iBlogPro3 Options][Custom Code][Custom CSS] ` #header { margin-left:108px; margin-bottom:-1px; } ` Tweak this to your needs (there will be a very slight vertical difference between Safari and firefox). That should be it. Note that the values used can give slightly different results because I've done extensive editing on my theme regarding margins and padding. Happy tweaking!

Share this post


Link to post
Share on other sites
wirrac

Just find the Image location and delete that image and upload that what you want ;) Adel M

Share this post


Link to post
Share on other sites
Jackey

You can indeed do that... and regret it later... Details is what he was asking for! Actually you can not just replace the image, because the dimensions are hardcoded in the PHP.

Share this post


Link to post
Share on other sites
buechserjunkies

Hi, knows someone how to change this in iblog4? Unfortunately, this way does not work any longer. Thanks

Share this post


Link to post
Share on other sites
Jackey

It actually has been made easier to accommodate this and - done this way - it will survive updates. Enter the URL of the PNG image in: iBlogPro >> Theme Options >> Header And Nav >> Navigation Home Icon This will put the icon in place Add the following code to your custom code: To alter position and dimensions: ` #wrapper #nav ul.dropdown li a.home, #wrapper #nav ul.dropdown li a.home:hover { height:85px; margin:-50px -15px -17px; width:100px; } ` To move the header logo to the right: `#header {margin-left:108px;}` In this example the logo is 100x100 pixels but can be any size. For orientation please note that you are looking at a background image aligned top-left in a frame, so it is the frame you are moving and sizing. Be sure the "hot-zone" of the object does not cover other buttons or links. You have to adapt the values to suit you image and position of course. You best tweak it into position using firebug, and then change the values in the custom code accordingly.

Share this post


Link to post
Share on other sites
buechserjunkies

WOW Many thanks for your speedy assistance! works

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×