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 {font-family: 'Stint Ultra Expanded', cursive;}

• Headers font-size, letter-spacing, text-align, line-height, font-weight, text shadow:

h1 {
font-size: 5em;
letter-spacing: 10px;
text-align: right;
line-height: 1.3em;
font-weight: 200;
text-shadow: 2px 2px #000;
} 

• Footer font:

#footer .main {
font-size: 5em;
letter-spacing: 10px;
text-align: right;
line-height: 1.3em;
font-weight: 200;
}

Parallax height

This parameter is used to compensate the blocks height in relation to the background images height, which are controlled by the built-in script.

Use this script in the Page Inspector > Header > Custom Header field, editing to taste:

<script>parallaxHeight = 1000</script>

Scrolling speed

We can use the local scroll handler when having custom links to Parallaxis elements in the page, customize the scrolling speed as well.

Use in the page's Page Inspector > Header > Custom JavaScript field, editing the value to taste (enter values in milliseconds):

jQ.localScroll({duration: 350});

 

Layout

Use these CSS rules at Page Inspector > Header > Custom CSS field.

Menu width

#nav {min-width: 100% !important}

Extra containers 100% width

#myExtraContent1 {width: 100% !important}

#myExtraContent2 {width: 100% !important}

Menu text align right

#nav {text-align: right !important}

Margins on menu items

#nav a {margin: 10px 10px 10px 10px !important}

Background image on mobile devices

.mobile {
    background-size: round;
    background-position: 50% 50%;
}

Content padding

#content.postshome .post {padding: 0}

Footer padding

#footer {padding: 0}