Jump to content


Photo
- - - - -

moving the social icon bar to the footer


  • Please log in to reply
12 replies to this topic

#1 antonella

antonella

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 13 March 2012 - 11:27 PM

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?

#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 14 March 2012 - 01:06 AM

I used FireFox with Firebug installed and I believe the code you need to view is:

Please Login or Register to see this Hidden Content


You can use FireFox with Firebug will allow you to play around with the code without affecting your site.

#3 antonella

antonella

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 14 March 2012 - 07:29 AM

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 March 2012 - 12:38 PM

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

#5 antonella

antonella

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 14 March 2012 - 12:43 PM

Sorry, forgot to add the folder! Here it is:

Please Login or Register to see this Hidden Content



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 March 2012 - 09:45 PM

If you eliminate position: absolute; 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.

#7 antonella

antonella

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 14 March 2012 - 11:52 PM

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

#8 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 15 March 2012 - 12:18 AM

Screenshot:

Please Login or Register to see this Hidden Content

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?

#9 antonella

antonella

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 15 March 2012 - 12:24 AM

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?

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 March 2012 - 03:09 AM

There are more positioning attributes explained here:

Please Login or Register to see this Hidden Content

(relative, inherit, etc.)

#11 antonella

antonella

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 15 March 2012 - 12:28 PM

Okay, so I finally added position: static 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.

#12 antonella

antonella

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 15 March 2012 - 12:39 PM

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:

Please Login or Register to see this Hidden Content


Then add the following code to your child theme CSS:

Please Login or Register to see this Hidden Content


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.

#13 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 16 March 2012 - 02:46 AM

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).