General Hierarchy

Template folder structure
  • Quickr
    • css
    • fonts
    • images
    • js
    • about.html
    • blog.html
    • contacts.html
    • work.html
    • shortcodes.html
    • Other files...
Description
  • css

    Contains css files for template's native styles and plugin styles.

  • fonts

    Contains converted versions of fonts used ready for @font-face embed.

  • images

    The folder includes core images required for template.

  • skins

    The 4 additional skins that come with the theme

  • js

    All javascript plugins as well as custom developed scripts reside in this folder

  • Files

    The core html files of the theme (index, about, blog, portfolio, contacts, shortcodes)

HTML structure

The template is based on 960px 16 Grids responsive layout. (Learn more about template's columns support). The code below demonstrates the general html structure of the template:

Html Structure

Everything on the screenshot is commented so it should be easy to understand the general HTML structure from the screenshot.

CSS Files and Structure

Files

There are three main css files in the theme. For your convenience, the files are separated into logical parts. Let's explore the script files one by one:
  • prettyPhoto.css:

    Used for pretty photo gallery plugin in portfolio page.

  • ie.css:

    This script is loaded only if the user's browser is Internet explorer and contains IE-only style specifications.

  • sliders.css

    The styles for 5 sliders (except of Quickr Default slider, which is on style.css file).

  • style.css

    Main styles of the template.

Structure

All logical entities are commented and have strict separation. In the screenshot below is a snippet from style.css file.

CSS Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the like this:

#menu li a { color: #someColor; width: 100px; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your
CSS file and make sure that there isn't a similar style that has more weight.

#menu li#active-item a { color: #someColor; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower
in the CSS file that is being applied after yours. A good showcase for css overriding is the skin files structure. Please refer to any of 18 skins css files source code for a working demonstration.(Location: skins/SKIN_NAME/style.css)

Media Queries

To achieve responsive view on all devices, the template uses media queries. If you add your own elements you should make sure they also follow this practice. To fine-tune any new elements, you should override the default 960px version values, adding css override values to corresponding blocks of media queries.

Media Queries

The screenshot above features the media queries for 320px view (Mobile portrait). Just add your overriding styles in this block.

Adding skins

Adding skins is easy. Just add this line before the end of the <head> tag. (change the word "brown" to the one you need. Possible values: green, red, blue, brown.

<link rel="stylesheet" type="text/css" href="skins/brown/skin.css" />

PSD Files

Should you want to change some specific part of the design of the template to match your taste or your company branding, refer to PSD folder. Photoshop files are carefully layered, groupped and logically labeled to ensure maximum comfort when editing the files.

Previous Section (Getting Started) Next Section (Elements)
Top of Page