“Under Construction page with Twitter” Documentation by “Ryan Furtner (furto)” v1.0

---

“Under Construction page with Twitter”

---

Table of Contents

Structure...
1. HTML Structure
2. CSS Files and Structure

How to...
3. How to change logo and details
4. How to change the message
5. How to change the progress percentage
6. How to set up your twitter account
7. How to get rid of twitter section

Other...
8. Sources and Credits

---

A) HTML Structure - top

This theme is a fixed layout. The "header" div contains the logo and contact info located at the top of the page. The "under" is the black rectangle in the center of the page which contains the message to your visitors and the graph. The "twitter" div contains the twitter part of the page located toward the bottom. Here is the general structure.

---

B) CSS Files and Structure - top

This Under Construction page uses one stylesheet called style.css, this is where you go if you want to change the look and layout of your theme.

The different sections of the stylesheet are separated by comments, shown below.

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.

If you would like to change the color of the links throughout the page to better suit your preferences you can do so here:

/* Link Styles */

a:link,
a:visited {
	text-decoration:none;
	border:0 none;
	color:#61c3f0;
}

a:hover {
	text-decoration:none;
	border-bottom:1px solid white;
	color:#61c3f0;
}

---

C) How to change logo and details - top

To use your own logo you can open the included photoshop file (404logo.psd) and replace the example logo with your own. Then save this image without a background (white and grey checked background) and save it as a transparent .png with the file name logo-trans.png (the -trans is important!) and put this in the /images folder of the theme package. (overwrite existing image)

To change the contact details you must open index.html in a text editor of your choice or html editing software and change the details. They are located on line 31 & 32 by default and are shown below

---

D) How to change the message - top

To change the message seen under "Under Construction" you must open index.html in a text editor of your choice or html editing software and change it.

By default this is located on line 46 and is shown in the image below.

---

E) How to change the progress percentage - top

There are a few places you need to change some information when you are changing your progress percentage. This is shown in the image below.

The class of the "graph" div needs to be changed. In the image it is 'p90' meaning 90%, If you change it to 'p30' the pie graph will change to show 30%.

After changing the graph to the new percentage, say 30%, the progress status now needs to be changed and it is also highlighted in the image above. You must change the percentage to 30% and the status to reflect your current status.

IMPORTANT: The percentage will only work in increments of 10 (10, 20, 30, 40, 50, 60, 70, 80, 90)

---

F) How to set up your twitter account - top

To set up your twitter account you simply go to the "head" section of the html document and change the text that corresponds with 'ID'. This must be your twitter ID. In my case the ID is 'furto' and this should be the default. You will need to change this to represent your twitter account, which is shown in the image below.

---

G) How to get rid of twitter section - top

If you do not have a twitter account or you simply do not want to show your latest tweets you can get rid of this part of the page completely and quite easily. You must open the stylesheet which is called style.css. Once you have done this navigate to line 105 where you will see #twitter. You will need to add one line of code to this (display:none;) this is shown in the image below.

---

H) Sources and Credits - top

I've used the following images, icons or other files as listed.

• Twitter icon from Smashing Magazine
• twitter.js by Remy Sharp

---

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.

Ryan Furtner

Go To Table of Contents

---