Jump to content
Sign in to follow this  
ugofalchi

Skype social icon

Recommended Posts

ugofalchi

Hi there, following your suggestion found in the forum, I add this code to base.css:

.icons .skype{background-position:-110px -22px;} .icons .skype:hover{background-position:0px -22px;}
and this code to function.php:
a href="skype:mhflyer?call; class="skype"
after the upload of icons in Media tab of wordpress, also if I can use correctly skype in my blog (ugofalchi.eu/blog), the icon didn't appear. Where am I wrong? Can you help me? Thanks a lot ugo

Share this post


Link to post
Share on other sites
ugofalchi

Hi Catrina, thanks a lot for your reply. I used a hook and I looked at the page you kindly gave me, but nothing happens: could u show me where am I wrong? Thank u so much for your help

Share this post


Link to post
Share on other sites
catrina

Is (are) there any step(s) you had any trouble with? Also, the code should be something like ``


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ugofalchi

Hi Catrina, the code in function.php work well, but the icon doesn't appear, so I think the problem is in css code and in the way to call the images I upload in Media tab. I didn't use sprite socialicon png but I put directly Skype icons in Media tab: is it right?

Share this post


Link to post
Share on other sites
catrina

In the CSS you didn't include the image path for the icon. You should get the image URL for it and implement the CSS like in this example:

.icons .skype{background: url('SKYPEIMAGEURL'); background-position:-110px -22px;}
	.icons .skype:hover{background-position:0px -22px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ugofalchi

with your new suggestion, funcion.php code doesn't work. The old hook code is perfect and it work well, is the css that doesn't work, you can click close to linkedin icon and skype open, but no icon.

Share this post


Link to post
Share on other sites
ugofalchi

I got it with this code:

a href="skype:mhflyer?call; class="skype"><img src="http://www.ugofalchi.eu/blog/wp-content/uploads/2011/03/skype_c.png" alt="Skype" /

but now I don't now how to declare hover to have icon gray and icon color on mouse over

Share this post


Link to post
Share on other sites
catrina

You will need to create a black and white version of the Skype icon and implement the image URL for that in the CSS.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ugofalchi

I did it, but I don't know if I am wrong with css code or where I upload the two icons. I'm pretty sure I have to declare the icons url in the css code (and not in function.php also if doing so icon appear) but nothing happens

Share this post


Link to post
Share on other sites
timlinson

Maybe it was just a typo in your 2nd to last post, but just to make sure, your "hover" link needs to be set to the color image, not gray.

Share this post


Link to post
Share on other sites
ugofalchi

Thanks a lot Tim, I did it, but no icon again. I'm sure is a stupid thing in my css code but hard to find!

Share this post


Link to post
Share on other sites
timlinson

What is the CSS code you're using for .skype and .skype:hover now?

Share this post


Link to post
Share on other sites
ugofalchi
.icons .skype{background: url('http://ugofalchi.eu/blog/wp-content/uploads/2011/03/skype_g.png'); background-position:-110px -22px;}
	.icons .skype:hover{background: url('http://ugofalchi.eu/blog/wp-content/uploads/2011/03/skype_c.png');background-position:0px -22px;}

Share this post


Link to post
Share on other sites
timlinson

Have a look at this icon image. It's one image with the color and gray versions combined: sprite-socialicons.png We use the

background-position

property here to specify the pixel positions of the icon we want to use. For example, "-22px 0" would be the gray twitter icon and "-22px -22px" would be the hover icon. You can see an example in base.css for the stumbleupon icon. The link would then be `` Hope this clears things up a little bit!

Share this post


Link to post
Share on other sites
ugofalchi

Thanks Tim for your help, but I need to use a Skype icon, and I can't believe that anyone can help me in the forum. I'll try by myself.

Share this post


Link to post
Share on other sites
timlinson

Ugo, If you want to use your separate Skype icons, your css rules will look something like this (no background-position): `.icons .skype { background: url('path_to_gray_icon') no-repeat; }` `.icons .skype:hover { background: url('path_to_color_icon') no-repeat; }` with a link like this (no image here): ``

Share this post


Link to post
Share on other sites
ugofalchi

Tim, you'r great! Now it work, thanks a lot for your patience, I really appreciate your help. Hope other people will find in your words a solution for their similar problems. THANK YOU

Share this post


Link to post
Share on other sites
ugofalchi

Only one thing, any suggestion to have the same graphic of PlatformPro, on my icons?

Share this post


Link to post
Share on other sites
ugofalchi

Fixed!, please don't consider my last post.

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  

×