Nocturnal HTML v1

Theme designed and developed by THE MOLITOR. If you have any questions that are beyond the scope of this help file, please visit the support forums at http://www.themolitor.com/forums

Resources

Videos walk-throughs: http://youtube.com/themolitor/
Support Forums: http://www.themolitor.com/forums/
Demo: http://themolitor.com/nocturnal_html

General Info

To intall this theme, upload the "nocturnal_html" contents to the directory of your hosting account.

Template Files

about.html: contains a standard page layout.
gallery.html: contains a gallery layout.
post.html: single post page for blog/featured items.
blog.html: blog listing.
contact.html: page with Google map.
index.html: main page with links to sample posts.
style.css: this contains the theme styling.

Image Dimensions

Main column: 510px width (any height will do, but 750px recommended for home page items)
Mini slider: 235px width (any height will do)
Gallery: 78px x 78px

Logo

This is controlled from the a tag with ID "logo" (see below).

Accent Colors

Main link and button background colors are controlled in the header section of each template file (see below).

Mini Slider

You can control the mini slider from the div with ID "slides". Each slide is an a tag with an image inside and a span tag containing the title info (see below). Images must be 235px wide, but they can be any height.

You can make adjustments to the behavior of the mini slider at the very bottom of the page. Numbers are in milliseconds, so "10000" = 10 seconds (see below).

Main Slider

The main slider uses AJAX to pull in content from different pages. The demo has 3 pages that are being used (see below).

To navigate the slider, be sure to keep track of the "NEXT/PREV" links to make sure they point to the proper page (i.e. the last page links to the first page) and that the "whereAmI" section is properly adjusted (see below).

Adding Songs

To add songs to the post, edit the "SONGS FOR THIS POST" section. Each song sits inside an li tag (see below).

Image Gallery

To control the gallery on the "gallery.html" template file, edit the "galleryImgs" div. Each image sits inside an a tag with "prettyPhoto[pp_gal]" as the rel attribute. This is what allows the images to appear in the pop-up window (see below)

Sidebar

You can control the sidebar content by adding/editing the li tags with class name "widget". Each widget requires a title inside the h2 tag (see below).

Footer

The content at the bottom of the page is controlled from the div with ID "footer". You can control the copyrigh notice as well as the social buttons from here (see below).

Background Images

The background for individual posts are controlled from the div with class name "backGroundImg" (see below).

If an image is not specified, the theme will use the image entered at the bottom of the page under "BACKGROUND IMAGE STUFF" (see below)

Image Lightbox

This theme uses PrettyPhoto as a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

HTML Structure

All of the information within the main content area is nested within a div with an ID of "content". The post content is nested inside the div with class name "post". The sidebar/widget content is within a div with an id of "sidebar". The menu content is within a div with an id of "menu".

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


.post a {
   color: #someColor;
}

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.


#content .post 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.

CSS

There is one CSS file called "Style.css" and is separated into sections using:


/* -----HEADER STUFF----- */

some code



/* -----FOOTER STUFF----- */

some code

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.

JavaScript

This theme imports the following JavaScript files:

jQuery: jQuery is a JavaScript library that greatly reduces the amount of code that you must write.
Custom Scripts: The custom.js file provides some custom scripts for jQuery.
Google Custom Font APIs: This script allows the theme to utilize Google’s custom font directory provided by google.com/webfonts
Backstretch: This jQuery plugin allows full size background images.
PrettyPhoto: PrettyPhoto is a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
audio.js: adds the ability to use the HTML5 audio tag and control it via jQuery
slides.js: creates the mini slider feature.

PSD Files

The main PSD file, “nocturnal.psd”, utilizes folders for organizing content. If you’re trying to edit a specific section, just locate the proper folder to find the layer.

Social icons can be edited from the “social.psd” file.