“marskar - HTML5/CSS3” Documentation by “Martynas” v1.0

“marskar - HTML5/CSS3”

Created: 2012/06/10
By: Martynas Skardinskas
Email: martynas@skardinskas.lt

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

HTML Structure
CSS Files and Structure
JavaScript
PSD Files
Sources and Credits

A) HTML Structure - top

This template is responsive. All the elements in the code are named with appropriate IDs and Classes, so you can easily find what you need to edit in the HTML and the CSS. Each page is in seprate HTML file.

Menu

HTML Menu

Use same structure as simple list. If you want small desc box below menu item use: <span class="desc">Your text goes here</span>, it always active on item which have current class. With sub menu is very simple, just use struture as example below.

<nav id="main_menu">
    <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a><span class="desc">What we are</span></li>
        <li><a href="portfolio_4_columns.html">Portfolio</a>
            <ul>
                <li><a href="portfolio_2_columns.html">2 Columns</a></li>
                <li><a href="portfolio_3_columns.html">3 Columns</a></li>
                <li><a href="portfolio_4_columns.html">4 Columns</a></li>
                <li><a href="portfolio_single.html">Single Project</a></li>
            </ul>
        </li>
        <li><a href="blog.html">Blog</a>
            <ul>
                <li><a href="blog_single.html">Single post</a></li>
            </ul>
            </li>
        <li><a href="contact.php">Contact us</a><span class="desc">Where we are</span></l
    </ul>
</nav>

Almost same navigation structure at footer:

<div class="menu">
    <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="#">Sub menus</a>
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Elements</a></li>
                <li><a href="#">Columns</a></li>
                <li><a href="#">Third Level Item</a></li>
            </ul>
        </li>
        <li><a href="portfolio_4_columns.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.php">Contact us</a></li>
    </ul>
</div>

Change contact address

Open contactform/sendemail.php file and edit m.grepas@gmail.com to your email address. If you want to see custom title of email which is sent from your site change 5 line of same file, I mean "Contact form:" this text to something what you like more.

Change slider effects

Slider is awesome, you agree with me? If you looked at the code and thinked that is very hard, so you are wrong. Let's start. Each slide is separated in <div class="step">. on this tag exist some data attributes thay set slide position. Check this page to understand where is X, Z Y coordinates. There is all availble options:

data-image-w="1920" image width
data-image-h="580"; image height
data-x="2000"
data-y="1500"
data-z="1000"
data-rotate="20"

What bout slider background, just edit background link in div tag with class "step": data-image="images/pic_slide_1.jpg" change url to any link to image.

data-image="images/pic_slide_1.jpg" image link
data-image-w="1920" image width
data-image-h="580"; image height

B) CSS Files and Structure - top

I'm using one CSS files in this theme.

The file contains all of the specific stylings for the page. The file is separated into sections using:

/* ------------------------------------------------------------ */
/* --- 1. RESET ----------------------------------------------- */
/* --- 2. MAIN ------------------------------------------------ */
/* --- 3. HEADER ---------------------------------------------- */
/* ------------------------------------------------------------ */
/* --- 4. HOMEPAGE -------------------------------------------- */
/* --- 4-1. SLIDER -------------------------------------------- */
/* --- 4-2. LATEST BLOG --------------------------------------- */
/* --- 4-3. LATEST PROJECTS ----------------------------------- */
/* --- 5. TYPHOGRAPHY ----------------------------------------- */
/* --- 5-1. BUTTONS ------------------------------------------- */
/* --- 5-2. COLUMNS ------------------------------------------- */
/* --- 5-3. HELPER CLASSES ------------------------------------ */
/* --- PAGES -------------------------------------------------- */
/* --- 6. BLOG PAGE ------------------------------------------- */
/* --- 6-1. RESPOND ------------------------------------------- */
/* --- 6-2. COMMENTS ------------------------------------------ */
/* --- 6-3. FILTER EFFECTS ------------------------------------ */
/* --- 7. PORTFOLIO PAGE -------------------------------------- */
/* ------------------------------------------------------------ */
/* --- 8. SIDEBAR --------------------------------------------- */
/* --- 9. PAGE CONTENT ---------------------------------------- */
/* --- 10. FOOTER --------------------------------------------- */
/* --- 11. FOOTER WIDGETS  ------------------------------------ */
/* --- REPONSIVE ---------------------------------------------- */
/* --- 12. SMARTPHONES ---------------------------------------- */
/* --- 13. TABLETS -------------------------------------------- */
/* --- 14. DESKTOPS ------------------------------------------- */
/* ------------------------------------------------------------ */
/* --- 15. PRINT ---------------------------------------------- */
/* --- 16. FANCYBOX ------------------------------------------- */
/* ------------------------------------------------------------ */

C) JavaScript - top

This theme imports three Javascript files.

jQuery
jQuery UI
jQuery Cycle
jQuery isotope
jQuery fancybox
modernizr
Custom script

jQuery is a Javascript library that greatly reduces the amount of code that you must write.
jQuery UI - used for tabs.
jQuery Cycle - all galleries, slideshow is based on this.
jQuery isotope - portfolio page filtering funcion.
jQuery fancybox - lightbox plugin, just add fancybox class to a tag with href to image and it will work at any page of this site.
modernizr - HTML5 for IE8, IE7.
Most of the animation in this site is carried out from the customs scripts.

D) PSD Files - top

I've included 4 psd file with groups with name of content type, place. In these PSDs you will find all main elements of design

E) Sources and Credits - top

jQuery - www.jquery.com/
jQuery UI - www.jqueryui.com
jQuery Cycle - www.jquery.malsup.com/cycle/
jQuery isotope - www.isotope.metafizzy.co
jQuery fancybox - www.fancyapps.com/fancybox/
modernizr - www.modernizr.com
Most of the animation in this site is carried out from the customs scripts.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd 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 a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Martynas Skardinskas

Go To Table of Contents