Home Page Main Images:

Vendor and Copyright: http://DollarPhotoClub.com
Image(s): #96359684
Required size for home page main image(s): 500 x 500 pixels.

Photos Copyright Info The images and photos listed above are included as example images only. They are used for demonstration purposes to give our customers a functional preview of what the template will look like once content has been added. You are responsible for replacing watermarked images with those of your own. Watermarked photos may not be shared, copied, used or redistributed in any way, nor may they be uploaded to your hosting server.

---

Be sure to read through the TemplateInstructions.PDF file

---

We offer a wide variety of css classes that you can apply to the various elements on your pages. You can change colors, fonts, and more by editing those items within the css file. But take care that you do not resize any widths that could affect the layout of your pages.

Heading 1 <h1>

Heading 2 <h2>

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>

Heading 6 <h6>

Alternate1

Alternate 2

Miscellaneous Classes:

<p class="center">This is a paragraph of text that is centered. Just apply the center class.</p>

<p class="right">This is text that is aligned to the right. Apply the right class.</p>

<p class="small">This is text that is smaller than normal. Apply the small class.</p>

<p class="center small"> You can have more than one class assigned to an element. This paragraph uses the center class as well as the small class.</p>

Note: We include a wide variety of css classes that you can apply to a wide range of elements. Chances are you won't need or use all of them, but it's a good idea to look through the css file to see what is there.

---

Blockquote - Float Right

<blockquote class="rightside"> <strong>Lorem Ipsum</strong> adversarium eam ei. An iudico populo omnium duo, dicta adversarium ad sit. Scaevola fabellas nec ut, pri solum error luptatum eu, simul commune no sit.</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. In ultricies accumsan odio, sed faucibus mi volutpat id. Duis laoreet odio ac nisi placerat posuere. Quisque vitae metus quis nibh iaculis ullamcorper. Ut eleifend molestie lectus, ac accumsan urna tincidunt at. In in mauris in nibh aliquam luctus. Vivamus faucibus, mi non commodo egestas, ipsum lectus sodales mauris, a rutrum urna mi viverra libero. Morbi adipiscing lacinia libero, a auctor tellus porta nec.

Duis laoreet odio ac nisi placerat posuere. Quisque vitae metus quis nibh iaculis ullamcorper. Ut eleifend molestie lectus, ac accumsan urna tincidunt at. In in mauris in nibh aliquam luctus.

Blockquote - Float Left

<blockquote class="leftside"> Lorem Ipsum adversarium eam ei. An iudico populo omnium duo, dicta adversarium ad sit. Scaevola fabellas nec ut, pri solum error luptatum eu, simul commune no sit.</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. In ultricies accumsan odio, sed faucibus mi volutpat id. Duis laoreet odio ac nisi placerat posuere. Quisque vitae metus quis nibh iaculis ullamcorper. Ut eleifend molestie lectus, ac accumsan urna tincidunt at. In in mauris in nibh aliquam luctus. Vivamus faucibus, mi non commodo egestas, ipsum lectus sodales mauris, a rutrum urna mi viverra libero. Morbi adipiscing lacinia libero, a auctor tellus porta nec.

Duis laoreet odio ac nisi placerat posuere. Quisque vitae metus quis nibh iaculis ullamcorper. Ut eleifend molestie lectus, ac accumsan urna tincidunt at. In in mauris in nibh aliquam luctus.

Blockquote - No Float

Lorem Ipsum adversarium eam ei. An iudico populo omnium duo, dicta adversarium ad sit. Scaevola fabellas nec ut, pri solum error luptatum eu, simul commune no sit.

Content Boxes - Two Across

<section class="contentBox2a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox2b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

---

Content Boxes - Three Across

<section class="contentBox3a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox3b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox3c>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

---

Clearing Floats

When you have floated elements like the content boxes described above, the content inside may vary in length. To ensure that any content that sits below floated elements will begin below them, you need a method to "clear" floated sections. We do this with the Horizontal Rule <hr>. In the default.css file, there are three rules, all of which can be used to "clear" floated items:

• Normal: hr {background-color: #ccc; border: none; color: #ccc; height: 1px; clear: both;}
• Fancy: hr.fancy {background: transparent url('../images/horizontalrule.png') center center no-repeat; color: #eee; border: none; height: 25px; clear: both;}
• Invisible: hr.noshow {background-color: transparent; border: none; color: #fff; height: 1px; clear: both; visibility: hidden;}

Images - Float Left

Float an image to the left without a border:

<img alt="" class="image-left" src="images/photoname.jpg">

 

Float an image to the left with a border:

<img alt="" class="image-leftBorder" src="images/photoname.jpg">

 

Float an image to the left with a border and shadow:

<img alt="" class="image-leftFrame image-catalog" src="images/photoname.jpg">

 

Make a square image appear round and float to the left.

<img alt="" class="image-leftRound" src="images/photoname.jpg">

Images - Float Right

Float an image to the right without a border:

<img alt="" class="image-right" src="images/photoname.jpg">

 

Float an image to the right with a border:

<img alt="" class="image-rightBorder" src="images/photoname.jpg">

 

Float an image to the right with a border and shadow:

<img alt="" class="image-rightFrame image-catalog" src="images/photoname.jpg">

 

Make a square image appear round and float to the left.

<img alt="" class="image-rightRound" src="images/photoname.jpg">

---

Bulleted Lists and Ordered Lists:

<ol class="leadingzero">

1. Topic One
2. Topic Two
3. Topic Three
4. Topic Four

<ul class="list1">

• Topic One
• Topic Two
• Topic Three
• Topic Four

<ul class="list2">

• Topic One
• Topic Two
• Topic Three
• Topic Four

<ul class="list3">

• Topic One
• Topic Two
• Topic Three
• Topic Four

---

Paragraphs with Tiny Icons

<p class="home"> Adds the home icon to the paragraph

<p class="email"> Adds the email icon to the paragraph

<p class="phone"> Adds the phone icon to the paragraph

<p class="hours"> Adds the clock icon to the paragraph

<p class="comment"> Adds the text bubble icon to the paragraph

Drop Caps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. Add class="dropcap" class to the <p> tag.

Big Number

1<p><span class="bignumber">1</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. </p>

Button Look for a Link

Change a regular "call to action" link:

Read More ...

Into a Button:

Read More

Add class="button" to the anchor tag <a>

---