# Uploading Logo
The template supports the dual version of the logotype to maintain a good contrast ratio depending on the conditions where it appears:
- Primary logo version is used for the places with light backgrounds.
- Secondary logo version is used for the places with dark backgrounds.
# Markup: Graphic Version
For the best appearance it's recommended to use .svg
format for the logo. Also feel free to any other image format appropriate for the web, e.g. .jpg
, .png
, .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 text logo version. It supports title and tagline which you can use it to shortly 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 supposed that you will do it via attributes: width
, height
, viewBox
in your SVG file. If you inspect 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 from CSS:
.logo__wrapper-img img {
height: 80px;
}
# Appearance in Header
Since the header supports sticky effect with changable background on scrolling, you may define which logo version to appear in the normal header state data-arts-header-logo="secondary"
and when the header becomes sticky 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>
# Appearance in Footer
For the footer use 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 & light appearance rules may differ from page to page depending on the visual conditions where the logo appear. For example, you may want to appear the light version of your logo on the dark pages to maintain good contrast ratio.
For the best results make sure to check all the pages header & footer and adjust logo appearance rules as you need.