Malory Help Documentation
Yet Another Documentation Crafted with ♥ by elemis
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form or item discussions board.
General Styles customization and highlights
Menu
Basic Navigation/Menu Structure:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="current"><a href="index.html"><strong>Single & Current Menu Item</strong></a></li>
<li><a href="#!">Menu Item with Dropdown</a>
<ul class="dropdown-menu">
<li> <a href="#!">Submenu Levels</a>
<ul class="dropdown-menu">
<li><a href="#">Second Level</a></li>
<li> <a href="#!">More</a>
<ul class="dropdown-menu">
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
Retina Images
In order to display a high resolution image on devices with retina display, you need two versions of the image. One with regular size and another with twice its size. The high resolution one should have the exact same name with @2x at the end.
| File Name | Description |
|---|---|
logo.png |
Default logo (e.g.: 100x100px) |
logo@2x.png |
High resolution logo (e.g.: 200x200px) |
Usage:
<img src="#" srcset="style/images/logo.png 1x, style/images/logo@2x.png 2x" alt="" />
Social Icons (Complete List)
The list of all available styled social icons to use in the footer or any other place.
<ul class="social"> <li><a href="#"><i class="icon-s-rss"></i></a></li> <li><a href="#"><i class="icon-s-twitter"></i></a></li> <li><a href="#"><i class="icon-s-facebook"></i></a></li> <li><a href="#"><i class="icon-s-dribbble"></i></a></li> <li><a href="#"><i class="icon-s-pinterest"></i></a></li> <li><a href="#"><i class="icon-s-flickr"></i></a></li> <li><a href="#"><i class="icon-s-vimeo"></i></a></li> <li><a href="#"><i class="icon-s-youtube"></i></a></li> <li><a href="#"><i class="icon-s-skype"></i></a></li> <li><a href="#"><i class="icon-s-tumblr"></i></a></li> <li><a href="#"><i class="icon-s-linkedin"></i></a></li> <li><a href="#"><i class="icon-s-behance"></i></a></li> <li><a href="#"><i class="icon-s-github"></i></a></li> <li><a href="#"><i class="icon-s-delicious"></i></a></li> <li><a href="#"><i class="icon-s-500px"></i></a></li> <li><a href="#"><i class="icon-s-grooveshark"></i></a></li> <li><a href="#"><i class="icon-s-forrst"></i></a></li> <li><a href="#"><i class="icon-s-digg"></i></a></li> <li><a href="#"><i class="icon-s-blogger"></i></a></li> <li><a href="#"><i class="icon-s-klout"></i></a></li> <li><a href="#"><i class="icon-s-dropbox"></i></a></li> <li><a href="#"><i class="icon-s-songkick"></i></a></li> <li><a href="#"><i class="icon-s-posterous"></i></a></li> <li><a href="#"><i class="icon-s-appnet"></i></a></li> <li><a href="#"><i class="icon-s-gplus"></i></a></li> <li><a href="#"><i class="icon-s-stumbleupon"></i></a></li> <li><a href="#"><i class="icon-s-lastfm"></i></a></li> <li><a href="#"><i class="icon-s-spotify"></i></a></li> <li><a href="#"><i class="icon-s-instagram"></i></a></li> <li><a href="#"><i class="icon-s-evernote"></i></a></li> <li><a href="#"><i class="icon-s-paypal"></i></a></li> <li><a href="#"><i class="icon-s-picasa"></i></a></li> <li><a href="#"><i class="icon-s-soundcloud"></i></a></li> </ul>
Color Scheme
There are 9 color options: aqua, blue, brown, green, lime, pink, purple, red and yellow the default being aqua. To change the default color scheme you will have to edit the color css file name in each HTML page.
<link href="style/css/color/aqua.css" rel="stylesheet">
Contact Form
Update contact/vanilla-form.php and point recipients e-mail address by editing TO_EMAIL constant. On to these email address all form inquires/messages will be send.
// If is not empty it sets a header From in e-mail message (sets sender e-mail).
// Note: some hosting servers can block sending e-mails with custom From field in header.
// If so, leave this field as empty.
define('FROM_EMAIL', '');
// Recipient's e-mail. To this e-mail messages will be sent.
// e.g.: john@example.com
// multiple recipients e.g.: john@example.com, andy@example.com
define('TO_EMAIL', 'john@example.com');
<label> <input type="checkbox" name="example" value="true" required="required"> <span><!-- fake checkbox --></span> <span class="wrapped-label">Checkbox Example</span> </label>
Changing Fonts
If you would like to use a different font, copy the font link in Google Fonts page and paste it before closing head tag in your HTML files.
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
Then you need to add the font name to your CSS styles.
body {
font-family: 'Vidaloka', serif;
}
Google Map
Google Map is generated using Google Map Builder.
If you like how the map in the template looks, all you have to do is changing the highlighted values on the right (Latitude,Latitude and address)
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1xdEVYy8IZdBKJGQp_QpDWaNQT7ZHGhY&sensor=false&extension=.js"></script>
<script> google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(51.211215, 3.226287),
zoom: 15,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
scaleControl: true,
scrollwheel: false,
streetViewControl: true,
draggable : true,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{stylers:[{saturation:-100},{gamma:1}]},{elementType:"labels.text.stroke",stylers:[{visibility:"off"}]},{featureType:"poi.business",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"poi.business",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"poi.place_of_worship",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"poi.place_of_worship",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{visibility:"simplified"}]},{featureType:"water",stylers:[{visibility:"on"},{saturation:50},{gamma:0},{hue:"#50a5d1"}]},{featureType:"administrative.neighborhood",elementType:"labels.text.fill",stylers:[{color:"#333333"}]},{featureType:"road.local",elementType:"labels.text",stylers:[{weight:0.5},{color:"#333333"}]},{featureType:"transit.station",elementType:"labels.icon",stylers:[{gamma:1},{saturation:50}]}]
}
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Boudewijn Ostenstraat 2', 51.211215, 3.226287]
];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
icon: 'style/images/map-pin.png',
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
}
}
</script>
Instagram Feed
Due to recent changes in the Instagram API - the process for setting up an instagram feed has become a little trickier, but this guide will help with every step of the way. Essentially you need to create a Client (so Instagram know who you are), and then an access token (the thing that gives your site permission to show images)
Step 1 - Creating A Client
To begin, you will need to visit https://www.instagram.com/developer/, where you will be greeted by the following screen.
Hit the 'Register Your Application' button to continue to the next step. On the next screen (seen below) hit 'Register a New Client'
Next, you need to fill in the form provided - most of it is self-explanatory, the key thing to remember is to enter the following in the Valid Redirect URL field
http://www.tommusrhodus.com/instagram/
Ok, step 1 is done, you now have a client, and more crucially, you now have the Client ID you need for the next part. Copy this Client ID into a notepad, you will need it again soon.
Step 2 - Edit Client
Now you have a client, your going to need to allow it to authorise use of your images. To do this, hit the Edit link to begin editing your clients settings.
Once in the settings, head to the Security tab and Uncheck the Disable Implicit OAuth option and hit save.
Step 3 - Putting It All Together
Remember that Client ID from before? Your going to need it here.
To create the Token needed (to enter into the theme options) you will need to copy this url into whatever text/code editor you wish
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID-HERE&redirect_uri=http://www.tommusrhodus.com/instagram/&response_type=token&scope=public_content
Replace the CLIENT-ID-HERE text with your actual client ID and then copy the whole URL (complete with your own ID) into your browser.
Next, you will be asked to Authorise access, just hit the Authorise button and continue to the final step.
Once done, you will be presented with this screen.
Copy the Token provided as the "accessToken" value in style/js/scripts.js under "INSTAGRAM".
To display your own Instagram shots, you also need your "userId". Once you have an access token, visit the following URL (replacing ACCESS-TOKEN with your own numeric token) and the last parameter on the resulting screen will be your numeric user ID: https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN
Then copy your numeric user ID as "userId"value in style/js/scripts.js under "INSTAGRAM".
Revolution Slider Slider customization and highlights
Slider Elements and Options
You can find detailed information about revolution slider elements and options HERE
Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.