Aurelius Documentation

Thank you for purchasing Aurelius. Learn how to get started with the theme!


Created : 1/2/10
Author : Matthew Corner
Email : matt@qwibbledesigns.co.uk

Hey there, thank you ever so much for buying my theme; Aurelius. If you want to hear about further updates to this file, or about new files I produce, follow me on twitter at @QwibbleDesigns, or send me an email saying you'd like to hear about further updates via email, and you'll be added to the list.


If you have any questions that aren't covered in this helpfile, shoot me an email and I'd be glad to help you out.


What files are included with my theme?

Aurelius is a HTML/CSS theme, so comes with ready layed out pages for you to work with. As well as Html, and Css though, there are several other file types such as javascript, and php. These are listed below, and briefly explained.

Html
  • index.html - The homepage for displaying your latest / best work, and some eyecatching links
  • about.html - Tell your audience all about you, and your history
  • full_width.html - A full width page showcasing how the major html elements are displayed in the theme
  • portfolio.html - A gallery of all your work, displayed under different catagories that you choose
  • portfolio_single.html - Show each project in its full glory with a link to the live site, and a rotator showing off your favourite elements
  • blog.html - Keep your site fresh with new blog posts about whatever interests you
  • single.html - the full page of a blog post complete with sidebar, comments, and a comment form
  • contact.html - Let your audience get in touch with you with the contact form, and follow your social profiles
CSS
  • reset.css - This resets browsers so they'll render different elements the same. You need not worry about this file
  • styles.css - This is where the business goes on, everything from the grid, to the looks are created here
Javascript

Please note : This theme makes use of Jquery, but pulls it from the google library to improve load time

  • contact.js - This gets the contact form working, and offers client side validation
  • DD_belatedPNG_0.0.8a-min.js - IE6 has problems displaying transparent png's so here's the fix
  • jquery.easing.1.3.js - This file generates the animation on the image rotators
  • jquery.roundabout-1.0.min.js - This is the power house behind the image rotator
  • jquery.roundabout-shapes-1.1.js - On the portfolio single page, noticed how the rotator is vertical? This is done by this file
PHP
  • send_email.php - This pulls all the information from the contact form and sends the email, however you need not touch this file
  • config.html - This config file allows you to input the email all contact form message will be sent to.
PSD

The theme comes with three predefined canvas's for photoshop; Image Rotator Item, Portfolio Item, and Blog Preview. These are to make your creation of these images with predefined sizes.

Images

The theme also comes with several images, not including the portfolio, and blog images. These are backgrounds for the site, and buttons.


How can I easily edit the html code?

The aurelius theme comes with well commented code, using id's and classes that allow us to easily conclude what each elements does. Each page has general structure that can be seen below.

Html Structure

As you can see, each section of a page is clearly labelled, so you'll never be lost within the file you are adding content to.


What steps do I need to take to make the site my own?

As you may have noticed, any site on the internet has stuff such as the page title, the logo name, even possibly a favicon. These brief steps will allow you to personalise your site to your own company / you.

The page title

The page title is found within the head of each and every html file in this theme. To change it, you are going to have to edit the following line in every one of those html files.

Html Title

As you can see it is likely you will want to simply change "Aurelius" part of the title, leaving the name of the current page intact, so that visitors know where they currently are.

The site logo

You are bound to have noticed the big Aurelius logo in the top left corner of every page, and will definately want to place your own logo in here. The site logo comes in plain text, so I will show you how to input a text logo.

Html Logo

Just like the page title, you will need to change the text within these logo tags on every html page you have. If on the other hand, you wish to impliment an image as a logo rather than text, I recommend you read this article on how to do so.

The footer text

By default, the footer comes with my name and site in the copyright. This doesnt have to be, and you are more than welcome to edit it to however you want. Like the above two changes, your going to need to make this edit in every html page you have.

Html Footer

Leave the link to the top of the page, it's the line above that you want to edit, with your own name, and your own link.

Content

Most of the content is fairly self explanatory, using standrd html formatting. I can't teach you how to use these html elements, but looking around the html files will get you a long way by simply changing the default place setting text.


How can I add my own images to the image rotators?

The image rotators do much of the work for us. All we really need to do is provide the images and links within a html unordered list like below.

Html Rotator

You'll find lists like these on both the portfolio_single, and index pages. They both come with different id's, and these must be left intact for the rotator to work.

As you can see, each item within the list has two specific things inside them, the link with its text wrapped in a span, and the image itself. All you need to do is reference the new image, and input the new link to the project page.

Please Note : The image rotator functions best with five items in it. Keep this in mind when adding new items. this is to feature your best / latest work, not all of you work.


How do I configure my contact form?

You'll be glad to hear that I couldnt have made it any easier for you! You done need to change any of the html structure or javascript files to have the email sent to you. You simply need to open up config.php, and replace the dummy email with your own. Thats it!, one line of code, and you can test it sending email to you.

Contact form configuration

Please Note : Make sure the quotation marks are left intact, otherwise the php file will fail no you. Only change the email address.


What resources were used in the making of this theme?

I sadly cannot claim credit for every element of the Aurelius theme. While the design and layout is 100% mine, some elements were taken from other resources. The following images, icons, and jquery plugins were used.

  • Jquery javascript library by Jquery - One of the most popular javscript librarys around, this is used for the effects on the website such as the contact form and rotators
  • Roundabout for Jquery by Fred LeBlanc - This jquery plugin creates the image rotator that features on the frontpage of Aurelius
  • Roundabout Shapes for Jquery by Fred LeBlanc - Noticed how the image rotator when viewing a project is vertical? This jquery plugin does the trick
  • Jquery Easing by George McGinley Smith - Jquery easing adds the animation effects to the image rotator
  • Tweet My Web 7 icons by ArtDesigner - This beautiful icon pack includes the twitter bird featured on the homepage
  • Lovely Website icons Pack #1 by ArtDesigner - This beautiful icon pack features some of the stunning icons on the homepage
  • Lovely Website icons Pack #2 by ArtDesigner - This beautiful icon pack features some of the stunning icons on the homepage
  • Social Networking Icons by webtoolkit4.me - This set of icons are used in your contact page to link to your social profiles

Thank you again for purchasing this theme from me. As said at the beginning, if you have any further questions regarding the theme, or want to hear about future updates to this and my other files, use the contact information at the top.

Matthew Corner