Tools

Whether you need to build your own grid, add your own page header, or add an accordion with a shortcode, we've got you covered with an assortment of tools and utilities

Modal

Click Me!
Using a Label
No, click me!
Using a Badge
Not him, click me!
[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]
Attribute Description
title="" Serves as the title of the modal window
type="" The type of element that triggers the modal. Available types include: btn, label, badge.
colortype="" Available color types include: info, success, warning, important, and inverse.
label="" Serves as the label for the element that opens the modal popup

Image Carousel this cool thing is cool

[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]
Attribute Description
name="" Serves as the ID (#) of the carousel. For more than one carousel, specify distinct names
first="" Signifies the first slide in the carousel rotation
title="" Indicates the title of the slide
imageurl="" Specifies the path to the carousel image

Note: You may find that Wordpress inserts line-breaks when using Shortcodes on different lines, as in our example above. To prevent this from ruining your day, wrap problematic shortcodes in RAW. Example: PageLines RAW Shortcode

Social Media a plethora of networks to work with

Button Usage Notes
[pinterest img=url(optional)]
Optionally add an image url to the shortcode. If none is added one will be auto detected.
[like_button url=http://url-to-like.com]
Add an optional URL to like, otherwise likes the page that the button is placed on.
[googleplus]
[linkedin]
[twitter_button]
[twitter_button type="follow"]
Input Twitter handle under PageLines--->Website Setup.

Quotes because some things are actually important

Bear claw cookie tootsie roll cookie. Sweet roll marshmallow marshmallow sweet roll powder applicake topping gummies candy. Pudding icing chupa chups macaroon chocolate chocolate bar. tart bonbon topping chocolate cake

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

Liquorice pie applicake dragée cake toffee gingerbread. Topping bear claw oat cake chocolate cake. Danish faworki chupa chups apple pie chupa chups macaroon icing gummies cotton candy. Powder tootsie roll chocolate bar macaroon jelly-o liquorice. Carrot cake
[pl_blockquote cite="Someone Famous"]
This is a quote with a source
[/pl_blockquote]
Bear claw cookie tootsie roll cookie. Sweet roll marshmallow marshmallow sweet roll powder applicake topping gummies candy. Pudding icing chupa chups macaroon chocolate chocolate bar. tart bonbon topping chocolate cake

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

Liquorice pie applicake dragée cake toffee gingerbread. Topping bear claw oat cake chocolate cake. Danish faworki chupa chups apple pie chupa chups macaroon icing gummies cotton candy. Powder tootsie roll chocolate bar macaroon jelly-o liquorice. Carrot cake
[pl_blockquote pull="right" cite="Someone Famous"]
This is a quote with a source
[/pl_blockquote]
Attribute Description
pull="" Specifies blockquote position. Default is left, and the only other available attribute includes: right
cite="" Serves as the source of the quote

Alerts the alternative to all caps in your face

Info
This is an error.
Success!
This is an error.
Warning
This is an error.
×
Error
This is an error.
[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]
Attribute Description
type="" Specifies the color. Available types include: info,
closable="yes" Displays an "X" which makes alert disappear when clicked.

Tabs a hoarders delight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac mi enim, at consectetur justo.

[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]
Attribute Description
type="" Specifies...
pl_tabtitle active="" Specifies the active title tab
pl_tabtitle number="" Specifies the position of the title tab
pl_tabcontent active="" Specifies the active content tab
pl_tabcontent number="" Specifies the position of the content tab

Note: You may find that Wordpress inserts line-breaks when using Shortcodes on different lines, as in our example here. To prevent this from ruining your day, wrap problematic shortcodes in RAW. Example: PageLines RAW Shortcode

Buttons sometimes people need something to click

[pl_button type="success" link="http://google.com" target="blank"]
Success
[/pl_button]
Attribute Description
type="" Controls color
size="" Determines size. Includes mini, and large
link="" Button link
target="blank" Opens link in new window

Button Dropdown

[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]
size="" Determines size. Includes mini, and large
type="" Controls color
label="" Button label

Split Button Dropdown

[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]
size="" Determines size. Includes mini, and large
type="" Controls color
label="" Button label

Button Groups

[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]
NOTE: You can specify the same attrbutes as the button above, but placed into the markup instead of the shortcode.

Accordion no it won't play music, but it will organize stuffs

Content 1
[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]
Attribute Description
pl_accordion name= Serves as the ID(#) of the accordion. To have multiple accordions, specify different names.
pl_accordioncontent name= This content name must match the accordion name
number="" Indicates the order the content sections are displayed
heading="" Serves as the title of the tab
open="" Indicates whether or not the tab should be opened by default

Note: You may find that Wordpress inserts line-breaks when using Shortcodes on different lines, as in our example here. To prevent this from ruining your day, wrap problematic shortcodes in RAW. Example: PageLines RAW Shortcode

Labels & Badges for when you forget your name

Label Usage Notes
Default
[pl_label type="default"]Default[/pl_label]
Available attributes include default, success, warning, important, info, and inverse
Success
[pl_label type="success"]Success[/pl_label]
Warning
[pl_label type="warning"]Warning[/pl_label]
Important
[pl_label type="important"]Important[/pl_label]
Info
[pl_label type="info"]Info[/pl_label]
Inverse
[pl_label type="inverse"]Inverse[/pl_label]
Badge Usage Notes
Default
[pl_badge type="default"]Default[/pl_badge]
Available attributes include default, success, warning, important, info, and inverse
Success
[pl_badge type="success"]Success[/pl_badge]
Warning
[pl_badge type="warning"]Warning[/pl_badge]
Important
[pl_badge type="important"]Important[/pl_badge]
Info
[pl_badge type="info"]Info[/pl_badge]
Inverse
[pl_badge type="inverse"]Inverse[/pl_badge]

Tooltips & Popovers to provide emphasis or metaphorical moon pies

This is a tooltip example.
This is a [pl_tooltip tip="Cool" position="right"]tooltip [/pl_tooltip] example.
Attribute Description
tip="" This is what's displayed inside the tip.
position="" Specifies the location of the tooltip. top,left,bottom,and right
This is a popover example.
This is a [pl_popover title="Title" content="..." position="right"]popover[/pl_popover] example.
position="" Specifies the location of the popover. top,left,bottom,and right
title="" Specifies the title of the popover.
content="" Specifies the content inside of the popover.

Maps for when you lose your way

[googlemap width="100%" height="300" address="San Francisco,CA"]
width="" Width of embedded map, in pixels or percent
height="" Height of embedded map, in pixels or percent
address="" Address of location.

Charts for when you want to show some charts and stuffs

Traffic Sources
[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"]
size="" Specifies the size of the chart
bg="" Background color of chart
title="" Title of chart
labels="" Data labels, comma separated
advanced="" For l33t
type="" Type of chart: line, xyline, sparkline, meter, scatter, venn, pie, pie2d
data="" Data, separated between commas
colors="" Specifies the color of the data

Responsive Videos because static is just boring

[pl_video type="vimeo" id="42811051"]
Attribute Description
type="" Available types include youtube, and vimeo
id="" ID of the video. See below for an example
Vimeo Video ID
Vimeo Video ID
YouTube Video ID
YouTube 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

@pl-text Body text color
@pl-link Link text color
@pl-header Heading color
@plHeaderFont Heading font family
@plHeaderWeight Heading font weight
@pl-footer Footer text color
@font-size Default font size
@line-height Default line height
@plBaseFont Font family
@plBaseWeight Font weight
@plAltFont Alternative font
@plAltWeight Alternative font weight

Layout Variables

@pl-base Page background color
@pl-page-width User set page width
@pl-content-width Uset set content width
@pl-responsive-width User set responsive width
@pl-sidebar-width User set sidebar width
@pl-secondary-width User set secondary sidebar width
Note:These variables are set dynamically by the user under Layout Settings, and are helpful for layout out pages manually, or for applying to certain elements in a child theme. It's worth noting, that if a page is set to full width, the following variable @pl-sidebar-width will not return anything.

Theme & Section Variables

@{plChildRoot} Used to specify root Child theme URL
@{plRoot} Used to set Parent theme dir
@{plSectionsRoot} Used to specify /sections dir
@{plExtendRoot} Used to specify section root in pagelines-sections plugin
@{plPluginsRoot} Used to specify base plugin path directory

Example Uses

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

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

Learn how to theme like a boss.

Mixins

Mixins are the coolest thing since sliced bread. I mean jeez sliced bread is just so awesome but mixins are the secret sauce that makes LESS worth learning on the real.
Border Radius .border-radius();
Box Shadow .box-shadow();
Box Sizing .box-sizing();
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;
}

Themes/Plugins & LESS

Child themes automatically load any style.less file in root, while plugins need only a filter. To the right, custom LESS used with a plugin.
add_action( 'template_redirect', 'my_plugin_less' );
function my_plugin_less() {
$file = sprintf( '%sstyle.less', plugin_dir_path( __FILE__ ) );
pagelines_insert_core_less( $file );
}

Develop stuff, get paid like a boss.

What's the grid thing?

PageLines Framework encompasses a completely responsive grid system that contains 12 columns, or "spans."

Where do I use it?

The grid can be used virtually anywhere. Mark it up in a post, in a page, or wherever you need structured, responsive content.
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 4
Span 4
Span 4
Span 4
Span 8
Span 6
Span 6
Span 12

Basic Example

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

Nested Example

<div class="row"></div>
Span 4
Span 8
Span 6
Span 6
Note:.zmb is a special PageLines utility class that you can use to specify a zero margin on top.zmt , or on bottom .zmb of any element giving you full control. Read more about these utility classes below.

Fluid Offsets

<div class="row"></div>
Span 6
Span 6 Offset 6

CSS Classes

These pre-designed special CSS classes can be added to nearly any element to help aid in customizing.
.zmt Specifies zero margin on top of any element
.zmb Specifies zero margin on bottom of any element
.center,.tac Aligns elements to center
.pl-imageframe Add to img element, produces pretty frame
.img-rounded Add to img element, produces curved corners
.img-circle Add to img element, produces circle image
.img-polaroid Add to img element, produces framed image

HTML Snips

With minimal markup you can instantly have a styled page heading you'll be so proud of, you just might invite her to meet your parents.
<div class="page-header">
<h2>Utilities <small>CSS classes and HTML snips to enhance and extend your creations</small></h2>
</div>

Note:You can also specify a class of .page-header-minor ,which will return a page heading with approximately half the scale as a 50ft woman.

CSS Classes

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>

This entire demo was built using only the framework. No magic voodoo, and very little custom CSS. In fact, we invite you to see for yourself. Import the .dat file into PageLines--->Account, and import the .xml file into Wordpress under Tools--->Import.

Download the goods

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

1 Download settings file (.dat)
2 Download content file (.xml)
3 Import into Wordpress
4 Have a beer

Get PageLines Framework Now →