“Digitalis HTML Template” Documentation by Ruven Pelka v1.2

“Digitalis - Business and Portfolio HTML Template”

Table of Contents

1. Folder Structure
2. CSS Files and Structure
3. JavaScript and jQuery
4. Picture Sizes
5. First Steps to make Layout Adjustments and Add Content
6. Custom Elements
7. Flash-Videos
8. More Code Examples
9. Photoshop Files
10. Support
11. Sources and Credits

A) Folder Structure - top

• images → contains placeholder pictures for demonstration purpose
  • dummy → contains placeholder pictures for demonstration purpose
  • layout → contains all layout images
    • dark → contains a folder for every color that is available for the dark layout style with its specific image files
    • default → contains a folder for every color that is available for the default layout style with its specific image files
    • shared → contains images that are shared between all layout styles
  • shared → containts images that are shared between different pages
• javascripts → contains the jQuery Framework, Cufon files and jQuery plugins
• plugins → contains additional jQuery plugins that are including files of different document types
• stylesheets → containts the main CSS file layout.css and one folder for every layout style
  • dark → contains a CSS file for every color that is available for the dark layout style
  • default → contains a CSS file for every color that is available for the default layout style and the shared.css file with color informations that are getting shared between these files

B) CSS Files and Structure - top

Code Structure

The CSS structure is pretty simple. In every CSS file you will find headlines that tell you what the following code is about.

Technical Note: In front of every headline is the word @group. This is a special tag, that is used by some CSS-Editors in order to let you navigate through your code faster by the use of a tree view where every group gets displayed as a folder.

File Structure

The main CSS file of the template is the layout.css, where all the all styles, except the colors, are included.
The template has two different layouts. The default, which leaves the main section (between the header and footer section) white and only adds color to the header and the footer section and the dark layout, that covers the whole page (including the main content section) in dark color.
You will find the the colors files for each layout inside the folder stylesheets.
The default layout includes the shared.css file, that contains the code for the never changing main content section, in each color CSS file.
The color files for the dark layout contains the color styles for the whole page and don’t include a third CSS file.

C) JavaScript and jQuery - top

This template makes use of the jQuery JavaScript Framework and contains plugins that are written with the frameworks syntax. Further the template is using the font replacement engine Cufon.

All JavaScript files are included in the head of the template files.
Most of the JavaScript files can be found in the javascript folder. The files of plugins that require more than just a JavaScript file are located in the plugins folder.

Plugin Settings and Custom JavaScript

To change the settings of a plugin (e.g. you want to change the transition effects of the slider), simply edit the custom.js file inside the javascript folder. Here you will find all the code that configures and invokes the plugins.

D) Picture Sizes - top

You should use the following picture sizes for certain areas of the template:

E) First Steps to make Layout Adjustments and Add Content - top

Before and/or after putting your own content in the template, please make sure you followed these steps:

The Little Things

• Change the H1 heading to your page or company name.
• Change the title of your pages.
• Add a Meta-Description to your pages.
• Add your own navigation links.
• Add your own slogan to the Top Bar or delete the whole thing, if you don’t need it.
• Put links (.nav) and content (.content) into the Sidebar.
• Edit the Breadcrumbs and Social Links in the Bottom Bar or delete the whole thing, if you don’t need it.
• Edit the Footer. Note: You might want to activate or delete the Footerbar, which is hidden by default (more about this in the section Layout Options).

Change the Layout Style and Color

In order to change the color of a page, you just have to change the path and/or name of the color CSS file:

<!-- Stylesheets: Screen, Projection -->
<link href="stylesheets/layout.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="stylesheets/default/black.css" media="screen, projection" rel="stylesheet" type="text/css">

Note: The color CSS file needs to be included below the layout.css file.

There are two kinds of layouts. The default (lighter) and the dark (full-color) layout. Each layout has it’s own colors. Here is an overview:

• default
  • black
  • white
  • grey
  • blue
  • red
  • green
• dark
  • black
  • grey

<link href="stylesheets/<<LAYOUT>>/<<COLOR>>.css" media="screen, projection" rel="stylesheet" type="text/css">

Change the Logo

To change the logo, just overwrite the logo.png file inside the directory images/layout/<<YOUR LAYOUT>>/<<YOUR COLOR>>/.
If your logo is too long and gets cut off on the right side, you can change the width of the logo space in the layout.css file under the Headings Layout Structure > Header > “#header #logo h1 a”.

Slider Settings

Digitalis supports a frontpage Slider and also inline Sliders. You can set certain options for every group of slider. Just open the file javascripts/custom.js and scroll to the headline Nivo Slider. Here you can set Transition Effect, Animation Speed (animSpeed) and Pause Time (pauseTime) for every slider group. Please note that Animation Speed and Pause Time need to be adjusted in milliseconds (3000 milliseconds = 3 seconds and 500 milliseconds = 0.5 seconds).

Here are the effects you can insert:

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random

To learn more about the options visit the Nivo Slider creators website: http://nivo.dev7studios.com/.

Receive E-Mails from the Contact Form

This template includes a working AJAX-Contact-Form. In order to receive E-Mails that get sent from this form, you need to host the template on a server with PHP 5 and mail support (99% of all hosters should cover these requirements).
All you have to do then, is to open the file contactform_mailer.php and change the value of the receiver variable to your own E-Mail-Address:

$receiver = "youraddy@example.com";

In this file you can also change the output-notifications of the mailer-script.

Layout Options

You can control how the layout should look by adding certain classes to the body element, like this:

<body class="sidebar-left no-topbar no-nav-bg">

This example would render the page with the sidebar on the left instead on the right side, without a top bar (in which you can put a slogan) and without a background for the navigation menu.

Here is an overview of all the classes you can include:

F) Custom Elements - top

In this section I describe how to use custom elements.

<div class=”divider”></div>

<div class=”hr”></div>

<div class=”spacer”></div>

<div class=”big-spacer”></div>

<img src="picture.jpg" class=”float-left” />

<img src="picture.jpg" class=”float-right” />

<h3 class=”underline”>Single underlined heading</h3>

<div class=”underline-headings”>
  <h3>Underlined heading 1</h3>
  <p>Some text...</p>
  <h3>Underlined heading 2</h3>
  <p>Some more text...</p>
</div>

<p>Lorem <span class="highlight">ipsum</span> dolor
sit <span class="highlight-2">amet</span> elit.</p>

<div class="content-frame>Content here</div>

<div class="frame>Content here</div>

<div class="img-frame"><img src="picture.jpg" /></div>

<div class="img-with-caption">
  <img src="picture.jpg" />
  <p class="caption">Image with caption</p>
</div>

<div class="img-frame img-with-caption">
  <img src="picture.jpg" />
  <p class="caption">Image-Frame with caption</p>
</div>

<table class=”data”>
  ...
</table>

<p><span class="dropcap">H</span>ello</p>

<p><span class="dropcap-square">H</span>ello</p>

<p><span class="dropcap-circle">H</span>ello</p>

<blockquote>
  <p>Some Text</p>
</blockquote>

<blockquote>
  <p>Some Text</p>
  <p class="author">— <b>Ruven Pelka</b></p>
</blockquote>

<blockquote class="float-left">
  <p>Some Text</p>
</blockquote>

<div class="paginator">
  <a href="page1.html" class="first">« Prev</a>
  <span class="active">1</span>
  <a href="page2.html">2</a>
  <a href="page3.html">3</a>
  <a href="page4.html">4</a>
  <a href="page5.html">5</a>
  <a href="page2.html" class="last">Next »</a>
</div>

<a rel='lightbox' href="big_picture.jpg">
  <img src="picture.jpg" />
</a>

<a rel="lightbox[group]" href="big_picture1.jpg"><img src="picture1.jpg" /></a>
<a rel="lightbox[group]" href="big_picture2.jpg"><img src="picture2.jpg" /></a>
<a rel="lightbox[group]" href="big_picture3.jpg"><img src="picture3.jpg" /></a>

<!-- prettyPhoto -->
<link href="plugins/prettyPhoto/css/prettyPhoto.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="plugins/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

<!-- Fancybox -->
<!--
<link href="plugins/fancybox/jquery.fancybox-1.3.1.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="plugins/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
-->

<ul class="gallery">
  <li><a rel='lightbox[gallery]' href="big_picture.jpg"><img src="picture.jpg" /></a></li>
  <li><a rel='lightbox[gallery]' href="big_picture.jpg"><img src="picture.jpg" /></a></li>
  <li><a rel='lightbox[gallery]' href="big_picture.jpg"><img src="picture.jpg" /></a></li>
  <li><a rel='lightbox[gallery]' href="big_picture.jpg"><img src="picture.jpg" /></a></li>
</ul>

<div class="toggler"><strong>Title</strong></div>
<div class="toggle-content">
  <p>Content...</p>
</div>

<div class="toggler close-all"><strong>Title</strong></div>
...

<div class="slider">
  <img src="picture1.jpg" />
  <img src="picture2.jpg" />
</div> 

<div class="slider automatic">
  <img src="picture1.jpg" />
  <img src="picture2.jpg" />
</div> 

<div class="slider show-nav-arrows">
  <img src="picture1.jpg" />
  <img src="picture2.jpg" />
</div> 

<div class="slider">
  <img src="picture1.jpg" title="A text normal caption" />
  <img src="picture2.jpg" title="#html-caption"/>
</div>
<div id="html-caption" class="nivo-html-caption"> 
  <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>
</div>

<ul class="check">
  <li>List element</li>
</ul>

<ul class="cross">
  <li>List element</li>
</ul>

<ul class="mixed">
  <li class="check">Checked list element</li>
  <li class="cross">Crossed list element</li>
  <li class="check">Checked list element</li>
</ul>

<p class=”one-third”>Some Text</p>
<p class=”two-third last”>Some Text</p>
<div class=”divider”></div>

<img src="picture.jpg" class=”rounded” />

<div class="rounded-box">
  <div class="slider automatic">
    <img src="picture.jpg" />
  </div>
</div>

G) Flash-Videos - top

There are two ways to include Flash-Videos. Either you link it with the help of a Lightbox to play it, or you embed it directly into the page.

Lightbox

Note: Only the default Lightbox plugin prettyPhoto supports Flash-Videos. If you changed your Lightbox to Fancybox you will not be able to play Flash-Videos.

All what prettyPhoto needs, in order to play the video, is the URL. If you want to link to a YouTube-Video, just go to the video of your choice, click below on Share and copy the URL into your anker element.

<a rel="lightbox" href="http://www.youtube.com/watch?v=5L1wHSl_h8w">
  <img src="picture.jpg" class="rounded" />
</a>

It works the same way with videos from the website vimeo.com.

Embedding

To embed a Video from YouTube or Vimeo just go to the video page, click the share button, make some adjustments (e.g. 610 pixel width on pages with a sidebar or 940 pixel width on fullwidth pages), copy the source code and include it into your page.
If you want the corners of the video to be rounded, just add the class rounded to the object or iframe element.
You can also embed Flash-Videos directly on the Blog index (just like pictures):

...
<div class="post-box">
  <iframe class="rounded" 
      src="http://player.vimeo.com/video/10988919?title=0&byline=0&portrait=0&color=ffffff"
      width="610" height="343" frameborder="0"></iframe>
  <p class="post-data">
    <span class="date">December 21, 2010</span>
    <span class="categories"><a href="#">News</a>, <a href="#">Inspiration</a></span>
    <span class="comments"><a href="post.php#comments">9 Comments</a></span>
  </p>
</div>
...

H) More Code Examples - top

In this documentation I showed you how to implement the most important features.
You will find more code examples in the HTML files. Just look how they are done there and do it the same way or just copy the code and paste your own content in. It‘s really simple.

I) Photoshop Files - top

Among with the template come all PSD files needed to edit the different layout styles and colors. With these files you can even create your own unique layout style.

J) Support - top

If you have any further questions, please use the comment section of this item at mojo-themes.com. This way other useres can benefit from the solution as well. I will try my best to answer every question.

K) Sources and Credits - top

The template is using the following external scripts and resources:

• Nivo Slider jQuery plugin (for the sliders)
• prettyPhoto jQuery plugin (as Lightbox)
• Facybox jQuery plugin (as prettyPhoto alternative)
• Superfish jQuery plugin (to enhance Dropdown Menus)
• Validation jQuery plugin (to validate forms on the fly)
• Form jQuery plugin (to submit forms via AJAX)
• Cufon (to replace fonts)
• Social Bookmark Icons (for the Bottom Bar)
• Quicksand Font (for the headings)
• PT Sans Font (for the slogan in the Top Bar)

Again, thank you very much purchasing this template! I wish you all the best for the website that will grow out of it. If you want, you can post the URL of your final website in the comment section. I would really like to see how this template takes its place in the world wide web :)

Best regards,
Ruven Pelka

Go To Table of Contents