changing link favicon image

Chris H

I've created a custom link button to a directory site called 'Homify' and added it to the Facebook and LinkedIn icons at the bottom of my site:

http://www.chrishumphreys.net

However I'd like to change the standard 'link' button image with this one from the Homify site: and keep it the same size as the others.

Is this possible by adding some CSS code to the advanced section of the theme?

Thanks in advance

rnrjosh

This should be possible using the CSS shown in THIS post. You'd just need to upload your properly sized icon to SmugMug, grab a link to that image from the Share menu, and plug that into the code. I believe the social icons on your site are currently 24x24 in size.

Chris H

rnrjosh wrote: »

This should be possible using the CSS shown in THIS post. You'd just need to upload your properly sized icon to SmugMug, grab a link to that image from the Share menu, and plug that into the code. I believe the social icons on your site are currently 24x24 in size.

No joy I'm afraid. Have uploaded a correct size icon and used the code from the post you noted (tried both versions of the code for getting the original not to display), no luck as yet. Am I missing something? Here's the code I've used:

.sm-page-widget-social-links-link yui3-u {
background-image: url("http://www.chrishumphreys.net/photos/i-n48DZtp/0/O/i-n48DZtp.png");
}

.sm-fonticon-LinkSquare:before {
    display: none;
}

rnrjosh

Try this CSS, I think this should work:

.sm-page-widget-social-links-link {
background-image: url("http://www.chrishumphreys.net/photos/i-n48DZtp/0/O/i-n48DZtp.png");
}

.sm-fonticon-LinkSquare:before {
display: none;
}


I think you'd still need to tweak the size of the Homify icon a bit, but that should replace the link icon with your custom one.

Chris H

rnrjosh wrote: »

Try this CSS, I think this should work:

.sm-page-widget-social-links-link {
background-image: url("http://www.chrishumphreys.net/photos/i-n48DZtp/0/O/i-n48DZtp.png");
}

.sm-fonticon-LinkSquare:before {
display: none;
}


I think you'd still need to tweak the size of the Homify icon a bit, but that should replace the link icon with your custom one.

No joy I'm afraid. I also tried adding !important to the 'display: none' line but it still doesn't work....

rnrjosh

Hmm, that CSS seems to work when you add a CSS block under the Entire Site section, but not when I add it to your Theme CSS. Check your site now, I added a CSS block under the Entire site section, and that same code seems to work normally.

EDIT: I think I made a mistake, give me just a sec and I should be able to fix that.

bobbyhero

I've just added a separate HTML block for that icon, since it wasn't behaving in the standard social icon block. You'll need to fine tune is as necessary, but that approach should work better, and be cleaner.

Chris H

Thanks chaps. I've tweaked the positioning. What do I need to add to the code to get it to open the link in a separate window? blank something?

rnrjosh

Just change the HTML for the link to this:



That should do it!

Chris H

Just the ticket, thanks