Ad icons and copyright text in Intergalactic Theme

• 

  cityruncopenhagen · Member · Feb 20, 2015 at 5:10 pm

  • Copy link
  • Add topic to favorites

  Hi
  I’m new to this CSS custom option on WordPress Premium.
  How can I get the same copyright text and social media icons as this website (at the footer): http://contenterra.com

  I’m using the Intergalactic Theme: http://cityruncopenhagen.com

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

• 

  thelilg · Member · Feb 20, 2015 at 11:02 pm

  • Copy link

  OK so this could be old hat, but here goes. Based on their design… you will need the following:

  First you need some CSS

  .social-icons li {
          display: inline-block;
          list-style: none;
          margin: 0px;
          padding: 0px;
      }
      .socialmenu {
          text-align: right;
          line-height: 0px;
      }
      .social-icons li a {
          display: block;
          background: #eeeeee;
          color: #999999;
          text-align: center;
          text-decoration: none;
          line-height: 32px;
          min-width: 32px;
          margin: 2px;
          padding: 0px;
          border-radius: 16px;
      }
      .social-icons li a:hover {
          background: #999999;
          color: #eeeeee;
      }
      .social-icons li a span {
          display: none;
      }
      .social-icons li a::before {
          font-family: 'FontAwesome';
          font-size: 16px;
          font-weight: normal;
      }
      .social-icons li a[href*="facebook.com"]::before {
          content: 'f09a';
      }
      .social-icons li a[href*="twitter.com"]::before {
          content: 'f099';
      }
      .social-icons li a[href*="plus.google.com"]::before {
          content: 'f0d5';
      }
      .social-icons li a[href*="linkedin.com"]::before {
          content: 'f0e1';
      }
      .social-icons li a[href*="youtube.com"]::before {
          content: 'f16a';
      }

  Then some HTML written where you want the content menu to go.

  <div class="socialmenu">
          <ul id="CUSTOMID" class="social-icons">
              <li id="CUSTOMID" class="socialmenuitem">
                  <a href="http://www.facebook.com/pages/YOURFACEBOOK/"><span>facebook icon</span></a>
              </li>
              <li id="CUSTOMID" class="socialmenuitem">
                  <a href="http://twitter.com/YOURTWITTER"><span>Twitter icon</span></a>
              </li>
              <li id="CUSTOMID" class="socialmenuitem">
                  <a href="http://plus.google.com/YOURGOOGLE+/posts"><span>Google Plus icon</span></a>
              </li>
              <li id="CUSTOMID" class="socialmenuitem">
                  <a href="http://www.linkedin.com/company/YOURLINKEDIN"><span>LinkedIn icon</span></a>
              </li>
              <li id="CUSTOMID" class="socialmenuitem">
                  <a href="http://www.youtube.com/channel/YOURYOUTUBE"><span>YouTube icon</span></a>
              </li>
          </ul>
          <br/>
          <div class="CUSTOMCLASS">Copyright &copy; 2015 <a href="YOURCOMPANYURL">YOURCOMPANY</a>
          </div>
      </div>

  Just replace anything with UPPERCASE, like links and names etc.

• 

  staff-happychia · Staff · Feb 20, 2015 at 11:45 pm

  • Copy link

  http://contenterra.com is using Purpose theme which allows text widget in the footer but intergalactic theme isn’t designed to contain widgets in the footer.

  Intergalactic supports social menu but it displays social links at the end of the slide-out menu.

  So the placing of social links menu partly depends on the theme design. Please keep Add Social Media Buttons to Your Sidebar or Footer guide handy.

  This is the CSS to add copyright info in the footer.

  .site-info:before {
      display: block;
      content:"Copyright @ 2015 blah blah blah";
      text-transform: none;
  }

  You change before to after if you want the copyright beneath the WordPress.com credits. Also remove text-transform rule if you like the effect after removing it.

• 

  cityruncopenhagen · Member · Feb 21, 2015 at 1:52 pm

  • Copy link

  Thank you both for your fantastic help!
  The social media icons worked in the sidebar menu, and the copyright text is now in the footer:)

  Thanks!

• 

  thelilg · Member · Feb 21, 2015 at 5:12 pm

  • Copy link

  You are welcome. It was fun to flex my css skills.