RS Card

Version 1.1.0

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?

Features

 

HTML Structure

Theme contains 12 html files.
 
Home Page:
      index.html
 
Blog Page:
      category.html
 
Blog Post Pages:
      single.html
      single-image.html
      single-slider.html
      single-audio.html
      single-video.html
      single-vimeo.html
      single-youtube.html
      single-dailymotion.html
 
Typography Page:
      typography.html
 
Error Page:
     404.html

CSS Files and Structure

<!-- 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)
 
(1)-(4) There are styles used from javascript plugins, for more details look "JavaScript" section.
 
(6) There are styles for theme color, for more details look "Theme Colors" section.
 
(7) General styles for whole theme are in the style.css, if you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
 
/**
 * 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
 */

 

Theme Fonts

Web Fonts
<!-- 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">
 
In the theme there are used two Google Web Fonts Open Sans ans Fredoka One.
 
Icon Fonts
<!-- 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)
 
(1) - Map icons provided over 175+ icons that we have included in our theme and you can easly use theme. Map Icons can be mostly useful for "My Interests" section. Just use following html markup:
<i class="map-icon map-icon-[name]"></i>.
For example:
<i class="map-icon map-icon-abseiling"></i>
<i class="map-icon map-icon-motobike-trail"></i>
 
(2) - We have included some icons form icomoon.io too. If you want to use icons that we haven't provided, you can add as much icons as you want. (4000+ icons/your own from vector files)
 
NOTE: upload "selection.json" form our  "fonts/icomoon" folder in icomoon.io site, add new icons than download and replace icomoon font.

Theme Colors

Our template goes with an ability to change template color. We provide 19 predefined colors.
 
Cahnge Theme Color
 
To change theme color using existig color add appropriate class (theme-color-33d685)  on <html>  tag and link to appropriate external style sheet ( green.css ).
<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
 
Use Custom Color
 
If you want to use your custom theme color, then do following steps:
  1. Choose your color in HEX format (for example  #98002b)
  2. Create new css file in colors folder ( for example cherry.css )
  3. Copy following css in you created file
    .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];
}
  4.  Replace all [custom-color]-s with your choosed color without hex simbol ( i.e. 98002b )
  5. Add color class to <html> tag : <html class="theme-color-98002b">
  6. Link to created external style sheet :  <link rel="stylesheet" type="text/css" href="colors/cherry.css">
Change Skin 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">

JavaScript

Libs:

  1. jquery -  is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com
  2. modernizer - respond to user’s browser features. For more information, please visit https://modernizr.com
  3. html5shiv - enables use of HTML5 sectioning elements in legacy Internet Explorer6-9. For more information, please visit https://github.com/afarkas/html5shiv
  4. respond - fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). For more information, please visit https://github.com/scottjehl/Respond

Plugins:

  1. bxslider - responsive slider plugin.  For more information visit http://bxslider.com/
  2. customscroll - custom content scroller plugin. For more information visit http://manos.malihu.gr/jquery-custom-content-scroller/
  3. fancybox - plugin for displaying images, html content and multi-media in a "lightbox". For more information visit http://fancyapps.com/fancybox/
  4. mediaelement - video and audio player plugin. For more information visit http://mediaelementjs.com/
  5. imagesloaded - plugin detect when images have been loaded. For more information visit  http://imagesloaded.desandro.com/
  6. mousewheel - plugin adds cross-browser mouse wheel support. For more information visit https://github.com/jquery/jquery-mousewheel
  7. isotope - plugin for intelligent and dynamic layouts that can't be achieved with CSS alone. For more information visit http://isotope.metafizzy.co/
  8. appeare -  plugin for tracking element's appearance in browser viewport. For more information visit https://github.com/morr/jquery.appear/

Google Map :

  1. google maps api - provide methods and tools that can be used for customize maps, and the information on maps. For more information visit https://developers.google.com/maps/
  2. map icons - an icon font for use with google maps api. For more information visit http://map-icons.com/

All custom js code is located in site.js.

 

Wordpress Ready

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

Contact Form

To receive emails set your email in the file /php/contact_form.php

$emailTo = "email@sitename.com"; // Enter your email for feedbacks here

Portfolio

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>

Calendar

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)

    ];

404 page

A 404 page is what a user sees when they try to reach a non-existent page on your site (because they've clicked on a broken link, the page has been deleted, or they've mistyped a URL).
 
To set up 404.html page on your server add this to the .htaccess file:
 
ErrorDocument 404 http://www.domain.com/404page.html
 
Thats it !
 
For more detailed instructions please look following article:
http://www.htmlgoodies.com/beyond/reference/article.php/3472591/How-Do-I-Create-a-Custom-404-Error-Page.htm
 

Sources and Credits

 

Images

 
 
 
                                          
 

Fonts

 
In the theme there are used two Google Web Fonts Open Sans ans Fredoka One.

How to rate

Go to Themeforest and follow the image instructions