Using a Label

Using a Badge

[pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]
Some content here for the cool modal pop up. Labels, badges, and buttons can open them!
[/pl_modal]

[pl_carousel name="PageLinesCarousel"][pl_carouselimage first="yes" title="Slide 1" imageurl="" ]
Here is the first slide and it's caption.
[/pl_carouselimage][pl_carouselimage title="Slide 2" imageurl=""]
Here is the second slide, in all its glory.
[/pl_carouselimage]

[pl_carouselimage title="Slide 3" imageurl=""]
You can have as many slides as you can create.
[/pl_carouselimage]

[/pl_carousel]

This is a quote. Below is the source if all goes wellSomeone Famous

[pl_blockquote cite="Someone Famous"]
This is a quote with a source
[/pl_blockquote]

This is a quote. Below is the source if all goes wellSomeone Famous

[pl_blockquote pull="right" cite="Someone Famous"]
This is a quote with a source
[/pl_blockquote]

[pl_alertbox type="info"]
This is an error.
[/pl_alertbox]

Note: Adding a class of .alert-heading to an heading element will style that heading to match the alert you've chosen.

[pl_alertbox type="info"]
<h2 class="alert-heading">Alert Heading</h2>
This is an error.
[/pl_alertbox]

[pl_tabs][pl_tabtitlesection type="tabs"]
[pl_tabtitle active="yes" number="1"]Title 1[/pl_tabtitle]
[pl_tabtitle number="2"]Title 2[/pl_tabtitle]
[/pl_tabtitlesection][pl_tabcontentsection]
[pl_tabcontent active="yes" number="1"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit
[/pl_tabcontent]
[pl_tabcontent number="2"]
<img class="pl-imageframe" alt="" />
[/pl_tabcontent]
[/pl_tabcontentsection]

[/pl_tabs]

[pl_button type="success" link="http://google.com" target="blank"]
Success
[/pl_button]

[pl_buttondropdown size="large"
type="info" label="button"]
<ul>
	<li><a href="#">This</a></li>
	<li><a href="#">This</a></li>
	<li><a href="#">This</a></li>
</ul>
[/pl_buttondropdown]

[pl_splitbuttondropdown size="large"
type="success" label="button"]
<ul>
	<li><a href="#">This</a></li>
	<li><a href="#">This</a></li>
	<li><a href="#">This</a></li>
</ul>
[/pl_splitbuttondropdown]

[pl_buttongroup]
<a class="btn btn-important" href="#">Link</a>
<a class="btn btn-important" href="#">Link</a>
<a class="btn btn-important" href="#">Link</a>
[/pl_buttongroup]

[pl_accordion name="accordion"][pl_accordioncontent name="accordion" number="1" heading="Tile 1" open="yes"]
Content 1
[/pl_accordioncontent][pl_accordioncontent name="accordion" number="2" heading="Title 2"]
<img class="pl-imageframe" src="http://placekitten.com/285/125" alt="" />
[/pl_accordioncontent]

[/pl_accordion]

This is a [pl_tooltip tip="Cool" position="right"]tooltip [/pl_tooltip] example.

This is a [pl_popover title="Title" content="..." position="right"]popover[/pl_popover] example.

[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]

[pl_video type="vimeo" id="42811051"]

Vimeo Video ID

YouTube Video ID

What is LESS?

LESS is language similar to CSS, but works to extend CSS with special functions and stuffs like variables and mixins. You can read more about LESS and how it saves time here.

Where do I use it?

LESS syntax can be used virtually anywhere. With PageLines, you can use LESS in a .less file, or in the Custom CSS box under Custom Code within PageLines admin.

How does PageLines use it?

We load all the LESS files from all the sections, and core, and compile it into one master PageLESS file, which then gets minified and cached for superior performance.

Typography Variables

Layout Variables

Theme & Section Variables

Example Uses

// in sections
.foo{background: url(@{plSectionsRoot}/yoursection/img/bar.png);}

// in child themes
.foo{background: url(@{plChildRoot}/img/bar.png);}

Ex.1 - Border Radius

.foo {
.border-radius(5px);
}

Returns...

.foo {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

Ex.2 - Box Shadow

.foo {
.box-shadow(0 0 5px black);
}

Returns...

.foo {
-webkit-box-shadow:0px 0px 5px black;
-moz-box-shadow:0px 0px 5px black;
box-shadow:0px 0px 5px black;
}

add_action( 'template_redirect', 'my_plugin_less' );
function my_plugin_less() {
$file = sprintf( '%sstyle.less', plugin_dir_path( __FILE__ ) );
pagelines_insert_core_less( $file );
}

What's the grid thing?

Where do I use it?

<div class="row">
<div class="span4">Span 4</div>
<div class="span8">Span 8</div>
</div>

<div class="page-header">
<h2>Utilities <small>CSS classes and HTML snips to enhance and extend your creations</small></h2>
</div>

The new icon font system in PageLines 2.3 makes adding icons to elements easier than ever before. The best part is that its fully backwards compatible with the existing icons found in Bootstrap.

<em class="icon-pagelines"></em>

Download the goods

(Compatible only with PageLines Framework Version 2.2 and above.)