v65:logo

<v65:logo></v65:logo>

Description: Uses the image uploaded under Settings > Website Editor > Header & Footer > Logo. 

HTML Source Output:

<div class="v65-logo hideText">
    <a href="/" accesskey="h"><v65:websiteName></v65:websiteName> Home</a>
</div>

Customization

The logo upload size can be set under Settings > Website Settings > Content > General > Website Width and Website Height. When clients are uploading their logo, the field will automatically generate two images based off of the dimensions set. The dimensions you add will first generate a retina logo, then they will half in size and general a default logo for normal displays. 

For example: if you want your image to show on all retina and normal displays at 300px x 200px, please set the image dimensions to 600px x 400px.

Base CSS

While you cannot directly edit the following CSS that's being applied, you can target any of the following classes and make updates through your own CSS files.

.v65-logo {
   background-image: URL HERE;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   height: HEIGHT SET;
   position: relative;
   width: WIDTH SET;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
   .v65-logo {
      background-image: RETINA URL HERE;
   }
}

@media screen and (max-width: 33.75em) {
   .v65-logo {
      margin: 5em auto 2em;
      min-height: auto;
      width: 100%;
   }
}

.hideText {
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
}

.hideText a {
   display: block;
   height: 100%;
}