Need help? Check out our Support site, then


Inserting a custom image to replace title

  1. How do you replace your blogs title with your own custom image? Please help! I want to replace my title with a custom logo I created. If someone knows the code to do this please share!!

    The blog I need help with is wearesoletrain.com.

  2. Hi, this would be the basic code, but adjustments will likely have to be made for the size of the logo. Create and upload your image. The area where the title is can be up to 800px wide and about 100px tall, but the height can be more. Get the URL of that uploaded image, and replace URL_OF_IMAGE between the quote marks with that URL. The go to Appearance > Customize > CSS, delete all the informational text and paste in the following code.

    #site-title {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
    #site-title a, #site-title a:hover {
        color: rgba(0, 0, 0, 0);
        display: block;
    }
  3. How do I make the adjustments? I tried to use this code and put the link of the image in but nothing is showing up on my blog. Am I missing something? Thank you so much for helping me! Sorry I am CSS inept

  4. Can you post the URL of the image you uploaded so I can work with it?

  5. Hi, You are going to have to resize that image and then upload a new copy that is a maximum of 800px wide, as that is the width you have to work with in the theme. The height can be anything you wish, but the existing height is about 180px. Again, that can be adjusted though. I would also suggest cropping it more closely to the image in the center (less white around it). Go to Appearance > Customize > CSS, delete the informational text and paste in the following and replace URL_OF_IMAGE between the quotes with the URL of your new logo. I've included a min height declaration, and you will need to edit that to match the height of your new logo.

    #header {
    	background: url("URL_OF_IMAGE") no-repeat scroll top center;
    	min-height: 250px;
    }
    #site-title a {
    	color: rgba(0, 0, 0, 0);
    	display: block;
    }
    #site-title a:hover {
    	color: rgba(0, 0, 0, 0);
    }

Topic Closed

This topic has been closed to new replies.

About this Topic