“96 Pure CSS Pricing Tables” Documentation by “ThemeMakers” v1.0

---

“96 Pure CSS Pricing Tables”

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. Sources and Credits

---

A) HTML Structure - top

This theme is a flexible layout with two, three, four and five columns for each color scheme. All of the information of tables within the main content area is nested within a div with an id of "hosting-table". Each table is nested within div's with a classes of "table_style1 col_2", "table_style1 col_2" .... "table_style24 col_2". Each table column is nested within div's with class of "column". The general template structure is the same throughout the template. Here is the general structure.

otsu@tp2p

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.

I.E.

	#wrap #primaryContent 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.

---

B) CSS Files and Structure - top

I'm using two CSS files in this theme, one is for gray tables, other - for color table. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

/* ================= FONT FACE  ================== */	

@font-face {
    font-family: 'SegoeUISemibold';
    src: url('../fonts/segoe_ui_semibold-webfont.eot');
    src: url('../fonts/segoe_ui_semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/segoe_ui_semibold-webfont.woff') format('woff'),
         url('../fonts/segoe_ui_semibold-webfont.ttf') format('truetype'),
         url('../fonts/segoe_ui_semibold-webfont.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasRegular';
    src: url('../fonts/bebas-webfont.eot');
    src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas-webfont.woff') format('woff'),
         url('../fonts/bebas-webfont.ttf') format('truetype'),
         url('../fonts/bebas-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{ 
	font-family: 'WebSymbolsRegular';
	src: url('../fonts/websymbols-regular-webfont.eot');
	src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/websymbols-regular-webfont.woff') format('woff'),
	     url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
	     url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}

/* =============== HOSTING TABLE  =============== */

#hosting-table {
	font-family:Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
	font-size: 12px;
	color:#787878;
	margin-bottom:3em;
}

#hosting-table .clear {
	clear:both;
} 

#hosting-table > div
 {
	margin-bottom:5em;
} 

/* ---- Lists ---- */

#hosting-table ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#hosting-table ul li {
	margin: 0;
	position:relative;
	padding:1em .3em;
	list-style-type: none;
}

#hosting-table ul {
	position:relative;
	border-bottom:10px solid #000;
} 

/* =========== COLUMNS  =========== */

#hosting-table .col_2 .column {
	float:left;
	width:50%;
	text-align:center;
	position:relative;
}

#hosting-table .col_3 .column {
	float:left;
	width:33.33%;
	*width:33.3%;
	text-align:center;
	position:relative;
} 

#hosting-table .col_4 .column {
	float:left;
	width:25%;
	text-align:center;
	position:relative;
}

#hosting-table .col_5 .column {
	float:left;
	width:20%;
	text-align:center;
	position:relative;
}

#hosting-table .column li {
    font-family: 'SegoeUISemibold';
	min-height:1em;
	color:#000;
	background:#e6e6e6;
	border-right:1px solid #b6b6b6;
	border-bottom:1px solid #b6b6b6;
} 
 

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.

Any images that are placed within the blog section have 5px worth of padding and a light bluish background. If you would like to edit the display of these images, find the following section in the style sheet:

	#hosting-table .table_3col {
		change styles here:
	}

---

D) Sources and Credits - top

To be inspired graphically I've used the following FraphicRivers item for creating the code. The item below was bought under extended license.

• Web Pricing Tables

---

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.

ThemeMakers

Go To Table of Contents

---