How to Add Your Own Logo to the inLine Theme

By Thomas Griffin|inLine Tutorials|Be the first to comment!

In this tutorial, we will learn how to add in your own custom logo to the inLine theme. Follow the instructions below:

1. Make sure you have created a child theme. You can get instructions and the sample child theme here.
2. Title your logo “logo.png” and place it in the images folder of your child theme.
3. Add the following code to your child theme’s style.css file:

   #logo { text-indent: -9999px; width: 121px; height: 26px; background: url('images/logo.png') no-repeat scroll 0 0; }
   #logo a { display: block; outline: none; width: 121px; height: 26px; }

4. Save your style.css file and reload your site! Your logo will now appear in place of the text.

Change the width and height of the above to the width and height of your own logo. You may need to adjust the padding in the navigation menu based on the height of your logo to get everything aligned correctly. You could place the following in your style.css file as well:

#navigation .menu li a { padding-bottom: 30px; }

Just change the padding at the bottom so that it will align the with bottom of the header. Enjoy!