1. Start - Files
  2. Color
  3. Images
  4. Icons
  5. Portfolio
  6. Contact form
  7. Video background
  8. Subscribe mailchimp
  9. Share
  10. Twitter
  11. Map
  12. Sources & Credits
  13. Updates
  14. Thanks

Solonick -

Creative Responsive Personal Portfolio


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).



Files



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".

Colors

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;
}

Images


All images are in the folder "images".


How to add and change the background image

To change the background you can simply change the path in the style rendered in html code, for example :

 

Icons


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:


                            

 

Portfolio


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"

Contact Form


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);
    });

Video


This template uses Youtube Vimeo and html5 video as background . To add your video in html file find line :

Youtube
 

add you video id in data-vid="" if you want add sound change data-mv="1" on data-mv="0"

Html5
                                        

add you video id in source src="video/1.mp4" type="video/mp4"

VImeo
  

add 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 :)

Subscribe mailchimp


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'
    });

Share your pages


To configure the plugin open file scripts.js and find line :

 		
    $(".share-container").share({
        networks: ['facebook', 'pinterest', 'googleplus', 'twitter', 'linkedin']
    });

You can simply add a comma in line: social: 'facebook','pinterest','googleplus','twitter','linkedin' 'foursquare' , 'flickr', 'digg' , 'tumblr', 'vimeo' , 'stumbleupon' separated names of social networks .

Twitter


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,

Map


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 :


Sources & Credits


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/

Updates


Thanks


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