Thank you for choosing our template. If you have any questions that are beyond the scope of this file, please feel free to contact us.
Please note: for questions on basic HTML, JavaScript or CSS editing - please give your question to Google or visit W3Schools. You will need some HTML/CSS knowledge to edit this template.
SunTour has a fixed layout with up to 12 columns. All the information within the main content area is nested within a div. The general template structure is the same throughout the template as it uses the Bootstrap framework.
If you would like to edit the color, font or style of any element on the site please find the element's class or ID and locate where it is being controlled in main.css.
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.
We're using the following CSS files in this template. Those files also contain some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind that these values might be overridden somewhere else in the files below:
At first glance, the CSS may look confusing, let me explain each below:
Main CSS Files
main.css file contains specific stylings for the page. The file is separated into sections using:
-- GENERAL -- Common Style -- Cws grid addon -- Menu bar -- Logo (in navigation panel) -- Desktop nav -- Search header -- Menu sub -- Menu sub multi -- Mobile menu -- Menu bar -- HEADER -- Site top panel -- Breadcrumbs -- Slider -- LAYOUT -- Bg video -- Button style -- Icon style -- Social icon -- Service item -- Service bg icon -- Half Width services -- Accordion -- Accordion style-2 -- Toggle -- Call Out -- Alert Message -- Counter -- Pricing tabels -- Progress bar -- Tabs -- Profile item -- Hover -- Pagination -- Carousel -- Carousel hover -- Comment list -- Embed video -- Footer -- Blog Item -- Blog box -- Blog data -- Blockquote -- WIDGETS -- Widget Search -- Widget title -- Widget category & archive -- Widget post -- Widget comments -- Widget tags -- Widget Gallery -- Widget Icons -- Widget text -- Widget Recent Post -- Carousel Pagination -- Widget about -- Widget Calendar -- Widget contact form -- CONTENT-PAGE -- Admin info -- Leave reply -- Form subscribe -- Cws parallax -- Partner items -- Portfolio item -- Isotope -- Project details -- Star -- Shop grid -- Action product -- Widget filter-price -- Color filter -- Size filter -- Thumbnails -- Single product -- Checkout -- Product table -- Payment_methods -- Shop-cart -- Map -- Contact address -- Banner section -- Twitter -- Boxed page -- Fix for img
<body class="boxed">Apply the above steps to every HTML page you need.
@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);
.inner-nav ul li > a {
font-family: 'Hind Siliguri', sans-serif;
font-size: 13px;
font-weight: 600;
color: #a9b5c1;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
-moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
-o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
}
Replace font family 'Hind Siliguri' with 'Happy Monkey' in the above code.
$ourMail = "your_email@mail.com";
so, instead of "your_email@mail.com" just input your email address and upload the file to your host. That's all! The contact form, widget and signup page will send all inquiries to your email address.
Now we're ready to go forward and edit the Twitter user ID.
1. First you will need to create a twitter developer account (if you don't have one). Note: this account is not the one you are retrieving status updates (tweets) from.
2. Open http://apps.twitter.com and login with your developer account.
3. Move your mouse to your avatar (the right top corner) and click "My Applications".
4. Click "Create a new application" and enter the necessary information.
5. Once your Application has been created, click on "Create my access token" at the bottom of the "Details" tab.
Please note: there's a nice article showing all the above steps with screenshots: http://bit.ly/1dc3veA. So, it might be helpful if you find the above steps a little complex.
6. Now, when you have all the keys and tokens necessary for using the Twitter plugin, open the "script.js" file (located in the "js" folder) and find the twitter section. You will find a twitter block, which contains the Twitter ID. Just replace the "username:ID" with your twitter ID. Next edit the "php\twitter\index.php" file and edit the "config" section filling in the following fields: $consumer_key, $consumer_secret, $user_token, $user_secret with your own twitter access keys.
Be careful while setting up the above keys and tokens. Wrong values might block the whole script.js file which is used throughout the whole template.
Please don't forget to upload the "index.php" file to your host after you save all changes.All you have to do is to add the map iframe url where you wish.
That's all, your google map is setup and ready to use!
This template imports the following Javascript files. You can get more script info when clicking the appropriate link:
We've included some PSD files to make the re-design process a bit easier.
Please check the PSD folder for all included PSD files.
We've used the following images, icons and other resources as listed.