Palas Template Instructions

All these steps are on Layout page (except the xml install).

1. Install the .xml file
1. Unzip the file received
2. Go to Theme > Backup/Restore > Choose file


3. Upload the .xml named like the theme you bought.
2. Social Media Icons
<div class='social-icons'>
<a href='FACEBOOKLINK' class='facebook-icon' target='_blank'/></a>
<a href='INSTAGRAMLINK' class='instagram-icon' target='_blank'/></a>
<a href='TWITTERLINK' class='twitter-icon' target='_blank'/></a>
<a href='PINTERESTLINK' class='pinterest-icon' target='_blank'/></a>
<a href='TUMBLRLINK' class='tumblr-icon' target='_blank'/></a>
<a href='YOUTUBELINK' class='youtube-icon' target='_blank'/></a>
<a href='mailto:EMAILADDRESS' class='email-icon' target='_blank'/></a>
<a href='RSSFEEDLINK' class='feed-icon' target='_blank'/></a>
<a href='BLOGLOVINLINK' class='bloglovin-icon' target='_blank'/></a>
</div>
Replace the blue text your links. Be careful to not delete any quotation marks.
Tip: Always add the https:// on your links, otherwise they will be broken and your blog will show a "404" (error)  page.
3. Menu
You can add two types of links on your menu:
1. pages
2. external links


Adding a page

Important: You need pages already created before adding any of them on your menu. If you don't have any page yet, go to "Pages" and click on "New page" to create one.
To select your pages on menu, go to Layout, open the menu widget and mark the ones you want to display.



Creating a dropdown

Two levels of dropdown are available and they are created by adding an external link.
For the first level, you have to add one underscore (_) on the link's name. For the second level, you have to add two underscores (__).


Adding a label link

Category labels are added on menu by external link.
You need labels already created to add any of them on your menu. If you don't have any, create a draft post with all the labels you want to add.

The link for label looks like this:
/search/label/Travel

If you want to determine how many posts will be displayed on label page, use this link:
/search/label/Travel?max-results=9
The 9 is free to be changed.

Important: Labels are case sensitive: "travel" is different from "Travel" which is also different from "TRAVEL". Make sure that you are using the correct label.

Adding a blog link

A "blog" link is nice to have when your theme have a custom homepage that not display your most recent posts or have a lot of widgets.
Use this link:
/search?max-results=4
The 4 is free to be changed.
4. Search
Copy and paste the following code on search widget:
<div class='gbml-search'>
<form action='/search' class='search-form' method='get'>
<input class='search-form-field' id='search' name='q' type='text' placeholder='search...' value=''/>
</form>
</div>
5. Slide
To display posts on slide, you can choose some posts using a label or display the most recent posts.

Code to display posts of one specific label:
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-manual-speed="800" data-cycle-pause-on-hover="true" data-cycle-slides="li" data-cycle-swipe="true" data-cycle-timeout="3000">
<script src="/feeds/posts/default/-/special?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev">
</div>
<div class="cycle-next">
</div>
</div>
Replace the blue text with the exactly label name. You can create one label specifically to select the posts displayed on slide. Can be anything like "featured" or "special". Remember: Blogger labels are care sensitive so "fashion" and "Fashion" are two different labels.

Code to display recent posts:
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-manual-speed="800" data-cycle-pause-on-hover="true" data-cycle-slides="li" data-cycle-swipe="true" data-cycle-timeout="3000">
<script src="/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev">
</div>
<div class="cycle-next">
</div>
</div>

Troubleshooting: My slider isn't working.
6. Posts Selected by Label
This is the code:
<script type="text/javascript">
var posts_no = 2;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = false;
var post_summary = false;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
The purple text is the label used for select posts, you can use another of your preference. Remember that the labels are case sensitive: "featured" is different from "Featured" or "FEATURED".
7. About

Replace the photos with yours. Both photos will be automatically cropped in a square (Photo 1) and a 4:3 rectangle (Photo 2).
Please, use the Social Media Icons code from Item 2. As the widget with the text will have html code, edit your 'about me' bio on Edit HTML tab, avoiding the use of the Rich Text tab.
8. Featured Category
This is the code for featured category:
<div class='view-all'>
<a href='/search/label/places/'>view all</a>
</div>
<script type="text/javascript">
var posts_no = 2;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = false;
var post_summary = false;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default/-/places?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
Replace the purple text with the label you prefer. Remember that the labels are case sensitive: "places" is different from "Places" or "PLACES".
9. Youtube Videos
Code for display the 3 latest videos:
<yt-gallery
  channel="UCdWdrpR_tHH4ZAMMgKNyswQ"
  api-key="AIzaSyBDe9U7_g0XupBgQ6mcAaEfxjWuoj0e26o"
  max-results="3"
  resolution="medium"
  icon-size="2"
  item-width="30%"
></yt-gallery
>
Replace the pink text with your Youtube channelID.
Tip: How to find your channelID.
10. Blog Posts

Number of posts recommended to display (because of the homepage design): 4 or multiples of 4.
The post author signature was personalized, so if you want change the "xoxo", it have to be done directly on html code.
11. Pinterest
<script>//<![CDATA[
$.ajax({
dataType: 'jsonp',
type: 'GET',
url: 'https://widgets.pinterest.com/v3/pidgets/users/melodicmondays/pins'
}).done(function(response) {
var pins = response.data.pins;
var html = '';
for (var i = 0; i < 5; i++) {
var description = pins[i].description;
var dominantColor = pins[i].dominant_color;
var imageUrl = pins[i].images['237x'].url;
var url = pins[i].id;
html += '<div class="pinterest-gallery"><a href="https://www.pinterest.com/pin/' + url + '/" target="_blank"><div class="pinterest-thumbnail" style="background-image: url(' + imageUrl + ')"><div class="pinterest-icon"><span><p><i class="fa fa-pinterest"></i></p></span></div></div></a></div>';
}
$('.pinterest').html(html);
}).fail(function() {
console.log('erro');
});
//]]></script>
<div class='pinterest clearfix'></div>
Replace the yellow text with your pinterest username.
12. Archive Widget
13. Contact Form

Copy and paste the following code on your Contact Page (HTML tab):
<div style="text-align: center;">
Send me  a hello :)</div>
<div style="text-align: center;">
Write to</div>
<div style="text-align: center;">
<b><span style="font-size: large;">email@email.com</span></b></div>
<div style="text-align: center;">
or use the form bellow:</div>
<html><br /><head><br /><div class="widget ContactForm" id="custom_ContactForm100">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm100_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /><input class="contact-form-email" id="ContactForm100_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /><textarea class="contact-form-email-message" cols="25" id="ContactForm100_contact-form-email-message" name="email-message" placeholder="Your Message" rows="5"></textarea><br /><input class="contact-form-button contact-form-button-submit" id="ContactForm100_contact-form-submit" type="button" value="Send" /><br /><div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm100_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm100_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</head></html>
You are totally free to change the lilac text.
14. Instagram
<div id='instagram-wrapper' class='clearfix'>
<div id='instafeed' class="instafeed-w clearfix"></div>
<script type='text/javascript'>
//<![CDATA[
var userFeed = new Instafeed({
    userId: "5825919349",
    accessToken: "5825919349.1677ed0.ae766d7574854758bde3fc9f8f5789c8",
    get: "user",
    limit: "6",
    resolution: "standard_resolution",
    template: '<div class="insta-widget" href="{{link}}" target="_blank"><img src="https://4.bp.blogspot.com/-AAm8PY3cXo0/VuhmwWgl8qI/AAAAAAAAWc8/30NCuYaT2B4ssffctToAJIAHL4_mnS9vQ/s1600/187tdf.png"/><a href="{{link}}" target="_blank" style="background-image: url({{image}});"><span class="insta-likes">{{likes}}<i class="fa fa-heart-o" aria-hidden="true"></i></span></a></div>'
});
userFeed.run();
//]]>
</script>
</div>
Replace the blue text (userId) and the orange text (accessToken) with your Instagram’s permission token. Each token is unique for each Instagram user.
To get your token, follow these steps:

1. Access: http://instagram.pixelunion.net/
2. Click: “Generate Access Token”

Your accessToken is the returned code. Your userId is the number before the first dot.
Example:

15. Template Designer
You can change colors and fonts with no need to edit CSS. Go for Theme > Customize > Advanced


Send a message by Etsy or email if you are having troubles with install or if you have other questions (:

Contact Form