Jump to content


Photo
Viewer Theme

Social Bar Icons Not Centering

social bar not center

Best Answer evscicats , 20 January 2014 - 09:53 PM

I finally figured out how to get the social icons in the Viewer theme to be centered in the section. Turned off the float and changed the display from inline to inline-block.  

 

This is what I added to my custom css if anyone wants to use it.  

 

 
.section-socialbar .icons .menu li {
float: none !important;
display: inline-block !important; 
}
Go to the full post


  • Please log in to reply
4 replies to this topic

#1 evscicats

evscicats

    Advanced Member

  • Members

  • 77 posts
  • Framework Version:DMS 2.0.6
  • Country: Country Flag

Posted 05 December 2013 - 07:05 PM

I'm having a little trouble getting the icons in the Social Bar section from the Viewer Theme to be centered in the footer on my website.  Here's the link so you can check it out - http://evscicats.com/erevolution

 

According to Chrome and Firefox webdev tools, the menu class is aligning text to center and is not being overridden by any other tag.  

 

Are the icons supposed to be centered? 

 

Thanks - Jerrad

 

P.S. - In case you need to know... here's a little background on how my site and theme is setup.  I am using the DMS Template Theme and the Pagelines Customize plugin to alter my CSS and LESS.  I had a lot of custom stuff in my style.css file in my theme so I decided to add the features of the Viewer theme by moving the Viewer pl-config.json and header.php files to my DMS Template Theme folder, added the functions.php code from the Viewer to my DMS Template Theme functions.php, and then moved the sections over.  The only thing I didn't transfer was the Viewer style.less and style.css files.  



#2 Danny

Danny

    Is Awesome!

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

Posted 08 December 2013 - 12:26 PM

HI,

 

If you want to center the section, you can do this with the offset option next to where you increase/decrease the sections width.



#3 evscicats

evscicats

    Advanced Member

  • Members

  • 77 posts
  • Framework Version:DMS 2.0.6
  • Country: Country Flag

Posted 10 December 2013 - 02:50 AM

Danny,

I already did that but the icons are not centered in the section itself and it's very noticeable that the icons are not centered on the page. I am 5 icons - Facebook, Twitter, Google+, YouTube, and RSS. I have the Column Width set to 4/12 with an offset of 4. Decreasing the width doesn't help - 3/12 no change, 2/12 is too much pushing RSS to the next line.

Any other advice?

Thanks,

Jerrad

#4 evscicats

evscicats

    Advanced Member

  • Members

  • 77 posts
  • Framework Version:DMS 2.0.6
  • Country: Country Flag

Posted 20 January 2014 - 09:53 PM   Best Answer

I finally figured out how to get the social icons in the Viewer theme to be centered in the section. Turned off the float and changed the display from inline to inline-block.  

 

This is what I added to my custom css if anyone wants to use it.  

 

 
.section-socialbar .icons .menu li {
float: none !important;
display: inline-block !important; 
}


#5 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 January 2014 - 02:00 AM

Hi Jerrad, glad you got it resolved, thank you for posting the solution and updating the thread.







Also tagged with one or more of these keywords: Viewer Theme, social bar, not center