[Kazim EParticipant]

Hi I want to know how to add these icons to the footer please- here is the set link
http://www.designkindle.com/2011/10/27/socialis/

I want to also know if its possible to make each icon mouse over to another image
i.e black icon base> mouse over = red icon

Please let me know – love X-theme

[SupportMember]

Hi Kazim!

Thank you for using the support forum!

You can refer to this link on how to create a hover effect using css and html. The example is different but the idea is the same.

http://www.webhostingsecretrevealed.net/blog/web-design/how-to-create-link-with-hover-image-in-plain-css/

You can use the Text widget on Appearance > Widgets to create the html code then add it on Footer Widget Area. Add the css on Customizer > Custom > CSS. Basically, what you have to do is add the html code on the text widget. We will create a facebook icon for example:

<a href="LINK HERE" class="x-footer-social-icons facebook">Facebook</a>

Then referring to the link, add something like this on Customizer > Custom > CSS to:

.x-footer-social-icons.facebook {
 width: 32px;
 height 32px;
 display: block;
 text-indent: -9999px;
 background-image: url(images/facebook-icon.png);
 background-repeat: no-repeat;
 }

Then the hover effect will look like this:

.x-footer-social-icons.facebook:hover {
 background-image: url(images/facebook-icon-hover.png);
 }

You need two images for one social icon. One for the initial display and the other one for the hover effect. You can use sprites but the example above is the simplest example. This needs polishing but it is a start. I hope that helps.

Cheers!

[Kazim EParticipant]

Hi there thanks for that – but I still need to know how to put images in my footer using visual?

[AlexanderKeymaster]

Hi Kazim,

The footer doesn’t have any editable content areas like a post or page. Visual Composer only works in content areas. So, I’m afraid this isn’t possible.

You can change the footer using the options in Customizer > Footer – changes beyond that will take custom code.

[Kazim EParticipant]

oh no 🙁 could you give me the code to put the icons there please? I need to know where to enter it – im very new to CSS im still learning.

[SupportMember]

Hi!

Please follow the instructions above then refer to the link that we gave you. If you don’t feel comfortable doing that, please look for a service on Microlancer or Tweaky to assist you with the changes. I’m sorry but custom coding like the one you’re asking is beyond the scope of support as stated in the support policy. The instructions on the tutorial is quite simple and I’m sure you can do it on your own.

Cheers!

[Kazim EParticipant]

Hi where do I put the CSS code- I see no footer CSS fields – can you pls point me in the right direction? Ty

[SupportMember]

Hi there!

You can add the css codes on Customizer > Custom > CSS.

Thanks!

[Kazim EParticipant]

Ah how silly of me – ty
So to clarify in customizer CSS I type:

Facebook
.x-footer-social-icons.facebook {
width: 32px;
height 32px;
display: block;
text-indent: -9999px;
background-image: url(images/facebook-icon.png);
background-repeat: no-repeat;
}
.x-footer-social-icons.facebook:hover {
background-image: url(images/facebook-icon-hover.png);
}

and the icons will be aligned on the bottom right of footer? Is it the same process for the top right corner of the header?

[RadModerator]

Hi Kazim,

Yes, that will be the code needed and same applies to social icons on header. And also assumes that you already have icons placement on footer, else it will work. You could upload your icon at media library and copy its link to be us as background-image.

But if you’re unsure, you could give us your site and icon url and we will give you an exact code.

Thank You.

[Author]

Posts