Hi

I'm using zen social fixed to the right on the following website. Our client has now decided she wants the 4th icon (where I'm currently using the Google Plus icon) to be a map pin point, is there a way I can change the image it is linking to with css? I have tried and tried and nothing seems to be working.

www.morstoncreek.com/

An example of the kind of icon I mean is on Ecospirit template, at the bottom above the word location.

demo.joomlabamboo.com/index.php?theme=nov12


Many thanks in advance.

Heather

Hi Heather,

The social module uses icons found in popular social media platforms

So it doesn't include map pointers I'm afraid

However you should be able to borrow the icon from the font awesome library - although this does involve sacrificing an icon for one social media platform

E.g. load one social platform and swap the icon out for a different one

It isn't easy but this is what I used to test above

.icon1 [class="foundicon-dribbble"]:before {font-family:"FontAwesome";}

.foundicon-dribbble:before {content: "\f041" !important ;}

I'm targeting the first icon e.g.icon1 and using the dribble icon

Cheers
Paul

Hi Paul

Thank you so much! I don't think I would have ever been able to work that one out!

Just one more thing – how would I get it so that the background colour is the same width as the others? Currently on the new one that has been created there is a white gap to the right.

Thank you again.

Heather

Hi Heather,

Where have you placed the styling for the icon?

I can't seem to see it on the custom.css file

Cheers
Paul

ah its on the social css

If you update the module you would lose that styling

I would suggest adding it to the custom.css file

Cheers

With the icon - the social media icons are a bit wider

If you try

#fixed-right span {padding-right:26px;}

how does this work cross browser when you test?

Cheers
Paul

Hi Paul

I realised as soon as you'd said it I should have put it in the custom file!

#fixed-right span {padding-right:26px;} doesn't seem to making a difference.

Many Thanks

Heather

Hi Heather,

You do have the line already added on the custom.css file line 1538 but with current value

Are you adding the style I suggested to the bottom of the custom.css file?

If you add it to the top the existing style will override it

Cheers

Hi Paul

Sorry I'm only just replying now but I wasn't in the office over the weekend.

I had put it at the top of the custom.css file but it wasn't making a difference. I ended up putting it on line 1538 and is working as it should now.

Thank you again for all of your help in solving this.

Best wishes

Heather

Hi Heather,

You're welcome

Cheers
Paul