DirectoryPress Text Styles

Header 1 <h1>

Header 2 <h2>

Header 3 <h3>

Header 4 <h4>

Paragraph <p>

Link Style <a href=''>...</a>

list item
list item
list item
list item
list item
list item

list item
list item
list item
list item
list item
list item

DirectoryPress Notification Boxes

This is some random text, this is some random text!

DirectoryPress Tabbed Content

<ul class="tabs"> <li><a href="#tab1" id="icon-single-info">Tab 1</a></li> <li><a href="#tab2" id="icon-single-images">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content entry"> <p class="padding20"> Tab 1 Content</p> </div> <div id="tab2" class="tab_content"> <p class="padding20">Tab 2 content</p> </div> <div id="tab3" class="tab_content"> <p class="padding20">Tab 3 content</p> </div> </div>

Tab 1
Tab 2
Tab 3

Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content Tab 1 Content

Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content Tab 2 content

Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content Tab 3 content

DirectoryPress Boxes

<p class="rounded border inner"> ... content ...</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem. Quisque vel nisl libero, vitae consequat arcu. Maecenas pharetra mauris eget sapien blandit venenatis. Integer adipiscing, magna volutpat pharetra ultrices, tellus eros commodo tellus, id molestie libero lorem eu augue. Fusce eu erat lectus. Suspendisse et elit non neque pretium vulputate. Ut dapibus felis et dui pellentesque egestas.

DirectoryPress Multi Column Paragraphs

<p class="multi_col"> ... content ...</p>

DirectoryPress Buttons

<a href="URL" class="button black" data-wpel-link="internal">Button</a> <a href="URL" class="button orange" data-wpel-link="internal">Button</a> <a href="URL" class="button blue" data-wpel-link="internal">Button</a>

Button Button Button

<a href="URL" class="button black button_long" data-wpel-link="internal">Button</a> <a href="URL" class="button orange button_long" data-wpel-link="internal">Button</a> <a href="URL" class="button blue button_long" data-wpel-link="internal">Button</a>

Button Button Button

DirectoryPress Page Navigation

01

06

02

07

03

08

04

09

05

10

DirectoryPress General Layout Classes

Below are a few general classes that you will be using in the layout.

.full - To have 100 width.
.col - Use this to float a div with 10px margin on both side. Mostly used in layout more than 1 column.
.box - To have a 10px bottom margin.
.first_col - The first floated component with no margin left.
.last_col - The last floated component with no margin left.

.clearfix

When there is a float element within a div, you will need to use the class "clearfix" for the container of the floated element. For example:

Layout Options - 960PX

1 column layout - 960px
2 columns layout - 640px + 300px
2 columns layout ( even ) - 470px + 470px
3 columns layout - 300px + 300px + 300px
4 columns layout - 225px + 225px + 225px + 225px

Concept

w_960 - define the max width layout as 960px.
.b1 - 640px, normally we use for content area.
.b1 .b1 - 310px, this use to split the .b1 into 2 columns.
.b1 .b1 .b1 - 145px, this is to spliy the splited columns into extra columns
.b2 - 300px, nor mally we use of sidebar area.
.b2 .b2 - 140px, split the b2 into 2 columns.
.b_half_col - 470px, split the entire 960px layout into 2 columns
.b_third_col - 300px, split the entire 960px layout into 3 columns
.b_fourth_col - 225px, split the entire 960px layout into 4 columns

Layout Options - 800PX

1 column layout - 800px
2 columns layout - 200px + 580px
3 columns layout - 200px + 280px + 280px

Concept

w_800 - define the max width layout as 800px.
.m1 - 200px, normally we use for sidebar area.
.m2 - 580px, nor mally we use of content area.
.m2 .m2 - 280px, split the m2 into 2 columns.
.m_half_col - 380px, split the entire 800px layout into 2 columns

Fluid Layout

.f1 - 25%
.f2 - 67%
.f3 - 33%
.f4 - 75%
.f_half - 50%

Concept

Just keep in mind that the total of f for a complete row will be 5 if you are using column in different width. For example, f1 + f4, f2 + f3.

The usage for a fluid layout is slightly different. We will have an extra div within the column to control the padding or margin. You will notice that we have an extra class named gut which consists 20px right margin. This will break the layout.

class = .left .f1

Sidebar - 25% - 20px

class = .gut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem. Quisque vel nisl libero, vitae consequat arcu.

class = .left .f4

Content Area - 75% - 20px

Sidebar - 25% - 20px

Content Area - 75% - 20px

25% - 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

75% - 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem.

Sidebar - 25% - 20px

Content Area - 75% - 20px

50% - 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

50% - 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem.

Sidebar - 25% - 20px

Content Area - 75% - 20px

67% - 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem.

33% - 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sidebar - 33% - 20px

Content Area - 67% - 20px

Sidebar - 50% - 20px

Content Area - 50% - 20px

Sidebar - 33% - 20px

Sidebar - 25% - 20px

Form & Elements - 640PX

Form

Legend

Name *

input description

Email *

input description

URL

input description

Comment *

input description

Comment 2 *

input description

Gender
Male
Female

Interests
Design
Coding
Reading
Sleeping

Others

input description

Location *

This sample page demonstrates a tiny fraction of what you get.

A Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero.

A Sample Article

my image Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem. Quisque vel nisl libero, vitae consequat arcu. Maecenas pharetra mauris eget sapien blandit venenatis. Integer adipiscing, magna volutpat pharetra ultrices, tellus eros commodo tellus, id molestie libero lorem eu augue. Fusce eu erat lectus. Suspendisse et elit non neque pretium vulputate. Ut dapibus felis et dui pellentesque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem. Quisque vel nisl libero, vitae consequat arcu. Maecenas pharetra mauris eget sapien blandit venenatis. Integer adipiscing, magna volutpat pharetra ultrices, tellus eros commodo tellus, id molestie libero lorem eu augue. Fusce eu erat lectus. Suspendisse et elit non neque pretium vulputate. Ut dapibus felis et dui pellentesque egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem. Quisque vel nisl libero, vitae consequat arcu. Maecenas pharetra mauris eget sapien blandit venenatis. Integer adipiscing, magna volutpat pharetra ultrices, tellus eros commodo tellus, id molestie libero lorem eu augue. Fusce eu erat lectus. Suspendisse et elit non neque pretium vulputate. Ut dapibus felis et dui pellentesque egestas.

A box
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

A box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros lectus, sollicitudin at vestibulum sit amet, elementum et libero. Mauris neque purus, consectetur eget vulputate quis, dapibus ac tortor. Vestibulum libero ante, porttitor eget ullamcorper id, imperdiet vel libero. Fusce nec turpis metus, nec venenatis lorem.

DirectoryPress Text Styles

Header 1 <h1>

Header 2 <h2>

Header 3 <h3>

Header 4 <h4>

DirectoryPress Notification Boxes

DirectoryPress Tabbed Content

DirectoryPress Boxes

DirectoryPress Multi Column Paragraphs

DirectoryPress Buttons

DirectoryPress Page Navigation

01

06

02

07

03

08

04

09

05

10

DirectoryPress General Layout Classes

Layout Options - 960PX

Concept

Layout Options - 800PX

Concept

Fluid Layout

Concept

Sidebar - 25% - 20px

Content Area - 75% - 20px

Sidebar - 25% - 20px

Content Area - 75% - 20px

Sidebar - 25% - 20px

Content Area - 75% - 20px

Sidebar - 25% - 20px

Content Area - 75% - 20px

Sidebar - 33% - 20px

Content Area - 67% - 20px

Sidebar - 50% - 20px

Content Area - 50% - 20px

Sidebar - 33% - 20px

Sidebar - 33% - 20px

Sidebar - 33% - 20px

Sidebar - 25% - 20px

Sidebar - 25% - 20px

Sidebar - 25% - 20px

Sidebar - 25% - 20px

Form & Elements - 640PX

Form

This sample page demonstrates a tiny fraction of what you get.

A Sample Article

Travel Directory