Custom Social Media Icons

This topic has 5 replies, 2 voices, and was last updated 10 years, 8 months ago by delboorman.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
March 12, 2014 at 9:25 pm #21251

delboorman
Member

Hi,

I’ve added some additional custom social media icons to my site and they no longer appear in a single line like the others.

Please see http://canterbury.simplyitlimited.co.uk

Can you let me know how I would go about correcting the header social links and the ones I have in footer right hand side widget column too?

March 12, 2014 at 11:20 pm #21263
Sakin
Keymaster
@delboorman: For header right you can add the following CSS in “Appearance => Theme Options => Custom CSS” box.
```
#header-right {
    max-width: 350px;
}
```
But for footer, you can just use 2 footer sidebars and it will be fixed. So, just remove empty text widgets from Footer Area Two in “Appearance => Widgets”
March 13, 2014 at 2:16 am #21282

delboorman
Member

Thanks Sakin,

I’ve entered your suggested CSS and the icons are still appearing in the wrong place?

Additionaly I’ve removed the text widget from Footer Area 2 and now the social icons are positioned in the middle.

I’m trying the make the footer look like this:

March 13, 2014 at 6:30 am #21290

delboorman
Member

In Internet explorer and firefox the icons in the header line up correctly but in Chrome & Firefox they do not, any suggestions?

March 13, 2014 at 8:54 am #21293
Sakin
Keymaster
@delboorman: You can add the following css. But you have customized site a lot so I am not 100% sure that it will work fine or not.
```
/* To fix the custom social icon size  */
ul.social-profile li {
  height:33px;
  width:33px;
}
/* To the margin of Footer Widgets  */
#footer-sidebar .widget {
    margin: 0;
}
/* To increase the padding of social icon  */
#footer-sidebar .widget_catcheverest_social_widget {
    padding-top: 45px;
}
/* To Make social icon in float right */
#footer-sidebar ul.social-profile {
    float: right;
}
/* To Hide Site Footer Info */
#site-generator {
    display: none;
}
```
March 13, 2014 at 2:09 pm #21305

delboorman
Member

@Sakin: Many thanks for this, it works perfectly.
Author

Posts