There are many different styles of boxes and text containers you can use to display content on your site. Below are examples of the different methods and options.
[hr]Quote Boxes
Show a quote from a customer or partner including an image and cite the author using the [quote] shortcode.
We Doubled Our Sales!
With their help we increased our output and grew our average awesomeness. Don’t wait, you can be more awesome too![/quote]
[code][quote author=”Robert Allen, WebTech.com” image=”http://yoursite.com/image.jpg” w=”200″ h=”120″ image_align=”left”] <h4>We Doubled Our Profits!</h4>With their help we increased our output and grew our average awesomeness. Don’t wait, you can be more awesome too!
[/quote][/code]
Parameters
- author
- (string) (Optional) Author or credited source of the quote.
- image
- (string) (Optional) The image path or ID of a media file to use.
- w
- (int) (Optional) The width of the image.
- h
- (int) (Optional) The height of the image.
- style
- (string) (Optional) Display the information horizontal or vertical. Values: wide (default), tall.
Examples
Horizontal (style=”wide”)
[quote author=”Malcolm Reynolds, Firefly Inc.” image=”3901″ w=”265″ h=”150″]
I came looking for you!
I’ve staked my crew’s life on the theory that you’re a person, actual and whole, and if I’m wrong, you’d best shoot me now… [/quote]
[code][quote author=”Malcolm Reynolds, Firefly Inc.” image=”3901″ w=”265″ h=”150″]<h4>I came looking for you!</h4>I’ve staked my crew’s life on the theory that you’re a person, actual and whole, and if I’m wrong, you’d best shoot me now… [/quote][/code]Vertical (style=”tall”)
We’ve reinvented our business.
I told them what I needed for my website and they made it happen. This theme rocks![/quote]
This is what you want!
Get on a jet to Tokyo and ask the Chairman. I’m telling you.[/quote]
An example of a vertical quote box by setting the style parameter to “tall”, for example: style="tall".
Pull Quote
Show a pull quote within a paragraph, article or section of text.
[code][pull_quote]Your quoted text.[/pull_quote][/code]Parameters
- align
- (string) (Optional) The position of the quote: left, right.
Samples of Pull Quote Usage
Pull quote aligned right
You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the space craft encounters a black hole does the computer call it an unknown entry event? [pull_quote align=”right”]You think water moves fast? You should see ice. It moves like it has a mind of it’s own.[/pull_quote] Why don’t they know? If they don’t know, that means we never told anyone about it. And if we never told anyone it means we never made it out. Hence we die down here. Just as a matter of deductive logic.
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us more than a week just to climb out. Now, I don’t know exactly when we turned on each other, but I do know that seven of us survived the slide… and only five made it out. Now we took an oath, that I’m breaking now. We said we’d say it was the snow that killed the other two, but it wasn’t. Nature is lethal but it doesn’t hold a candle to man.
Pull quote aligned left
The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a single faulty enzyme in protein metabolism. The animals can’t manufacture the amino acid lysine. Unless they’re continually supplied with lysine by us, they’ll slip into a coma and die.
Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. [pull_quote align=”left”]It’s curious. Ted did figure it out – time travel.[/pull_quote]Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing.
You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an ‘unknown entry event’? Why don’t they know? If they don’t know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.
[hr]
Dropcap
Show a dropcap for a block of paragraph text.
[code][dropcap color=”#415D9C”]D[/dropcap][/code]Parameters
- color
- (string) (Optional) An optional color for the dropcap. Accepts any valid CSS color value.
Example Dropcap Usage
Standard dropcap usage.
[dropcap]D[/dropcap]You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an ‘unknown entry event’? Why don’t they know? If they don’t know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.
The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a single faulty enzyme in protein metabolism. The animals can’t manufacture the amino acid lysine. Unless they’re continually supplied with lysine by us, they’ll slip into a coma and die.
Created with shortcode: [dropcap]D[/dropcap]
Dropcap with a custom color
[dropcap color=”#415D9C”]D[/dropcap]You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an ‘unknown entry event’? Why don’t they know? If they don’t know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.
The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a single faulty enzyme in protein metabolism. The animals can’t manufacture the amino acid lysine. Unless they’re continually supplied with lysine by us, they’ll slip into a coma and die.
Created with shortcode: [dropcap color="#415D9C"]D[/dropcap]
[hr]
Text Boxes (icon boxes)
The text box shortcode lets you add a block of text with a title and optional icon. The fonts in a text box are slightly larger than the default body fonts to make them stand out.
[code][text_box title=”My Title”]Your message text.[/text_box][/code]Parameters
- title
- (string) (Optional) The main headline text.
- icon
- (string) The image icon. The “icon-” prefix can optionally be omitted for this shortcode.
- See all icons
- Custom: You can set the icon value to “custom” if you wish to specify a custom image file as the icon. The theme includes a small set of custom icons as an example usage of this method.
- custom
- (string) (Optional) The path to a custom icon file.
Samples
Standard Text Box
[text_box title=”A Simple Text Box (no icon)”]You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an ‘unknown entry event’? Why don’t they know? If they don’t know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.[/text_box] [code][text_box title=”A Simple Text Box”]You see? It’s curious. Ted did figure it out…[/text_box][/code]
Text Boxes with Default Icons
The examples below use column containers to create a 2 column layout of text boxes. An example of the code used is at the bottom of the list.
A lot more icons to choose from…
This is only a small sampling. For a complete list of icons available see the full icon list .
[code][one_half][text_box title=”A Set of Text Boxs with Icons” icon=”icon-calendar”]
The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism.
[/text_box]
[/one_half]
[one_half_last]
[text_box title=”A Set of Text Boxs with Icons” icon=”icon-info-sign”]
The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism.
[/text_box]
[/one_half_last]
[clear][/code]
Text Boxes with Custom Icons
A series of custom icons are included with the theme to demonstrate this method. Below are examples of inserting a custom icon into a [text_box] shortcode. There are more code samples at the bottom of the section.
Custom Icon List
A small set of custom icons by Pixeden are included with the theme. The custom icon files are located in the theme folder: assets/images/icons/pixeden
- archive.png
- back.png
- basket.png
- blog.png
- camera.png
- card.png
- cash.png
- cd.png
- certificate.png
- clock.png
- cloud1.png
- cloud2.png
- cloud3.png
- cloud4.png
- config.png
- configuration2.png
- date.png
- delivery1.png
- delivery2.png
- disckette.png
- file1.png
- file2.png
- file3.png
- file4.png
- flag.png
- folder.png
- gamepad.png
- garbage.png
- gift.png
- help.png
- home.png
- key.png
- less.png
- letter.png
- letters.png
- light.png
- lock.png
- love.png
- mail.png
- monitor.png
- music.png
- note.png
- notepad.png
- ok.png
- openmail.png
- package.png
- pencil.png
- phone.png
- picture.png
- pin.png
- plus.png
- print.png
- sound.png
- suitcase.png
- tag.png
- ticket.png
- tool.png
- unlock.png
- user.png
- wallet.png
- warning.png
- way.png
- zoom.png
[/bullet_list] [/toggle]
[code][one_half]
[text_box title=”Custom: Home Icon” icon=”custom” custom=”/wp-content/themes/parallelus-razor/assets/images/icons/pixeden/home.png”]
The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a single faulty enzyme in protein metabolism.
[/text_box]
[/one_half]
[one_half_last]
[text_box title=”Custom: Basket Icon” icon=”custom” custom=”/wp-content/themes/parallelus-razor/assets/images/icons/pixeden/basket.png”]
The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a single faulty enzyme in protein metabolism.
[/text_box]
[/one_half_last]
[clear][/code] [hr]
Call to Action
The “Call to Action” shortcode is designed to draw attention to a headline and button.
[code][call_to_action title=”Your message text.”][/code]Parameters
- title
- (string) (Optional) The main headline text.
- tag_line
- (string) (Optional) The supporting “sub-title” text.
- button
- (string) (Optional) Text to show on the button. If excluded the button will not appear.
- link
- (string) (Optional) The URL of the link to use with the button.
Examples
[call_to_action title=”Call to Action with a Button…” button=”Button Text” link=”JavaScript:alert(‘Woohoo!’);”] [code][call_to_action title=”Call to Action with a Button…” button=”Button Text” link=”JavaScript:alert(‘Woohoo!’);”][/code][call_to_action title=”Call to Action with a Tagline…” tag_line=”This is the tagline text below the title.” button=”Button Text” link=”JavaScript:alert(‘Here we go!’);”] [code][call_to_action title=”Call to Action with a Tagline…” tag_line=”This is the tagline text below the title.” button=”Button Text” link=”JavaScript:alert(‘Here we go!’);”][/code] [hr]
Message Boxes
Message boxes for information and drawing attention to content.
[code][message_box]Your message text.[/message_box][/code]Parameters
- type
- (string) (Optional) Type of message box.
- Values: note, info, alert, error, success, inset
- icon
- (string) (Optional) Show icon associated with the selected box type. You can specify a custom icon or just set the value to “Yes” and the icon specific to the style box will be used. See all icons . Do not include this option if an icon is not desired.
- color
- (string) (Optional) A custom color to use for the box text. Any CSS color value can be used.
- background
- (string) (Optional) A custom background color to use for the box. Any CSS color value can be used.
- close
- (string) (Optional) Add a close button to the box. The text entered will be used as the button text.
Standard Examples
[message_box]A standard message box[/message_box][message_box]A standard message box[/message_box]
[message_box type=”note” icon=”yes” close=”Hide”]A note message box.[/message_box]
[message_box type="note" icon="yes" close="Hide"]A note message box.[/message_box]
[message_box type=”info” icon=”yes” close=”Hide”]An information message box.[/message_box]
[message_box type="info" icon="yes" close="Hide"]Info message.[/message_box]
[message_box type=”alert” icon=”yes” close=”Hide”]An alert message box.[/message_box]
[message_box type="alert" icon="yes" close="Hide"]Alert message.[/message_box]
[message_box type=”error” icon=”yes” close=”Hide”]An error message box.[/message_box]
[message_box type="error" icon="yes" close="Hide"]Error message.[/message_box]
[message_box type=”success” icon=”yes” close=”Hide”]A success message box.[/message_box]
[message_box type="success" icon="yes" close="Hide"]Success message.[/message_box]
Custom Examples
[message_box icon=”icon-heart” background=”#FF0066″]A message box with custom colors and icons.[/message_box][message_box icon="icon-heart" background="#FF0066"]Custom message box.[/message_box]
[message_box icon=”icon-asterisk” background=”#556270″]A message box with custom colors and icons.[/message_box]
[message_box icon="icon-asterisk" background="#556270"]Custom message box.[/message_box]
[message_box icon=”icon-shopping-cart” background=”#7FAF1B”]A message box with custom colors and icons.[/message_box]
[message_box icon="icon-shopping-cart" background="#7FAF1B"]Custom message box.[/message_box]
[message_box icon=”icon-question-sign” background=”#00B4FF”]A message box with custom colors and icons.[/message_box]
[message_box icon="icon-question-sign" background="#00B4FF"]Custom message box.[/message_box]
[message_box icon=”icon-beaker” background=”#FF5EAA”]A message box with custom colors and icons.[/message_box]
[message_box icon="icon-beaker" background="#FF5EAA"]Custom message box.[/message_box]