Thanks for purchasing tempalte and for supporting my work. Solonick - Creative Responsive Personal Portfolio. This documentation will not teach you HTML & CSS, it's just showcase of custom elements used in template. . Also included in the archive selection page version. It is located in the folder "intro" .
Very important ! In order to work php scripts (contact form)- your site files must reside on the local host or server. In turn, you can easily edit any page (all JavaScript files will work).
All site files are divided into folders:
css folder - css files that are responsible for the style themes.
js folder - javascript files.
php folder - php files.
video folder - video files.
music folder - music files.
images folder - folder that contains all images.
fonts folder - folder that contains fonts plugin "Font-Awesome".
By default, 'Solonick' has a global color - light yellow ( FAC921).To change the color, you must do the following steps:
1. Locate the folder css file color.css and open it with your text editor.
2.In this file, you should find a line responsible for the color theme. Look at the code below.
3. Just replace the six numbers and letters after the lattice in the file "color.css". Forgot to mention the theme color using hex format. If you want to add color format "rgba" then need to remove the lattice. If you do not know where to find the code of the color you click on this link.
@charset "utf-8"; /*-- Color styles --*/ .header-contacts li i , .nav-holder nav li a.act-link , #twitts-container .timePosted a:before , .follow-twiit-button , #twitts-container ul li:before , .sliding-menu a i.act-link , .sliding-menu a:hover , .sliding-menu a:hover i, .submen-dec:before , .footer-contacts li i , .footer-contacts li:hover a , .nav-title:before , .sliding-menu a.back:hover:before , .scroll-nav a:hover , .scroll-nav a.act-scrlink , .section-title h2 span , .section-subtitle span , .inline-facts-wrap i , .sp-arr , .text-carousel .slick-center .text-carousel-item:before, .text-carousel .slick-center .text-carousel-item:after , .listing-rating i , .text-carousel-item a.testim-link:hover , .half-hero-wrap h1 span , .hero-decor-let , .fet_pr-carousel-cat a:hover , .fet_pr-carousel-box-media-zoom , .pin:before , .fsp-filter .filter-title i , .fsp-filter .gallery-filters a:hover , .fsp-filter .gallery-filters a.gallery-filter-active , .all-album , .hd-box-wrap p a:hover , .inline-filter .filter-button i , .load-more i , .parallax-header span , .parallax-header a:hover , .content-nav li a.ln , .content-nav li a.rn , .single-page-fixed-row-link i , .sarr-contr , .details-wrap h3 span , .pr-list li a:hover , .cur-page:hover span , .show-info:hover span , .tooltip-info h5 , .inline-transparent-filter a:hover , .inline-transparent-filter .folio-counter div.all-album , .inline-transparent-filter a.gallery-filter-active , .show-case-slider-wrap-style2 .sarr-contr:hover , .hero-start-link i , .hero-start-link span:before , .single-slider-wrap .sp-cont , .fullscreen-slider-title h3 span , .hero-start-button i , .audiojs .time strong , .audiojs .play:before , .audiojs .pause:before , .playlist-wrap ol li:before , .playlist-wrap ol li.playing a.downbuy-link , .playlist-wrap ol li a.downbuy-link:hover , .playlist-wrap ol li a.audio-link:hover , .playlist-wrap ol li.playing a.audio-link , .album-download-links li a , .custom-form label i , .custom-form .verify-wrap .selectbox , .selectbox li:hover , .contact-list li i , .recomm-price i , .main-about h2 a , .event-header-item i , .buy-ticket-link , .album-cover-datils li i , .process-wrap li .process-details a:hover , .blog-btn i , .widget-wrap .tagcloud li a , .serv-zoom , .hidden-works-item-text ul li a:hover , .hidden-works-item-media-img a , .hidden-works-item.act-index .hidden-works-item-dec , .hidden-info-pagination i , .team-box .team-photo a:hover , .team-single-social li a:hover , .main-about h2 span , .fullscreen-slider-wrap .sp-cont , .fs-carousel-titlecat a , .fs-carousel-link:hover , .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover{ color:#FAC921 } .color-bg , .color-btn , .btn:before , .btn:before ,.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y , .follow-twiit-button span , .share-container .share-icon span , .subcribe-form .subscribe-button , .close-twitter:hover , .nav-button span , .scroller , .show-share , .section-title:before , .promo-link , .close-share:hover , .scroll-nav a.act-scrlink:after , .line-item:before , .custom-inner-header:before , .custom-inner-header i , .custom-skillbar , .pr-title:before , .slick-dots li.slick-active button:before , .order-wrap h3:before , .inline-facts-wrap h6:before , .features-box h3:before , .hero-decor-numb:before , .fet_pr-carousel-box-text h3:before , .fet_pr-carousel-counter:before , .fsp-filter .gallery-filters a:after , .hd-box-wrap h2:before , .inline-filter .gallery-filters a:before , .inline-filter .folio-counter:before , .parallax-text h3:before , .show-case-title h3:before , .accordion a.toggle span , .details-wrap h3:before , .small-color-separator , .audiojs .progress , .volume-control span , .volume-control span.allvolumne , .contact-form-footer p:before , .collage-image:before , .best-price .price-head , .price-link , .album-cover-title h3:before , .video-promo-text h3:before , .fw-post h2:before , .about-widget h5:after , .serv-works-item .hidden-works-item-text h3:before , .main-about h2:before { background:#FAC921 } #twitts-container ul li:hover .timePosted a:after { border-top-color: #FAC921; }
All images are in the folder "images".
To change the background you can simply change the path in the style rendered in html code, for example :
All icons are generated by the plugin "Font-Awesome". List of all the icons can be found here.
To change the icon, you have to copy and paste the code icon at the right place for you. Icons size-five . Read the documentation plugin - it is described in detail how to change the icons size.
For example:
Filters portfolio - To filter worked - class links in the code must conform to the class of the filter element, for example:
In this case, when you click on the link with the class "web" will be displayed elements with class "web"
Find the file "contact_me" in the folder php . In this file, find the line $to_Email = "myemail@gmail.com"; and add you e-mail.
How to forward mail to your mailbox ask your Hosting Service Provider. Because providers use different control panel site and I find it hard to predict what you use. Server side script for sending emails is in "contact_me.php" . Ajax submit is initialized in "scripts.js" file.
// contact form ------------------ $("#contactform").submit(function () { var a = $(this).attr("action"); $("#message").slideUp(750, function () { $("#message").hide(); $("#submit").attr("disabled", "disabled"); $.post(a, { name: $("#name").val(), email: $("#email").val(), phone: $("#phone").val(), subject: $('#subject').val(), comments: $("#comments").val(), verify: $('#verify').val() }, function (a) { document.getElementById("message").innerHTML = a; $("#message").slideDown("slow"); $("#submit").removeAttr("disabled"); if (null != a.match("success")) $("#contactform").slideDown("slow"); }); }); return false; }); $("#contactform input, #contactform textarea").keyup(function() { $("#message").slideUp(1500); });
This template uses Youtube Vimeo and html5 video as background . To add your video in html file find line :
Youtubeadd you video id in data-vid="" if you want add sound change data-mv="1" on data-mv="0"
Html5add you video id in source src="video/1.mp4" type="video/mp4"
VImeoadd you video id in source data-vim="97871257"
And yet the video does not play on smartphones :( - so if a user comes to your site from a mobile browser - the background is replaced by a picture :)
To set up the subscription form, you must perform the following steps :
1. Sign up on mailchimp . It's free.
2. Next, open the Lists --- Signup forms --- Embedded forms
3. Locate the folder js file scripts.js and open it with your text editor.
4.In this file, you should find a code :
//=============== subscribe form ============== // Example MailChimp url: http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx $('#subscribe').ajaxChimp({ language: 'eng', url: 'http://kwst.us9.list-manage1.com/subscribe/post?u=992ebe1f14864e841317ca145&id=163340d9c8' }); // Mailchimp translation // // Defaults: //'submit': 'Submitting...', // 0: 'We have sent you a confirmation email', // 1: 'Please enter a value', // 2: 'An email address must contain a single @', // 3: 'The domain portion of the email address is invalid (the portion after the @: )', // 4: 'The username portion of the email address is invalid (the portion before the @: )', // 5: 'This email address looks fake or invalid. Please enter a real email address' $.ajaxChimp.translations.eng = { 'submit': 'Submitting...', 0: ' We will be in touch soon!', 1: ' You must enter a valid e-mail address.', 2: ' E-mail address is not valid.', 3: ' E-mail address is not valid.', 4: ' E-mail address is not valid.', 5: ' E-mail address is not valid.' }
5.In the form Copy/paste onto your site copy code "http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx" copy of the code and substitute your own values instead "xxx" For example :
$('#subscribe').ajaxChimp({ language: 'eng', url: 'http://kwst.us9.list-manage1.com/subscribe/post?u=992ebe1f14864e841317ca145&id=163340d9c8' });
To configure the plugin in file scripts.js find code :
if ($("#footer-twiit").length > 0) { var config1 = { "profile": {"screenName": 'envatomarket'}, "domId": 'footer-twiit', "maxTweets": 2, "enableLinks": true, "showImages": false }; twitterFetcher.fetch(config1); }
Add your profile name in line in line: "profile": {"screenName": 'envatomarket'} . To add more 2 twitts - change value "maxTweets": 2,
To configure the map in html find code :
And add your own values latitude data-latitude="40.7143528" and longitude data-longitude="-74.0059731" . To find the coordinates - visit this link
Next step you need api key . To find key visit this link . And add your key in each page in code :
Fonts
http://www.google.com/fonts
Images
Shutterstock
http://www.shutterstock.com/
Icons
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
Javascripts
JQuery
http://jquery.com
JQuery Easing
http://gsgd.co.uk/sandbox/jquery/easing/
Owlcarousel
http://www.owlcarousel.owlgraphic.com/
isotope
http://isotope.metafizzy.co/
Lightgallery
http://sachinchoolur.github.io/lightGallery/
Thanks for purchasing template and for supporting my work. If we fail here in this documentation, please e-mail me support@kwst.net. If you have a spare time, please go and rate my template. I will apreciate that.
Thanks