In the previous tutorial, we used a setting in the Rainmaker appearance area to upload a logo to the header of our theme. The downside is that the header area has a set width and height, and if your image is larger than that, you will be prompted to crop your logo.

Fortunately there is another way to add a custom logo without needing to use the appearance options. In this tutorial, I will show you how to add a custom logo to your website using some CSS code.

Video Instructions – click play below

Text instructions

To add a custom logo to our Rainmaker theme, we are going to add a snippet of CSS code to the ‘Custom CSS’ area and then replace a few portions of text in the code with the logo image and the images dimensions.

Follow the text instructions below.

1. Before we add the code, we need to remove the image from the ‘Appearance’ area. Navigate to ‘Design’ –> ‘Appearance’ –> ‘Header Image’ and click ‘Hide Image’ to remove the image from view. Click ‘Save and Publish’ once done.

2. We can now add the CSS code to our site. Copy the snippet of code below and add the code to the ‘Design’ –> ‘Custom CSS’ area.

3. In the code above there are three stings of text we need to replace – the ‘imageURL’ needs to be replaced with the URL of our header image and the instances of HHHpx and WWWpx need to be replaced with the images dimensions.

Open a new tab in your browser. Hover over the ‘Edit’ link in the blue admin bar and click ‘Media’. This will take us to the area where the header image was uploaded to when you added it to the ‘Header Image’ section.

In the media library, you will see two versions of your image. When you uploaded the image to the ‘Header Image’ area, a cropped version of the image was created. The image we need to use in our code is the original image that was uploaded. To know which version is the original, click on the list icon in the top left of the media grid. This will show the media as a list.

4. In the list of media, click the logo that does not have ‘cropped’ prepended to it. This will take you to a screen of settings for the logo.

Click anywhere in the ‘File URL’ field and copy the URL.

5. Navigate back to the Custom CSS area and replace ‘imageURL’ with the URL that you copied in the step above.

6. Next, copy the width and height of our image and replace the two instances of WWWpx and the one instance of HHHpx.

7. Save the CSS code. If this is the first time you are adding CSS code to this area, I recommend to save it twice just to be sure!

Go to your home page and refresh the page. If the logo does not appear, make sure to clear your browser cache. If you have a live Rainmaker website, also click the ‘Clear Cache’ link in the blue admin bar.