Home Icon Image

[lordsmiff]

Hi all.

Once again, I am tantalisingly close to solving this myself but I'm just let down my understanding of what I can see in firebug and how to address that with a custom include.

I am trying to change the icon displayed on the navbar (http://ohisp.charlesworth.derbyshire.sch.uk) for the home page.

In the code below, I have tried all sorts of things to actually make the change itself. Of course, I can do it easily by replacing the image file itself but I want something that will survive if someone updates the theme once I have handed it over.

I have managed to sort of get it to work using background: but obviously, that is overlaid with the suffusion icon.

If someone could just have a quick look and correct my muppetry, it would be much appreciated

Code: Select all

.home-icon {
image: url("http://ohisp.charlesworth.derbyshire.sch.uk/wp-content/uploads/static/home.png")
}

Cheers,
Ant.

[lordsmiff]

I'm almost there with:

Code: Select all

img.home-icon {
src: url("http://ohisp.charlesworth.derbyshire.sch.uk/wp-content/uploads/static/home.png");
}

but it's still showing the original icon - is some other property overwriting mine??

Grrr.
Ant

[drake]

Just one - you CAN'T specify a "src" property for an image element. SRC is the element itself, by CSS you can style an element but can't replace it.

[lordsmiff]

Ah, I see - thanks for that.

So one thing I did see was that it can be done using a child theme.

I've set up a child theme and activated it and copied in my custom icon but I'm struggling to activate it it's in the same location as it would be in the main theme folder and I've tried adding an include for the pale-blue css file in style.css and altering the setting for the inherit in the back-end options but that messes up most of the other stuff...

I feel like I'm missing something simple...I've also looked through the navigation-menu.php file but to no avail...

Can anyone tell me what I'm missing?

Cheers,
Ant.

[sayontan]

There is always JavaScript. Under Back-end -> Custom Includes -> Custom Header JavaScript, put in:

Code: Select all

$j = jQuery.noConflict();
$j(document).ready(function() {
   $j('.home-icon').each(function() {
      $j(this).attr({
         src: "http://ohisp.charlesworth.derbyshire.sch.uk/wp-content/uploads/static/home.png"
      });
   });
});


[drake]

Sayontan are a huge fan of javascript, I am an old html guy )))

There are also a "clickabile background" technique:
- use the "home" text instead of image at Suffusion Options -> Other Graphical Element -> Navigation Bar Below Header.
- for the home "li a" item set your image as background through the Custom Styles section. Also, for the same "li a" element set "text-indent:-30000px;" After that your image will be still visibile and no one can see that they click on something that is at kilometers far from there

[lordsmiff]

Thanks to both of you for your replies. I'm not near my computer at the moment but I will try them later.

Would it be possible though for a quick explanation of how to do it with a child theme? As much for my curiosity than anything else. I've already got a child theme set up and activated and in the interest of making my understanding about suffusion and child themes, would like to know how to do it with that method too.

Is asking for 3 ways to do it just greedy?

Cheers guys!
Ant.

[drake]

I don't know if a child theme help you in this situation. As I said, by CSS you can't set a new image (so any @import or edits of stylesheets is useless) and I don't know if you can add a filter to functions.php to override the result of suffusion_get_home_link_html() function which pull the link to home in navigation bar.

But the most important thing is that you already have 2 solutions (if you use the js provided by Sayontan is a matter of seconds to have a new image there). And both solutions are "upgrade safe", like the child theme.

[sayontan]

If you really want to use a child theme, first get the starter pack. In the folder called "custom", copy the file called navigation-menu.php from Suffusion's custom folder. In that file there is a line that says:

Code: Select all

$home_link = suffusion_get_home_link_html($suffusion_menu_location);

Instead of the function call there, just put in your new link.

[lordsmiff]

Hi again.

I know I'm being dense but I don't know PHP at all and I've no idea how to do that - you can see my pathetic attempt on the site

I know you said just add my link in but....how?

I've googled for it and tried a fair few different ways but still nothing...

Cheers,
Ant.