Customization

Google Fonts

Google has a great directory of fonts free to use. Implementing a Google font is quite straightforward: 

1. Choose your font from the Google Fonts site: http://www.google.com/webfonts
2. Embed the related link in the Page Inspector > Header > Custom Header field, example:

 

<link href="http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded" rel="stylesheet" type="text/css">

• Embed the related CSS rule in the Page Inspector > Header > Custom CSS field, example:

 

body {font-family: 'Stint Ultra Expanded', cursive;}

• Fonts can also be applied to headings only, example:

 

h1, h2, h3, h4, h5, h6 {font-family: 'Stint Ultra Expanded', cursive;}

Foundation

Estiasis is based on the Zurb Foundation framework, we may access all Foundation snippets and functions at their websites: http://foundation.zurb.com

In order to use the JavaScript functions add this script at the page's Custom Header:

<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>

And this line at the page's Custom JavaScript field:

jQ(document).foundation();

 

Navigation

The navigation menu background and borders use rgba colours. which are not available as a page style option, so if we wish to change the default settings we have to do it manually for each page:

1. There are many rgba editors and makers online, this is one of a few:

http://www.css3maker.com/css-3-rgba.html

2. Pick your rgba colour and add to Page Inspector > Header > Custom CSS as follows:

.site-nav > ul > li {
    border: 1px solid rgba(255,255,255, 0.2);
    background: rgba(255,255,255, 0.2);
}
.site-nav > ul > li:hover, .site-nav > ul > li.active {
    background-color: rgba(255, 255, 255, 0.6)
}

 

Layout

Use these snippets at the Page Inspector > Header > Custom CSS

Padding to thumbnails at Isotope Album and Page

.thumbnail-frame, .isotope-frame {padding: 10px;} 

Remove borders

.bottom-container, .site-title {border: none}