How Can Edit Social Networking Block V1.2.1

[natebc]

Hello,

 

How can edit Social Networking Block Modules.When I'm in the B/O> Social Networking Block v1.2.1>Configure. I have added URL links to both Pinterest and YouTube. But there is no Social links that show up in the footer.  I would also like to how I can change the Social media buttons. Please let me know if this can be done? 

 

Natebc

[NemoPS]

You mean nothing happens when you hover on those links? Are you sure your theme uses that module?

[tdr170]

Hello,

 

How can edit Social Networking Block Modules.When I'm in the B/O> Social Networking Block v1.2.1>Configure. I have added URL links to both Pinterest and YouTube. But there is no Social links that show up in the footer.  I would also like to how I can change the Social media buttons. Please let me know if this can be done? 

 

Natebc

 

At first this was the same for me when adding additional URL's to Social block the icons did not show in the footer.

So after turning cache OFF and Force Compile to ON Clearing cache all icons show, did you try this.

[natebc]

At first this was the same for me when adding additional URL's to Social block the icons did not show in the footer.

So after turning cache OFF and Force Compile to ON Clearing cache all icons show, did you try this.

 

 

Hi tdr170, I will try that and let you all know. Dose any one of you know how to change the buttons?

 

Natebc

[natebc]

Hi Nemo1 and tdr170,

 

So I tried the turning cache OFF and Force Compile to ON. The new links work now and you see the new buttons/icons on the footer. Dose any one of you know where the buttons/icons are saved? I would link to change them.

 

Thanks

Natebc

[tdr170]

They are not saved buttons or images but Fontawsome fonts you can find a complete list here

 

http://fortawesome.github.io/Font-Awesome/icons/

 

Then once you find the icon you like in the top section look for the unicode   Example:  Unicode: f230      This is a Facebook code.

Copy the code and replace it in the global.css file should be around line 7360 in the .footer-container section.

 

change this:

          .footer-container #footer #social_block ul li.facebook a:before {

 

            content: "\f09a"; }

 

like this (or your code)

          .footer-container #footer #social_block ul li.facebook a:before {

            content: "\f230"; }

 

You will need to do this for each social block you want to change the icon for.

 

 

​Then snazzy is up a little by adding a text shadow with this code   text-shadow: 1px 1px 0px #fff;     add this to the section as below around line 7341.

As you can see I have changed the color to blue and added the text shadow, you can change either color to your liking.

 

 .footer-container #footer #social_block ul li a {

            display: inline-block;

            color:blue;

            font-size: 32px;

            text-shadow: 1px 1px 0px #fff; }

[natebc]

 

They are not saved buttons or images but Fontawsome fonts you can find a complete list here

 

http://fortawesome.github.io/Font-Awesome/icons/

 

Then once you find the icon you like in the top section look for the unicode   Example:  Unicode: f230      This is a Facebook code.

Copy the code and replace it in the global.css file should be around line 7360 in the .footer-container section.

 

change this:

          .footer-container #footer #social_block ul li.facebook a:before {

 

            content: "\f09a"; }

 

like this (or your code)

          .footer-container #footer #social_block ul li.facebook a:before {

            content: "\f230"; }

 

You will need to do this for each social block you want to change the icon for.

 

 

​Then snazzy is up a little by adding a text shadow with this code   text-shadow: 1px 1px 0px #fff;     add this to the section as below around line 7341.

As you can see I have changed the color to blue and added the text shadow, you can change either color to your liking.

 

 .footer-container #footer #social_block ul li a {

            display: inline-block;

            color:blue;

            font-size: 32px;

            text-shadow: 1px 1px 0px #fff; }

 

 

 

Hi tdr170,

 

Thanks for the reply and info. I had no idea that they where Fontawsome fonts. That explains why I can't find any information on this. I would like to use our own buttons / images. would you know of any free Modules that will allow us to do that?

 

Thanks for the help

Natebc

[tdr170]

For this you will need to upload the images, create a folder in the root named social and upload your images there.

Then in the global.css file instead of using the content "\f230";} you would change to background-image: url (see below)

 

Change this:

 

 .footer-container #footer #social_block ul li.facebook a:before {

            content: "\f082"; }

 

To This: (remove a:before-change to image url) obviously change url to your folder and image name.

 

 .footer-container #footer #social_block ul li.facebook  {          

            background-image: url("/social/facebook32.png");}

 

 

Now you will most likely need to edit the css for the image to show properly, in this case the image is 32x32px, added height  removed text-align and added margin-top.

 

Changed this:

.footer-container #footer #social_block ul li {

          float: left;

          width: 40px;

          text-align: center; }

 

To this:

.footer-container #footer #social_block ul li {

          float: left;

          width: 32px;

          height:32px;

          margin-top:-3px; }

[apnow]

Hi,

 

I have a similar issue with my social networking block in my front page (check: www.transmisionacardan.es).

 

I am able to see the facebook icon, but when I hover on it nothing happens (stays on grey). I checked the source code and a href  tag atribute points to the correct facebook link.

 

Best

 

 Apnow

[ara2222]

hi,

I did the same change, to replace the social media icons, it is done successfully, but: 1- there is no link anymore! I mean I can not click on them!

2- how may I add instagram too ?

 

Thank you