Google Fonts
Google has a great directory of fonts free to use. Implementing a Google font is quite straightforward:
- Choose your font from the Google Fonts site: http://www.google.com/webfonts
- 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}
Comments
0 comments
Article is closed for comments.