Hi Kirsty

For the Pinterest icon could you try adding the following to the Custom CSS field of your templates parameters...


[code type=css].social-pininterest > a {
background-image: url("http://www.giftsfromgaia.com.au/main/templates/j51_nocturne/images/social_icons/pinterest.png";
}
.social-pininterest > a:hover background-color:#DB333A}[/code]

Regarding Facebook icon, one option would be to replace one of the unused icons with the facebook icon. You will find your icons located at ../templates/j51_nocturne/images/social_icons/ from the root of your Joomla installation. Download the facebook icon, rename it to match one of the unused icons and then upload it back to your server replacing the original.

Ciarán

Hi Ciaran,

I inserted the suggested text into Custom CSS filed and although it did fix the Pinterest issue it created a new isue. The Main Menu is now extended beyond where it should be, it's too long Is there a solution?

I will work on the second issue in teh morning as it's quite lat where I am.

Kind regards

Hi Kirsty

Try also adding the following to your Custom CSS field. Note that your last menu item will wrap to a 2nd line as there is not enough space in your menu area to accommodate all your menu items.


[code type=css].hornavmenu {width: 960px;}[/code]

Ciarán

Thank you Ciaran, all of that work brilliantly. I now have the additional icon on place. Can you please tell me where I go to change the hover text as it is still saying the name of the icon I replaced with he additional FaceBook one.

Hi Kirsty. Open your templates header.php (../templates/j51_nocturne/php/layouts/header.php) and replace the following (line39)...

<li class="social-vimeo"><a href="/<?php echo $this->params->get('social_vimeo'); ?>" target="_blank" title="Vimeo">Vimeo</a></li>

With...

<li class="social-vimeo"><a href="/<?php echo $this->params->get('social_vimeo'); ?>" target="_blank" title="Facebook">Facebook</a></li>

Ciarán

Thank you Ciaran, That worked perfectly. Just one other associated issue, the Pinterest icon does not have a hover colour enabled like the other two icons. Where can this be remedied?

My fault.. there is a slight type in the CSS provided which should be as follows...

.social-pininterest > a {

background-image: url("http://www.giftsfromgaia.com.au/main/templates/j51_nocturne/images/social_icons/pinterest.png");

}

.social-pininterest > a:hover {background-color:#DB333A}

Ciarán