Simple Social Icons 1.0 Styling Fix and Tricks

Community Forums Forums Design Tips and Tricks Simple Social Icons 1.0 Styling Fix and Tricks

This topic is: not a support question

This topic contains 1 reply, has 2 voices, and was last updated by  anitac 1 year ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #31263

    Damian
    Participant
    Post count: 3

    After upgrading to Simple Social Icons 1.0, some of you may encounter some problems with it’s styling.

    I will use the Fabric Theme as an example.

    Sidebar

    If you are using the Simple Social Icons in the sidebar, you will find that the widget title for it is not consistent with your other widget titles, i.e. seems shorter than the rest. This is due to the CSS generated by the plugin – overflow: hidden.

    Rather than mess about with the CSS, here’s a simple trick you can use:
    Just before your Simple Social Icons widget, add a text widget and input the title you want for your Simple Social Icons widget, eg. “Follow Us”. Leave the content blank for the text widget. Then go to your Simple Social Icons widget and remove the title, i.e. leave it blank.

    After saving the changes you should now see that all the widget titles are consistent. Basically, you are using the empty text widget to generate the title for your Simple Social Icons widget.
    (This trick can also be used for the Generate theme.)

    Footer

    If you are using the Simple Social Icons in the footer widget area, you will find that the styling of the icons are different. This is because the CSS styles for the footer widget area is overriding your Simple Social Icons styling.

    Here’s a simple fix:
    Open up your theme’s stylesheet and add the following:-
    .simple-social-icons ul li a,
    .simple-social-icons ul li a:hover {
    text-decoration: none !important;
    color: #ffffff !important;
    }

    Just adjust the style to fit your theme’s design.
    This fix is useful when you find that the Simple Social Icons looks different when you implement it on various locations on your site, eg. sidebar and footer.

    Hope this helps.

    Cheers

    Damian

    #31267

    anitac
    Participant
    Post count: 6495

    That’s pretty cool. Thanks for sharing those! I am sure others will find this most helpful.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

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

You must be logged in to reply to this topic.