• 0
Sign in to follow this  
Followers 0

moving the social icon bar to the footer

Question

Posted · Report post

Hello, I'd like to have the social icons in the footer instead of the branding area. I copied the html and placed it in a text widget in the footer columns. However, it seems to be stuck in the position it is in all the way extended to the right even when it's in the middle column, and I can't seem to tweak the css to get it to move. What is the CSS I should be looking at? How can I move the position to the top of the widget left-aligned or centered in the widget?

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

I used FireFox with Firebug installed and I believe the code you need to view is: [code].icons { bottom: 50%; height: 24px; line-height: 20px; position: absolute; right: 0; text-align: right; } .icons a { display: block; float: right; height: 24px; margin-left: 8px; opacity: 0.5; text-align: right; width: 24px; }[/code] You can use FireFox with Firebug will allow you to play around with the code without affecting your site.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, I do use Firefox Firebug extensively to customize my site, and I do have that code identified. The problem is, I have fiddled with changing the float and the text-align, but that code is only affecting each icon. I can't find the code that affects the position of the whole block. There must be some absolute positioning going on because it is pushing the element out of the text widget onto a different level, it seems.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Can you provide a link to your website please, the one you added to the first post is not working.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry, forgot to add the folder! Here it is: [url]http://www.earlymusicbesalu.com/site[/url]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you eliminate [b]position: absolute; [/b]the whole icon group moves to the center. It may need some additional alignment based on where you want it placed. It will likely reveal that the word "Search" needs to be aligned right above the search box.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It didn't work. There seems to be some other style in effect that I can't find.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Screenshot: http://screencast.com/t/Op4hFMENbnFa Using Firebug I removed the absolute on the .icons and it moved the whole set to the middle. Is this what you are looking for?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, I did that on firebug and it works. But I have the css in my base child theme stylesheet, and perhaps that's why it's not overriding the position: absolute? Why is the position: absolute style still appearing if I have it removed in my child theme? For example, if I want to get rid of a background on a style set in pagelines, I just say background: none and it works. But all I did here is take out the whole style, but it didn't take effect. Is there any way to clear out a position?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

There are more positioning attributes explained here: http://www.w3schools.com/cssref/pr_class_position.asp (relative, inherit, etc.)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, so I finally added [b]position: static[/b] to the style definition in my child theme css and that seemed to override the position: absolute. Phew. Now I have to figure out why the opacities are working! I just want it to be the same as it was in the header, but it's not transferring here.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, figured it out! I'll replicate the steps here: Add the following code to your footer widget (changing urls and image locations accordingly). I copied this from the pagelines demo and removed the opacity style hardcoded in each one: [code] [/code] Then add the following code to your child theme CSS: [code] /* social icons */ .icons { bottom: 50%; position: static; height: 24px; line-height: 20px; right: 0; text-align: right; } .icons a { display: block; float: right; height: 24px; margin-left: 8px; opacity: 0.5; text-align: right; width: 24px; } .icons a:hover { opacity: 1; }[/code] I think adding these icons can be done with some plugins as well, which would be easier, but I wanted the faded out effect with hover. Haven't tested those plugins yet.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cool beans, thanks for posting what you came up with. I don't know of any plugins off the top of my head that have that fade/hover effect, but I know of jquery plugins that replicate that effect (I don't know how well that would work, though).

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  
Followers 0