“Ping” Documentation by “SwitchUp Studios” v1.0

---

“Ping”

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. PSD Files
4. Theme Options

---

A) HTML Structure - top

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 "container". The sidebar's (column #2) content is within a div with an id of "primary" or "secondary". The general template structure is the same throughout the template. Here is the general structure.

        <wrapper>
        	<header>
        	</header>
        	<main>
        		<container>
        		</container>
        		<primary>
        		</primary>
        	</main>
        	<footer>
        	</footer>
        </wrapper>
        

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

	#container 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.

	#wrapper #container 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 one CSS file in this theme. This file contains a generic reset. Many browsers interpret the default behavior of html elements differently. By using a general reset CSS, 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. They also contain specific stylings for the entire theme

	/* =Header
-------------------------------------------------------------- */

	some code

	/* =Footer
-------------------------------------------------------------- */

	some code
	
	etc, etc. 

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.

---

C) PSD Files - top

I've included one psds with this theme, located here: dev.switchupstudios.com/ping/PSD/ping-theme.psd:

1. The main layout

If you'd like to change the main image in the header, open up the PSD, make the necessary adjustments, and then save the file as "header.png".

They have been structured in a way that the layers and parts of the website seem to make sense.

---

D) Theme Options - top

The following theme options are included with this theme

1. Site Color
2. Your Facebook
3. Your Twitter
4. Custom Footer Text
5. Custom Footer HTML

Site Color

Using the theme's built in color picker for this option, you can customize your website/blog to your exact mood or official colors!

This color is used throughout the entire site for things like:

• Link Colors
• Hovers
• Background Colors
• CSS3 Animations
• CSS3 Transitions
• Borders

Your Facebook

This option lets you put a link to your Facebook profile onto your website! Just paste the bit after 'facebook.com/' and it'll do the rest for you!

Your Twitter

This option lets you put a link to your Twitter profile onto your website! Just paste the bit after 'twitter.com/' and it'll do the rest for you!

Custom Footer Text

Using this option, you can put 'links to friends', or anything else your imagination can think of! It accepts valid html, so get creative!

Custom Footer HTML

This is for pasting things like 'Google Analytics' and any other code that needs to be placed in the footer.

---

Once again, thank you so much for downloading 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.

SwitchUp Studios

Go To Table of Contents

---