RockGroup

HTML Structure

Styles

You can find styles for media player in the mediaplayer.css file
You can find styles for the slider in the responsiveslides.css file
You can find styles for resizing in the responsive.css file (tag <body> hasn't class "boxed")
You can find styles for resizing in the responsiveboxed.css file (tag <body> has class "boxed")
The rest of styles are contained in the style.css file
Fontello icons are contained in the css/fontello folder. To download more icons please visit http://fontello.com/

Scripts

You can find scripts for portfolio in the _gallery.js file
Scripts for the rest of animation elements are inlcuded into the _front.css file
The rest of js files are not recommended to be edited.

Audio

<div class="audio_player">
   <div class="title">Insert Audio Title Here</div>
   <div class="author">by Lily Hunter</div>
   <audio src="song.mp3" width="100%" height="50"></audio>
</div>

Gallery

<ul class="gallery_images">
   <li><img src="images/blog/7.jpg" alt=""></li>
   <li><img src="images/blog/6.jpg" alt=""></li>
   <li><img src="images/blog/8.jpg" alt=""></li>
   <li><img src="images/blog/9.jpg" alt=""></li>
</ul>

Post Example

<section class="main_middle post-anim">
   <div class="post_date">march 27, 2014</div>
   <h2 class="post_title">Quote Format</h2>
   <div class="post_category"><span class="icon icon-tag"></span><a href="">lifestyle</a>, <a href="">world</a></div>
   <div class="quote_icon"><span class="icon icon-quote"></span></div>
   <div class="quote_content">In the End, we will remember not the words of our enemies, but the silence of our friends.</div>
   <div class="quote_author"><img src="images/blog/5.jpg" alt=""></div>
   <div class="quote_author_info">Martin Luther King Jr.<br/>(1929-1968)</div>
   <div class="post_social">
      <ul>
         <li><a href="" class="icon_gmail"></a></li>
         <li><a href="" class="icon_facebook"></a></li>
         <li><a href="" class="icon_twitter"></a></li>
		 ...
      </ul>
   </div>
</section>

Slider

<div class="slider_container">
   <ul class="rslides">
      <li><img src="images/blog/36.jpg" alt="" /></li>
      <li><img src="images/blog/37.jpg" alt="" /></li>
      <li><img src="images/blog/38.jpg" alt="" /></li>
      <li><img src="images/blog/39.jpg" alt="" /></li>
      <li><img src="images/blog/40.jpg" alt="" /></li>
   </ul>
</div>

In the _front.js file, you can change the slider's settings..

jQuery(".rslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 500,             // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});

Skills: Diagram

data-percent - value in percents
data-color - diagram's color
height, width - diagram's dimensions

<div class="diagram_skills resp">
   <div class="title"><span class="number">100%</span>result</div>
   <div id="sk_1" class="sc_skills">
      <canvas id="canvas_sk_1" height="520" width="520" data-percent="25" data-color="#c0c192"></canvas>
      <div class="line">
         <div class="tail"></div>
      </div>
      <div class="item">
         <img src="images/7.png" alt=""><span>100% Responsive</span>
         <div class="content">The fact of prevalence of mobile devices obliges to adjust any actual website to their peculiarity at maximum degree.</div>
      </div>
   </div>
   ...
</div>

Skills: Islands

Each of the elements has its own position that can be changed in the style.css file

<div id="widget_2" class="widget_skills">
   <div class="widget_inner">
      <a href="" id="lw_1" class="skills_row">
         <img src="images/2.png" alt="">
         <div class="name">Css3</div>
      </a>
	  ...
   </div>
</div>

Skills: Rows

data-process - value in percents

<div class="widget_skills">
   <div class="widget_inner">
      <div class="skills_row">
         <span class="value">5474</span>
         <div class="progressbar">
            <div data-process="80%" class="progress">
               <div class="before"></div>
               <div class="after"></div>
            </div>
            <div class="foot"></div>
            <div class="shadow"></div>
         </div>
         <span class="caption">L1</span>
      </div>
	  ...
   </div>
</div>

Team

The Team block has three formats:

<div class="team circle"> - items are designed as circels
<div class="team square"> - items are designed as sqares
<div class="team vertical"> - items are placed vertically

<div class="team square">
   <div class="item">
      <div class="image">
         <img src="images/1.jpg" alt="">
         <div class="overlay">
            <ul class="social">
               <li><a href="#"><span class="icon-facebook"></span></a></li>
               <li><a href="#"><span class="icon-twitter"></span></a></li>
               <li><a href="#"><span class="icon-pinterest"></span></a></li>
            </ul>
         </div>
      </div>
      <div class="content">
         <h4 class="black">Florence Hanson</h4>
         <span>Web designer</span>
      </div>
   </div>
   ...
</div>

Video

data-frame - video's URL

<div class="post_video">
    <div class="video_thumb" data-frame="http://player.vimeo.com/video/105286558"></div>
</div>

Widget Example

<aside class="widget">
   <div class="title">recent posts</div>
   <div class="recent_post">
      <div class="author"><img src="images/9.jpg" alt=""></div>
      <a href="" class="content">
         Aliquam elementum dolor est cursus quam ultri.
         <div class="date">february 24, 2014</div>
      </a>
   </div>
   <div class="recent_post">
      <div class="author"><img src="images/10.jpg" alt=""></div>
      <a href="" class="content">
         Aliquam elementum dolor est cursus quam ultrices luc.
         <div class="date">february 24, 2014</div>
      </a>
   </div>
</aside>

Useful information

Page can be of three formats:

Homepage - tag <body> has class .no-blog . Such page's contents will have maximum width of 1170px.
Blog page without sidebar- tag <body> has class .blog-no-sidebar . Such page's contents will have maximum width of 846px.
Shortcode page - tag <body> has class .blog-sidebar . Such page's contents are divided into two parts, and their maximum width is 1240px.

If you want to set margins for some element, following classes will be helpful:

Class .post-anim allows posts to appear smoothly when scrolling down the page:

<article class="post post-anim">
 ...
</article>

PSD Files

You’ll find PSD folder in our template archive.

Note, that this is our working material and there can be some mismatch with design presented in html / php version. But basically you’ll find lots of styles and graphics to change Increase design or use them on your own.

Sources and Credits

This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.

Fonts:
- sans-serif (standard)
- Lato (non standard)

All non standard fonts are from Google Web Fonts

We have used the pictures from:
http://www.bigstockphoto.com/

All images are copyrighted to their respective owners and not available for download with this theme.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'll be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!

ThemeREX support

Additional information from ThemeREX:

“Theme Rex” support team is happy to welcome you here! Our operators and developers are always glad to help our customers. Should you have any questions, you may contact us for support:

10.00 – 19.00 (CET), Monday till Friday.

What is important to know about ThemeREX Support Policy

To get a pre-purchase advice, you may post in the theme’s forum

To get a response more promptly, you are recommended to use our Ticket-system (just click on banner “Support Sys” on the item page)
Important! For correct work of Ticket-system, you mustn’t switch cookies in your browser off

We try to answer your questions within 5-10 hours. However, if any delay occurs it doesn’t mean that we forgot about you. Some of the issues require testing and analyzing, so that we could help you more profoundly

We love to intercommunicate with our customers from all over the world. We always love to explain how our themes work. However, sometimes we have to say No:

Please, note! We do not support queries if you do not have a purchase code
Item support does not include:

Customization and installation services
Support for third party software and plug-ins

How to find a purchase key (see the screenshot):

open the ‘downloads’ tab in your account on ThemeForest
find our theme in the list of products
click ‘download’ button, and in the drop down menu select “license sertificate & purchase code”