1. Start
  2. How to change intro slider?
  3. How to change the logo?
  4. How to change menu?
  5. How to switch headers?
  6. How to change tag lines?
  7. How to add/manage portfolio?
  8. How to use shortcodes?
  9. How to change the color scheme?
  10. How to change the scheme layout?
  11. How to setup contact form?
  12. How to setup twitter?
  13. How to setup flickr?
  14. Source files included
  15. Credits

Galaxy Responsive HTML5&CSS3 Website Template


Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to my support forum. Also you can find a lot of useful information right there. Thanks so much!

How to change intro slider?

In order to edit intro slider images and text you should first of all open index.html

The actual slider is starting from the line 146.

To change image slides for the first slide edit lines: 148, 158, 168. In the same way edit image slider for other slides.

In case you want for example edit effects for the first slide, then you should edit this values starting from the line 148.

data-x="372"
data-y="232"
data-endeasing="easeInOutBack"
data-endspeed="1000"
data-end="6500"
data-easing="easeInOutBack"
data-start="800"
data-speed="1000">

For more information in regards to the Revolution Slider, please read the documentation which is included in the template package.

How to switch Tag lines ?


In additiona to the different headers this theme is provided with the different Tag Lines above header that you can change in index.html file.
line 43.

In order to do this you need simply add class="tag_type1"

So it will look like this <section class="head_type0"> or <section class=""> is a default header. Default tag_type0 goes without tag lines.

<section class="head_type1">

<section class="head_type2">

<section class="head_type3">

<section class="head_type4">

How to add/manage portfolio?


There are 4 portfolio pages come with this template:

Let's take a look at 1 Column Portfolio, please open portfolio1.html file and go to line 164:

<div data-category="portraits" class="accounting element row-fluid">
<div class="filter_img span6">
<a href="portfolio_post.html">
<img src="img/portfolio/portfolio1-1.jpg" alt="" width="558" height="363">
</a>
</div>
<div class="portfolio_dscr span6">
<h5><a href="portfolio_post.html">Lorem Ipsum DOlor</a></h5>
<p>Vestibulum eget consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut euismod aliquet enim, nec semper mi posuere nec lors nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis aclorem arcuege. tristique viverra. Morbi nec suscipit lacust rhoncus in aliquet ornare vivamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ante in massa dapibus blandit. Aliquam vestibulum pellentesque semper. Nullam vitae ligula at ipsum mollis auctor. Donec vulputate congue scelerisque. Donec purus orci, varius nec tincidunt eu, rutrum eu ligula. Etiam imperdiet condimentum tempus. Vivamus tincidunt sem et erat tristique porta. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla stibulum justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets porttitor. Aliquam nusl ultricien ullamcorper erat eget tempor eget mauris vulputate diam quis. augue tincidunt rhoncus in aliquet ornare malesuada.
Vivamus tulvinar sapien id tellus sagittis posuere sed placerat ligula aliquam eu nam sapien eros enatis. In hac habitasse platea dictumst. Sed egestas suscipit adipiscing. Maecenas sed eros non libero tincidunt aliquet. Aliquam in risus elit, id eleifend tellus. Sed tempor pretium orci, vel lacinia felis placerat vitae. <a href="#" class="more-link">Read more...</a></p>
</div>
</div>

How to use shortcodes ?


In case you need to use one of the existing shortcodes on your page you should simply open shortcodes.html page and copy the existing shortcode

For example in shortcodes.html you want to copy diagram. In this case copy the code starting from line 1559-1598 and then past it in your page where you need and then edit it

<div class="row-fluid">
<div class="span12 module_cont module_normal_padding module_diagramm">
<div class="bg_title"><h4 class="headInModule">Diagram</h4></div>
<div class="shortcode_diagramm_shortcode diagramm">
<ul class="skills_list">
<li class="skill_li">
<div class="diagram_bar">
<h6>Lorem Ipsum - 60%</h6>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="60"></div></div>
</div>
</li>
<li class="skill_li">
<div class="diagram_bar">
<h6>Dolor vestibulum mas eget - 75%</h6>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="75"></div></div>
</div>
</li>
<li class="skill_li">
<div class="diagram_bar">
<h6>Egestas - 30%</h6>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="30"></div></div>
</div>
</li>
<li class="skill_li">
<div class="diagram_bar">
<h6>ridiculus Pellentesque - 49%</h6>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="49"></div></div>
</div>
</li>
<li class="skill_li">
<div class="diagram_bar">
<h6>Phasellus Massa - 100%</h6>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="100"></div></div>
</div>
</li>
</ul>
</div>
<a id="anchor17"></a>
</div><!-- .module_cont -->
</div><!-- .row-fluid -->

Result

How to change the color of the theme?

You can do that easily, in two ways:

How to change theme layout?

You can do that easily, by adding the following div tag right after the </footer>:

for the boxed layout

<div class="layout_trigger boxed_bg_cont" style="background-color:#c4c8cb; background-image:url(img/boxed_bg.jpg); background-repeat:repeat;"></div>

Background image layout

 <div class="layout_trigger image_bg_cont" style="background-color:#a9a9a9; background-image:url(img/bg_user.jpg); background-repeat:no-repeat;"> </div> 

Background color layout

  <div class="layout_trigger boxed_bg_cont" style="background-color:#1A0C14; background-repeat:repeat;"> </div> 

 

In general you just need to open the page that uses one of the layouts and copy the code that goes after the footer tag.

Contact Form Setup

You can setup your contact form in 2 clicks, please open mail.php file and find "te


st@test.com" on line 8, simply replace to your the email address all the requests will be sent to. That's all ;)

How to setup twitter?


To show posts from your flickr account all you need is to insert your account details in index.html file line 897, simply replace default username with yours ;)

$(document).ready(function(){
$('.tweet_1057').tweet({
modpath: 'twitter/',
count: 3,
username : 'themedev'
});
});

After this go to folder twitter and open index.php file and insert your consumer keys and user token keys.

/ Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';

// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';

// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';

// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';

Then save your changes and test it on your server.

How to setup flickr?


To show posts from your flickr account you need is to insert your account details in index.html file line 897, simply replace default username with yours ;)

<script src="http://www.flickr.com/badge_code_v2.gne?count=6&display=latest&size=s&layout=x&source=user&user=92335820@N08"></script>

Source files included


Galaxy comes with 14 PSD and 26 HTML files. Some PSD files can include different pages inside, and can have hidden layers. Please note that the images are not included in the package.

All .js files are located in the /js/ folder.

Credits


I would like to say a big thnx to all the people who created an awesome stuff:

jQuery Carousel 0.9.8 by Thomas Lanciaux and Pierre Bertet
jQuery Easing v1.3 by George McGinley Smith. - http://gsgd.co.uk/sandbox/jquery/easing/
jQuery Form Plugin v2.05 - http://malsup.com/jquery/form/
Isotope v1.5.21 by David DeSandro / Metafizzy - http://metafizzy.co/#licenses
jQuery Nivo Slider v3.1 by Dev7studios - http://nivo.dev7studios.com
OneByOne Slider - http://codecanyon.net/user/sike
jQuery PrettyPhoto plugin by Stephane Caron - http://www.no-margin-for-errors.com
Tipsy tooltips for jQuery by Jason Frame - jason@onehackoranother.com
jquery.tweet.js by Todd Matthews & Steve Purcell - http://tweet.seaofclouds.com/
Superfish v1.4.8 - jQuery menu widget by Joel Birch - http://users.tpg.com.au/j_birch/plugins/superfish/