Sign in to follow this  
Followers 0

Viewer Theme Social Bar Icons Not Centering

5 posts in this topic

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 -


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.  

Share this post

Link to post
Share on other sites



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

Share this post

Link to post
Share on other sites

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?



Share this post

Link to post
Share on other sites

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; 

Share this post

Link to post
Share on other sites

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

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

  • Similar Content

    • Where to add a ShareThis bar or other social bar to posts and home page summaries?
      By Claude203
      I would like to add this just below the post excerpt for each blog post, both in the single post appearance and in each of the post summaries listed on the main blog page. But where does it go? I cannot find the _posts or post_template that used to exist in the old WhiteHousePro.
      <!-- ShareThis Button BEGIN -->
      <span class='st_fblike_hcount' st_url='<?php the_permalink() ?>' displayText=‘FB Like'></span>
      <span class='st_twitter_hcount' st_url='<?php the_permalink() ?>' displayText='Tweet'></span>
      <span class='st_facebook_hcount' st_url='<?php the_permalink() ?>' displayText='Share It'></span>
      <span class='st_pinterest_hcount' st_url='<?php the_permalink() ?>' displayText='Pin It'></span>
      <span class='st_linkedin_hcount' st_url='<?php the_permalink() ?>' displayText='LinkedIn'></span>
      <span class='st_email_hcount' st_url='<?php the_permalink() ?>' displayText='Email'></span>
      <!-- AddThis/ShareThis Button END -->
      Screen shot attached of what it looks like.
      Thank you.
    • how to center social bar in VIEWER theme
      By tandan
      HI there, I'm trying to center the social bar that comes with the Viewer theme. Any idea how best to do that? I've changed the width and then offset it but it's not perfect. I wish I could just have it center within the full width but not sure where to set that. Please advise. Thanks!!
    • Customised Brand-Callout-Social Section
      By xavaireland
      I am trying to create a custom section where the branding and the social bar and a callour are all in one.

      The left side of the section will be the logo. The right side will have a phone number and then immediately below it will be the social icons.

      So far I have managed to edit the callout section to remove the CTA button and move the Header to the right. Is it possible to overlay 2 sections in Pagelines? If not, I will have to look at writing a custom section for the brand-Social-CTA - I would like to avoid it if possible so I thought I'd ask if overlaying 2 sections is possible?