Knowledge Base

Browse through our expansive online help documentation.

Adding a Logo for Kit

Kit has the ability for you to add your own logo in the header and footer to give your site a more customized look and feel.

Adding a Logo Image

To add a new logo, follow these instructions.

  1. Select the image from your PC that you want to display as your logo and resize it, if necessary.
  2. Copy the logo image to the assets/images folder.
    • If you’re testing the template locally on your PC, then simply copy the image.
    • If you’ve already uploaded the template to your host’s server, then FTP the image into the assets/images folder.
  3. Open the style.css file in a code editor and perform a search for ../images/logo.svg within the file.
  4. Change the image file name to the file name of your logo image.
    • You will need to change this in four separate places: the header and footer for the regular and retina displays. For more information, refer to the code example.
  5. Repeat step 4 as needed.
  6. Save the file and view the updates on your PC.
    • If you’re testing locally, simply drag the index.html file into an empty tab of your favorite internet browser.
    • If you’ve already uploaded the template to your host’s server, then FTP the updated index.html file, and then view it in your browser

Here is the code which you need to modify to add a new logo image in the header:

.logo {
    background-image: url("../images/logo.svg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 50px 50px;
    height: 50px;
    margin-top: 8%;
}

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
.logo { background-image: url("../images/logo.svg"); background-size: 50px 50px; }
}

Here is the code to change the logo in the footer:

.footer {
background-image: url("../images/logo.svg"); background-repeat: no-repeat; background-position: right top; background-size: 38px 33px; height: 33px; margin-bottom: 10em; font-size: 1em; color: #514f4e; } @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { .footer { background-image: url("../images/logo.svg"); background-size: 38px 33px; }
}