Rhye

# Uploading Logo

The template supports dual versions of the logotype to maintain a good contrast ratio depending on the conditions where it appears:

  • The Primary logo version is used for places with light backgrounds.
  • The Secondary logo version is used for places with dark backgrounds.

# Markup: Graphic Version

For the best appearance, it's recommended to use the .svg format for the logo. Feel free to use any other image format appropriate for the web, such as .jpg, .png, or .gif.

<a class="logo" href="index.html" target="_blank">
  <div class="logo__wrapper-img">
    <!-- Primary logo version (for light backgrounds) -->
    <img class="logo__img-primary" src="img/general/logo-black.svg" alt="Rhye HTML5 Template" height="20"/>
    <!-- Secondary logo version (for dark backgrounds) -->
    <img class="logo__img-secondary" src="img/general/logo-white.svg" alt="Rhye HTML5 Template" height="20"/>
  </div>
</a>

# Markup: Text Version

Don't have your own brand logo yet? No worries – just use the text logo version. It supports a title and tagline, which you can use to briefly describe yourself or your company.

<a class="logo" href="index.html" target="_blank">
  <div class="logo__text">
    <span class="logo__text-title">Rhye Kinsey</span>
    <span class="logo__text-tagline">Wedding Photographer</span>
  </div>
</a>

# Adjusting Logo Height

The template doesn't set any dimensions for the site logo. It's assumed that you will do this via attributes: width, height, and viewBox in your SVG file. If you inspect the SVG source of the original logo file HTML/img/general/logo-black.svg, you'll see that its dimensions are set inline here:

<svg width="69px" height="23px" viewBox="0 0 69 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  ...
</svg>

Alternatively, you can set the logo width or height using CSS:

.logo__wrapper-img img {
  height: 80px;
}

# Appearance in Header

Since the header supports a sticky effect with a changeable background on scrolling, you may define which logo version to appear in the normal header state using data-arts-header-logo="secondary" and when the header becomes sticky using data-arts-header-sticky-logo="primary".

<header
  class="header header_menu-right js-header-sticky header_fixed container-fluid bg-white header_sticky"
  id="page-header"
  data-arts-theme-text="dark"
  data-arts-header-sticky-theme="bg-white"
  data-arts-header-logo="secondary"
  data-arts-header-sticky-logo="primary"
  data-arts-header-overlay-theme="light"
  data-arts-header-overlay-background="#ffffff"
>
  ...
</header>

For the footer, use the data-arts-footer-logo="primary" attribute.

<footer
  class="footer container-fluid" 
  id="page-footer" 
  data-arts-theme-text="dark" 
  data-arts-footer-logo="primary"
>
  ...
</footer>

TIP

The dark and light appearance rules may differ from page to page depending on the visual conditions where the logo appears. For example, you may want to use the light version of your logo on dark pages to maintain a good contrast ratio.

For the best results, make sure to check all the pages' headers and footers and adjust the logo appearance rules as needed.

← Generating Favicon →