Simple, flexible and responsive documentation template for your premium files made with Twitter Bootstrap. Alerts, Highlighted Code, Tables and more.
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!
This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an id of "primaryContent". The sidebar's (column #2) content is within a div with an id of "secondaryContent".
The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title> <meta name="generator" content="TextMate http://macromates.com/"> <meta name="author" content="Ivor Padilla"> <!-- Date: 2012-03-08 --> </head> <body> </body> </html>
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
#primaryContent 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.
#wrap #primaryContent a { color: #someColor; }
Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:
File Name | Description |
---|---|
styles.css |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
reset.css |
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio. |
typography.css |
Sed posuere consectetur est at lobortis. |
The second file contains all of the specific stylings for the page. The file is separated into sections using:
/* === Header Section === */ some code /* === Main Section === */ some code /* === Sidebar Section === */ some code /* === Footer === */ some code etc, etc.
Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Tag | Description |
---|---|
jquery.js |
jQuery is a Javascript library that greatly reduces the amount of code that you must write. |
script.js |
Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over. |
myPlugin.js |
In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. |
If you want to change the slider's speed transition, open up the file scripts.js
and change the following code:
/* ---------- @ SlidesJS -----------*/ $('#banner').slides({ preload: true, generateNextPrev: true, autoHeight: true, effect: "slide", play: 5000 });
I've included three psds with this theme:
Thumbnail caption right here...
Thumbnail caption right here...
Thumbnail caption right here...
Thumbnail caption right here...
If you'd like to change the main image in the header, open "header.psd", make the necessary adjustments, and then save the file as "headerBG.png". Do the same for the buttons.
Here's a brief information about how to install your WordPress theme from scratch
I've used the following images, icons or other files as listed.
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.