social icons in footer – pique

• 

  sherrykoh · Member · Sep 30, 2016 at 3:41 am

  • Copy link
  • Add topic to favorites

  > *1. Social Media*
  > How do I make it appear in the middle instead of left and can I make the
  > logos bigger?
  >
  > *2. Background Colour *
  > How do I change that light blue background to other colours or background
  > photo? This is for all pages except for Home page.

  The blog I need help with is: (visible only to logged in users)

• 

  sherrykoh · Member · Sep 30, 2016 at 8:32 am

  • Copy link

  How do I make it like this wordpress site? Add copyright info, centralise social media icons and make it bigger.

  https://grassoart.com/

  Thanks.

• 

  thesacredpath · Member · Oct 3, 2016 at 7:49 pm

  • Copy link

  Hi, on your social links, add the following to the bottom of your custom CSS. I also centered the footer credit as I think it looks better with the social icons centered.

  .site-footer .secondary-links a {
      font-size: 25px;
      height: 40px;
  }
  .widget.widget_wpcom_social_media_icons_widget ul a, .secondary-links li a[href*="wordpress.org"]::before, .secondary-links li a[href*="facebook.com"]::before, .secondary-links li a[href*="twitter.com"]::before, .secondary-links li a[href*="dribbble.com"]::before, .secondary-links li a[href*="plus.google.com"]::before, .secondary-links li a[href*="pinterest.com"]::before, .secondary-links li a[href*="github.com"]::before, .secondary-links li a[href*="tumblr.com"]::before, .secondary-links li a[href*="youtube.com"]::before, .secondary-links li a[href*="flickr.com"]::before, .secondary-links li a[href*="vimeo.com"]::before, .secondary-links li a[href*="instagram.com"]::before, .secondary-links li a[href*="codepen.io"]::before, .secondary-links li a[href*="linkedin.com"]::before, .secondary-links li a[href*="foursquare.com"]::before, .secondary-links li a[href*="reddit.com"]::before, .secondary-links li a[href*="digg.com"]::before, .secondary-links li a[href*="getpocket.com"]::before, .secondary-links li a[href*="path.com"]::before, .secondary-links li a[href*="stumbleupon.com"]::before, .secondary-links li a[href*="spotify.com"]::before, .secondary-links li a[href*="twitch.tv"]::before, .secondary-links li a[href*="dropbox.com"]::before, .secondary-links li a[href*="/feed"]::before, .secondary-links li a[href*="skype"]::before, .secondary-links li a[href*="mailto"]::before {
      font-size: 25px;
      height: 40px;
      width: 40px;
  }
  .site-footer .secondary-links li a {
      height: 40px;
      margin-right: 5px;
      width: 40px;
  }
  .site-footer .secondary-links {
      text-align: center;
      width: 100%;
  }
  .site-footer .site-info {
      text-align: center !important;
      width: 100%;
  }

  To change the color on the header section on pages other than the home page, add the following to your custom CSS and adjust the hex color code as desired.

  body:not(.home) #masthead, body:not(.home) .main-navigation {
      background-color: #cc0000;
  }