Style Tester

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

 

Soem Weaver shortcodes…

[box]here is a weaver shortcode box

Shortcode: [box] – Wrap Content in a Box

Shortcode Usage: [ box align=left background=#fff border=true border_rule='border-css' border_radius=4 color=#000 margin=1 padding=1 shadow=1 style='style-rules']text[/box]

  1. align=align: Leave blank, or specify left, center, or right for alignment of box within surrounding text.
  2. border=true: True is default. Specify false or 0 for no borders.
  3. border_rule=’1px solid black‘: Specify a compound border CSS value to replace the default ‘1px solid black’.
  4. border_radius=4: Default is none – specify a px value for the corner radius if you want rounded corners.
  5. color=#000: Default is inherit – specify a valid color for the color of the text in the box.
  6. background=#fff: Default is inherit – specify color for box background color.
  7. margin=1: Default is 0 – specify an ’em’ value for margin around the box. Using a margin overrides align parameter.
  8. padding=1: Default 1 – specify an ’em’ value for padding inside box.
  9. shadow=0: Default 0 – specify a value from 1 to 5 for a border around the box.
  10. style=inline-style: any additional custom styling for the box
  11. width=100: A percentage width for the box within its surrounding container.
[/box] [tab_group] – Display content in a tabbed box.

Tab Group shortcode: Different Styles & Behavior

has a sample style sheet

[tab_group border_color=black page_min_height=200px]
[tab title='tab one']This is the content found on first tab.[/tab]
[tab title='tab two']And we have more content for the second tab.[/tab]
[tab title='last tab']And this is the last tab. There could be more.[/tab]
[/tab_group]

– Show your YouTube videos responsively, and with the capability to use any of the YouTube custom display options.
– Show your Vimeo videos responsively, and with the capability to use any of the Vimeo custom display options.

Shortcode: [youtube] / [vimeo] – Show Video

 

[iframe] – Quick and easy display of content in an iframe.
[div], [span], [html] – Add div, span, and other html to pages/posts without the need to switch to Text view.
[hide/show_if] – Show or hide content depending upon options: device, page ID, user capability, logged in status.
[bloginfo] – Display any information available from WordPress bloginfo function.
[user_can] – Display content base on logged in user role.
[site_title] – Display Site title.
[site_tagline] – Display Site tag line.

Responsive Columns and Widgets

Can also Show/hide content based on these parameters.

Parameters

‘device’ => ‘default’, // desktop, mobile, smalltablet, phone, all
‘logged_in’ => ‘default’, // true or false
‘not_post_id’ => ‘default’, // comma separated list of post IDs (includes pages, too)
‘post_id’ => ‘default’, // comma separated list
‘user_can’ => ‘default’ // http://codex.wordpress.org/Function_Reference/current_user_can

Shortcode: [show_if]/[hide_if] – Selectively Display Content

 

here is a lightbox
thumbnail

Text aligned left. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text aligned center. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text aligned right. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

here is a lightbox added via shortcode

[lightbox src=”https://www.cnn.com”][button] Click Here to Watch the Video [/button][/lightbox]

Below is just about every HTML element you might want to use in your blog posts. Check the source code to see the many embedded elements within paragraphs.

Wrap content in a box.

Shortcode Usage: [ box align=left background=#fff border=true border_rule='border-css' border_radius=4 color=#000 margin=1 padding=1 shadow=1 style='style-rules']text[/box]

  1. align=align: Leave blank, or specify left, center, or right for alignment of box within surrounding text.
  2. border=true: True is default. Specify false or 0 for no borders.
  3. border_rule=’1px solid black‘: Specify a compound border CSS value to replace the default ‘1px solid black’.
  4. border_radius=4: Default is none – specify a px value for the corner radius if you want rounded corners.
  5. color=#000: Default is inherit – specify a valid color for the color of the text in the box.
  6. background=#fff: Default is inherit – specify color for box background color.
  7. margin=1: Default is 0 – specify an ’em’ value for margin around the box. Using a margin overrides align parameter.
  8. padding=1: Default 1 – specify an ’em’ value for padding inside box.
  9. shadow=0: Default 0 – specify a value from 1 to 5 for a border around the box.
  10. style=inline-style: any additional custom styling for the box
  11. width=100: A percentage width for the box within its surrounding container.

 

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. HTML and CSS are our tools. Mauris a ante.

This is the beginning of a new paragraph. [tooltip title=”Sample Tooltip Shortcode” content=”This should show a yellow Tooltip generated by a WP shortcode that appears during mouseover hover.”][button] Hover me to open tooltip generated by a WP shortcode. [/button][/tooltip]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.And this is where it ends.

Alt Text for Test Image
Caption for test image 213×300

This is just body text, with no paragraph tag at the begining or end. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename.

Dinner’s at 5:00.Let’s make that 7.

This text has been struck.

List Types

Definition List

Definition List Title
This is a definition list division.
Definition
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

Table

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Preformatted Text

Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. For example:

“Beware the Jabberwock, my son!
    The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
    The frumious Bandersnatch!”

Code

Code can be presented inline within a <pre> block.

#container { float: left; margin: 0 -240px 0 0; width: 100%; }

And now for a horizontal rule.

Here is new body text without a Paragraph tag to define it. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Here is a More page break coming up after this sentence.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

And the following is an embedded youtube video of the first lady which sits inside its own DIV by default. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blockquotes

Let’s keep it simple.

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you. — Blog

And here’s a bit of trailing text.

Shortcode: [tab_group] – content in tabs

[tab_group border_color=black page_min_height=200px]
[tab title='tab one']This is the content found on first tab.[/tab]
[tab title='tab two']And we have more content for the second tab.[/tab]
[tab title='last tab']And this is the last tab. There could be more.[/tab]
[/tab_group]