v65:mainNav

<v65:mainNav></v65:mainNav>

Description: This tag displays a nested list of links you have added to the Main Menu in the kiosk page properties.

HTML Source Output:

<div class="v65-mainNav">
    <nav>
         <ul>
    <li class="v65-home"><a class="v65-nav-item" href="https://documentation.vin65.com/"> Home</a></li>
    <li><a class="v65-nav-item" href="Link To Page" class="">About Us</a></li>
    <li><a class="v65-nav-item" href="Link To Page" class="">Contact Us</a></li>
         </ul>
    </nav>
</div>

Base CSS from vin65.css:

.v65-home - use this to hide the automatic home link

.v65-nav-item - use this to style the navigation item

v65:logo

<v65:logo></v65:logo>

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

HTML Source Output:

<h1 class="v65-logo hideText">
    <a href="https://documentation.vin65.com/" accesskey="h"><v65:websiteName></v65:websiteName></a>
</h1>

Customization

The logo upload size can be set under Settings > Website Settings > Content > General > Kiosk Width and Kiosk Height. When clients upload their logo, the field automatically generates two images based on the dimensions set. The dimensions you add will first generate a retina logo; then, they will be half in size and generally 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 being applied, you can target any 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%;
}

v65:mainContent

<v65:mainContent></v65:mainContent>

Description: Outputs the content of the current page.

HTML Source Output:

<p>Aenean mi erat, vehicula nec dapibus sit amet. Pr