Thank you for purchasing our HTML Template! We hope that you will find all answers to your questions in this Documentation regarding RScard HTML Template. However, if you still need support, please, go to Themeforest profile and use the form to send a message.
We will answer every doubt within our reach.
We will appreciate, if you find a few seconds and rate our template. Many thanks!
Don't know how to rate?
<!-- Styles --> <link rel="stylesheet" type="text/css" href="js/plugins/jquery.bxslider/jquery.bxslider.css"> (1) <link rel="stylesheet" type="text/css" href="js/plugins/jquery.customscroll/jquery.mCustomScrollbar.min.css"> (2) <link rel="stylesheet" type="text/css" href="js/plugins/jquery.mediaelement/mediaelementplayer.min.css"> (3) <link rel="stylesheet" type="text/css" href="js/plugins/jquery.fancybox/jquery.fancybox.css"> (4) <link rel="stylesheet" type="text/css" href="style.css"> (5) <link rel="stylesheet" type="text/css" href="colors/[color].css "> (6)
/** * Table of Contents: * * 1.0 - Reset * 2.0 - General * 2.1 - Typography * 2.2 - Elements * 2.3 - Helper Classes * 2.4 - Icons * 3.0 - Form * 4.0 - Grid * 5.0 - WP Editor * 5.1 - Alignments * 5.2 - Caption * 5.3 - Galleries * 6.0 - Components * 6.1 - Buttons * 6.2 - Ripple * 6.3 - Social * 6.4 - Pagination * 6.5 - Custom Scroll * 6.6 - Video & Audio Player * 6.7 - Scroll Animations * 7.0 - Containers * 8.0 - Preloader/Overlay * 9.0 - Header * 9.1 - Logo * 9.2 - Navigation * 9.3 - Mobile Navigation * 9.4 - Header With BgImage * 9.5 - Header Sticky * 10.0 - Sidebar * 10.1 - Sidebar Fixed * 10.2 - Widgets * 11.0 - Home * 11.1 - Section About * 11.2 - Section Skills * 11.3 - Section Interests * 11.4 - Section Portfolio * 11.5 - Section Timeline * 11.6 - Section References * 11.7 - Section Calendar * 11.8 - Section Contact * 12.0 - Blog * 12.1 - Blog General * 12.2 - Blog Post Box * 12.3 - Post Page * 12.4 - Post Comments * 13.0 - Error Page * 14.0 - Footer * 15.0 - Theme dark * 16.0 - Old Browsers */
<!-- Google Fonts --> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fredoka+One"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic">
<!-- Icon Fonts --> <link rel="stylesheet" type="text/css" href="fonts/map-icons/css/map-icons.min.css"> (1) <link rel="stylesheet" type="text/css" href="fonts/icomoon/style.css"> (2)
<i class="map-icon map-icon-[name]"></i>.
<i class="map-icon map-icon-abseiling"></i> <i class="map-icon map-icon-motobike-trail"></i>
<html lang="en" class="theme-color-33d685"> <head> ... <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="colors/green.css"> </head> ... </html>
THEME COLORS TABLE
Color | HEX format | CSS File | Color Class |
Red | #e51c23 | red.css | theme-color-e51c23 |
Pink | #e91e63 | pink.css | theme-color-e91e63 |
Purple | #9c27b0 | purple.css | theme-color-9c27b0 |
Deep Purple | #673ab7 | deep-purple.css | theme-color-673ab7 |
Indigo | #3f51b5 | indigo.css | theme-color-3f51b5 |
Blue | #2196f3 | blue.css | theme-color-2196f3 |
Light Blue | #03a9f4 | light-blue.css | theme-color-03a9f4 |
Cyan | #00bcd4 | cyan.css | theme-color-00bcd4 |
Teal | #009688 | teal.css | theme-color-009688 |
Green | #33d685 | green.css | theme-color-33d685 |
Light Green | #8bc34a | light-green.css | theme-color-8bc34a |
Lime | #cddc39 | lime.css | theme-color-cddc39 |
Yellow | #ffeb3b | yellow.css | theme-color-ffeb3b |
Amber | #ffc107 | amber.css | theme-color-ffc107 |
Orange | #ff9800 | orange.css | theme-color-ff9800 |
Deep Orange | #ff5722 | deep-orange.css | theme-color-ff5722 |
Brown | #795548 | brown.css | theme-color-795548 |
Grey | #9e9e9e | grey.css | theme-color-9e9e9e |
Blue Grey | #607d8b | blue-grey.css | theme-color-607d8b |
.theme-color-[custom-color] a, .theme-color-[custom-color] blockquote:before, .theme-color-[custom-color] .contact-map .contact-info a:hover, .theme-color-[custom-color] .interests-list i, .theme-color-[custom-color] .input-field.used label, .theme-color-[custom-color] .logo span, .theme-color-[custom-color] #map .map-icon, .theme-color-[custom-color] .nav-wrap .btn-mobile-nav, .theme-color-[custom-color] .page-404 h2 span, .theme-color-[custom-color] .post-box .post-title a:hover, .theme-color-[custom-color] .post-single .post-title a:hover, .theme-color-[custom-color] .post-comments .section-title, .theme-color-[custom-color] .ref-box .person-speech:before, .theme-color-[custom-color] .timeline-box .date, .theme-color-[custom-color] .widget-title, .theme-color-[custom-color] .widget_meta ul li a:hover, .theme-color-[custom-color] .widget_archive ul li a:hover, .theme-color-[custom-color] .widget_nav_menu ul li a:hover, .theme-color-[custom-color] .widget_categories ul li a:hover, .theme-color-[custom-color] .widget_recent_entries ul li a:hover, .theme-color-[custom-color] .widget_recent_comments ul li a:hover, .theme-color-[custom-color] .widget_search .search-form:before, .theme-color-[custom-color] .widget-popuplar-posts .post-title a:hover, .theme-color-[custom-color] .widget-recent-posts .post-title a:hover { color: #[custom-color]; } .theme-color-[custom-color] ins, .theme-color-[custom-color] mark, .theme-color-[custom-color] .btn-primary, .theme-color-[custom-color] .btn-primary-outer, .theme-color-[custom-color] .btn-sidebar-close, .theme-color-[custom-color] .calendar-busy .calendar-body td .current-day, .theme-color-[custom-color] .calendar-busy .calendar-today .date, .theme-color-[custom-color] .filter .active:after, .theme-color-[custom-color] .filter-bar .filter-bar-line, .theme-color-[custom-color] .input-field .line:before, .theme-color-[custom-color] .input-field .line:after, .theme-color-[custom-color] .mobile-nav, .theme-color-[custom-color] .nav > ul > li > a > span, .theme-color-[custom-color] .post-datetime, .theme-color-[custom-color] .profile-social, .theme-color-[custom-color] .profile-preword span, .theme-color-[custom-color] .progress-bar .bar-fill, .theme-color-[custom-color] .progress-bar .bar-line:after, .theme-color-[custom-color] .price-box.box-primary .btn, .theme-color-[custom-color] .price-box.box-primary .price-box-top, .theme-color-[custom-color] .profile-list .button, .theme-color-[custom-color] .pagination .page-numbers.current, .theme-color-[custom-color] .pagination .page-numbers.current:hover, .theme-color-[custom-color] .pagination .page-numbers:active, .theme-color-[custom-color] .pagination .page-numbers.next:active, .theme-color-[custom-color] .pagination .page-numbers.prev:active, .theme-color-[custom-color] .timeline-bar, .theme-color-[custom-color] .timeline-box .dot, .theme-color-[custom-color] .timeline-box-compact .date span, .theme-color-[custom-color] .widget_tag_cloud a:hover { background-color: #[custom-color]; } .theme-color-[custom-color] .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current, .theme-color-[custom-color] .mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: #[custom-color]; } .theme-color-[custom-color] .timeline-box-inner, .theme-color-[custom-color] .price-box.box-primary .btn, .theme-color-[custom-color] .widget_search .search-form, .theme-color-[custom-color] .widget_tag_cloud a:hover { border-color: #[custom-color]; } .theme-color-[custom-color] .page-404 h2 span:before, .theme-color-[custom-color] .profile-preword span:before, .theme-color-[custom-color] .timeline-box-compact .date span:before { border-left-color: #[custom-color]; } .theme-color-[custom-color] .price-box.box-primary .price-box-top:before { border-top-color: #[custom-color]; }
Theme has dark and light skins. To use light skin just add "theme-skin-light" class to the <html> tag, for dark version add "theme-skin-dark".
<html class="theme-skin-light">...</html> <html class="theme-skin-dark">...</html>
So if you want to use the light skin with color scheme then use in the body these clases:
<html class="theme-color-33d685 theme-skin-light">
Libs:
Plugins:
Google Map :
All custom js code is located in site.js.
Our theme is ready for Wordpress theme creation.
We provide css styles for Wordpress editor ( thypography.html ) and all default Wordpress widgets (some of them you can find in sidebar).
To receive emails set your email in the file /php/contact_form.php
$emailTo = "email@sitename.com"; // Enter your email for feedbacks here
Each portfolio item should have following html structure:
<div class="grid-item [size] [category]"> <div class="grid-box"> <figure class="portfolio-figure"> <img src="http://image_url" alt=""/> <figcaption class="portfolio-caption"> <div class="portfolio-caption-inner"> <h3 class="portfolio-title">Project Title</h3> <h4 class="portfolio-cat">Project Category</h4> <div class="btn-group"> <a class="btn-link" href="http://project_url" target="_blank"><i class="icon icon-link"></i></a> <a class="portfolioFancybox btn-zoom" data-fancybox-group="portfolioFancybox[number]" href="#portfolio[number]-inline1"><i class="icon icon-eye"></i></a> <a class="portfolioFancybox hidden" data-fancybox-group="portfolioFancybox[number]" href="#portfolio[number]-inline2"></a> <a class="portfolioFancybox hidden" data-fancybox-group="portfolioFancybox[number]" href="#portfolio[number]-inline3"></a> </div> </div> </figcaption> </figure> <!-- Start: Portfolio Inline Boxes --> <div id="portfolio[number]-inline1" class="fancybox-inline-box"> [popup content] </div> <div id="portfolio[number]-inline2" class="fancybox-inline-box"> [popup content] </div> <div id="portfolio[number]-inline3" class="fancybox-inline-box"> [popup content] </div> <!-- End: Portfolio Inline Boxes --> </div> </div><!-- .grid-item -->
[size] - we have two predefined sizes for portfolio items, large and small. For large items use size22 class, for small ones use size11 class.
[category] - portfolio category, used for filtering. You can provide more than one class for filtering, for example photography, nature ...
[number] - each portfolio should have uniq number
[popup content] - in general can be any html content, we provide media + title + text. For media you can use image, custom video, iframe (youtube, vimeo, dailymotion ...).
For ajax loading (when click '+' button) add portfolio items in /ajax/portfolio.html file.
Portfolio Content should have following html structure:
<div id="ID" class="fancybox-inline-box"> <div class="inline-embed" ... >...</div> <div class="inline-cont"> <h2 class="inline-title">Title</h2> <div class="inline-text">Content</div> </div> </div>
We use <div class="inline-embed"></div> element to insert different media (image, iframe, custom video) into popup
<!-- Image --> <div class="inline-embed" data-embed-type="image" data-embed-url="image.jpg"></div> <!-- Vimeo --> <div class="inline-embed" data-embed-type="iframe" data-embed-url="https://player.vimeo.com/video/118244244"></div> <!-- Dailymotion --> <div class="inline-embed" data-embed-type="iframe" data-embed-url="https://www.dailymotion.com/embed/video/x314rdy"></div> <!-- Youtube --> <div class="inline-embed" data-embed-type="iframe" data-embed-url="https://www.youtube.com/embed/mZb_gat5YCY"></div> <!-- Custom Video --> <div class="inline-embed" data-embed-type="video"> <video width="100%" height="100%" poster="img/uploads/media/echo-hereweare.jpg" controls="controls" preload="none"> <source type="video/mp4" src="video_url.mp4" /> <source type="video/webm" src="video_url.webm" /> <source type="video/ogg" src="video_url.ogv" /> </video> </div>
By default calendar week starts on Sunday.
To start calendar week on Monday just add data-weekstart="monday" attrbute:
<div class="calendar-busy" data-weekstart="monday"> ... </div>
To add your busy days in calendar go to /js/site.js line 13 and add your busy days with following format:
var calendarBusyDays = [ new Date(2015, 8, 10), new Date(2015, 8, 8), new Date(2015, 8, 30), new Date(2015, 9, 3), new Date(2015, 9, 13), new Date(2015, 9, 29), new Date(2015, 10, 5), new Date(2015, 10, 18), new Date(2015, 10, 25), new Date(2015, 11, 3), new Date(2015, 11, 15), new Date(2015, 11, 28), new Date(2015, 11, 29), new Date(2015, 11, 30), new Date(2015, 11, 31) ];