Jump to content
Sign in to follow this  
solocollective

How To Customise Social Icons.

Recommended Posts

solocollective

I was recently asked by a client to make the social network icons in the header of the site I was creating larger. After Reading through this forum I was still confused how this could be achieved easily and still be customisable. After a couple of hours of fiddling I managed to get what I was after, so i thought I would share with you a step by step guide on how to do it. 1. Remove original icons in the header section of platform pro's settings. 2. Install the plugin "social media widget" to wordpress 3. In the platform pro template setup area, choose the header section and drag the universal sidebar to the top of the list on the left. 4. In the widgets section of wordpress drag the "social media widget" to the universal sidebar. 5. Click on the down arrow "social media widget" in the widget menu to edit the settings. First delete Title and then insert relevant url's to enable to icons. Make sure that the Icon Alignment is set to RIGHT. I also recommend making the icon opacity 100% 6. Finally, insert the following code into your custom css section of platform pro. #sidebar_universal { position:absolute; left:10px; top:150px; z-index: 2; } Final Notes. The above css code means in simple terms that the position of sidebar is anchored, but moved 10 pixels from left and 150 pixels from the top. These two number will probably need to be adjusted for your site as your logo will more than likely be a different size to mine. The z-index tells the univeral sidebar to sit on top of header image so that there is no gaps and all the links still work. If all goes to plan you should end up with some lovely social icons like this: http://www.allstarrecords.co.uk/ Hope this helps, Felix.

Share this post


Link to post
Share on other sites
emasdesign

Is it possible to position the social icons elsewhere on the page using the mentioned widget?

Share this post


Link to post
Share on other sites
kastelic

Yes, it is a widget so you can put it in any widget area including the main sidebar.

Share this post


Link to post
Share on other sites
lazlo
great article...v helpful...Would like to use you 'recipe' only trouble is I'm already using Universal sidebar elsewhere..any advice as to which was to proceed? many thanks

Share this post


Link to post
Share on other sites
avidowl
@solocollective, it seems like it would also be possible to put the universal sidebar into the menu area instead of the header (so that the social media icons appear at the end of the menu/in-line with the menu) but when I tried that the buttons no longer worked. Do you know what might need to be altered and where? If it's the custom CSS code, should there be something different in the z-index line? (At which point I have zero idea of what to do!) Help much appreciated!

Share this post


Link to post
Share on other sites
communicreations
Wickedly straightforward. Thank you!

Share this post


Link to post
Share on other sites
jeffzanini
I'm having some trouble with this, I cannot get the universal sidebar to overlap ontop of my branding?

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  

×