Insert Copyright & Social Links to Footer

• 

  eph3dra · Member · Mar 30, 2015 at 2:27 pm

  • Copy link
  • Add topic to favorites

  Hi everyone,

  I’d like to add a copyright and social links to the footer of my Purpose Theme website. I’d like those two elements to be just beside “WordPress.com” and “Purpose Theme”.

  Thank you for your help

• 

  thesacredpath · Member · Mar 31, 2015 at 8:04 pm

  • Copy link

  Hi there, Purpose has the Social Menu feature that is configurable through Appearance > Menus and you can find out more on how to set it up here. You can see what they will look like by scrolling to the bottom of the Purpose demo site.

  Since Purpose already has the site title in the footer, one option would be to add to that something by using the following CSS

  .footer .align-left p:first-of-type:before {
      content: "Copyright ";
  }

  which puts “Copyright” before your site title.

  Alternately we could add a copyright above the site title in the footer with the following. As you can see with this example, you can then style that text as well.

  .footer .align-left:before {
      content: "This is my Copyright";
      font-size: 120%;
      font-weight: bold;
      color: #cc0000;
  }

• 

  eph3dra · Member · Apr 1, 2015 at 11:06 am

  • Copy link

  Thank you for the reply !
  I managed to insert the social menu although I am still missing the 8tracks and SoundCloud CSS codes. Maybe you know what they are ?

  The option of adding copyright using CSS seems good but where do I go to insert these CSS codes ?

  Thanks

• 

  vishnuprabhasridharan · Member · Apr 1, 2015 at 11:28 am

  • Copy link

  Edit profile with css seems

• 

  thesacredpath · Member · Apr 1, 2015 at 11:57 pm

  • Copy link

  For the CSS, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS.

  On the missing icons for SoundCloud and 8tracks, there aren’t icons for those in the Genericons icon font that we are using at this time. It may be that they will be added sometime in the future although I can’t say for sure or when.

  You could create your own in an image editing program if you wish and I can help you get those into your social menu with CSS.

• 

  eph3dra · Member · Apr 3, 2015 at 10:55 pm

  • Copy link

  Great ! I’ve managed to add the copyright and the social menu :)
  And yes I would really appreciate your help in order to create my own social icon images using CSS

• 

  thesacredpath · Member · Apr 6, 2015 at 5:47 pm

  • Copy link

  Glad you got the copyright and the social menu set up.

  And yes I would really appreciate your help in order to create my own social icon images using CSS

  I’m not seeing the social icons in your Media Library. Have you created those? If you have, you need to go to Media > Add New and upload them and then we can work on getting the CSS you will need.

• 

  eph3dra · Member · Apr 6, 2015 at 8:48 pm

  • Copy link

  That’s them added ! :-)

• 

  thesacredpath · Member · Apr 9, 2015 at 4:49 pm

  • Copy link

  Here you go.
  SoundCloud

  #menu-item-265 a:before {
      color: rgba(0, 0, 0, 0) !important;
      content: url("https://ephedratribal.files.wordpress.com/2015/04/soundcloud-icon.png");
      position: relative;
      top: 10px;
  }
  #menu-item-265 a:hover, #menu-item-265 a {
      color: rgba(0, 0, 0, 0) !important;
      background: none !important;
  }

  8Tracks

  #menu-item-264 a:before {
      color: rgba(0, 0, 0, 0) !important;
      content: url('https://ephedratribal.files.wordpress.com/2015/04/8tracks-icon.png');
      position: relative;
      top: 10px;
  }
  #menu-item-264 a:hover, #menu-item-264 a {
      color: rgba(0, 0, 0, 0) !important;
      background: none !important;
  }

• 

  eph3dra · Member · Apr 13, 2015 at 3:22 pm

  • Copy link

  Thanks ! While I was at it I used the CSS to change the other icons, it looks great appart that a few icons have a shadow hover.
  Is their any way I can put an image as the footer background and/or make the footer area smaller ? (maybe this question should be in an other topic..)

• 

  thesacredpath · Member · Apr 13, 2015 at 8:42 pm

  • Copy link

  To remove those background grey areas, add the following CSS.

  .social-icons li a {
  background: none;
  }

  To add a footer background image, add the following CSS and replace URL_OF_IMAGE between the quote marks with your uploaded image.

  .footer .row {
  background: url("URL_OF_IMAGE") no-repeat scroll 0 0 transparent;
  }

  To reduce the footer height, you can take away some, or all, of the top and bottom padding with the following

  footer-information {
  padding-bottom: 48px;
  padding-top: 48px;
  }

• 

  magusobeiro · Member · Apr 18, 2015 at 5:07 pm

  • Copy link

  That’s perfect ! Can I annoy you with a few other questions ? e.g. How can I change the font to Quicksand ?

• 

  eph3dra · Member · Apr 18, 2015 at 5:10 pm

  • Copy link

  Oups ! Sorry wasn’t using the right profile..
  That’s perfect ! Thanks ! Can I annoy you with a few other questions ? e.g. How can I change the font to Quicksand ?

• 

  thesacredpath · Member · Apr 20, 2015 at 9:45 pm

  • Copy link

  Currently we are limited to the fonts that show up at Appearance > Fonts in the dashboard. Fonts from other sources cannot be added at this time.