[teaser]In this theme there is a few types of specialty box shortcodes. The general box, alert/attention boxes, and color boxes. Alert boxes and color boxes are great shortcodes that can come in very handy. But the general box shortcode is one of the most powerful in the theme. It can be used to wrap nearly any other shortcodes/content and display that content on a white background with padding and a border. Most other shortcodes are specially designed to work properly inside and outside of a boxed area, and even change coloring a bit to match properly. Basically it takes all the things you can do in this theme and doubles their variations in one easy step![/teaser] [line] [h4]GENERAL “BOX” SHORTCODE[/h4] [column_one_half] This is a normal paragraph in a half width column. Text areas are important, and little normal ones like this will be the workhorse of your website. But what do you do if you have a particular column that needs a little emphasis? Use a box! Just put the content inside of a box shortcode element and it’s instant emphasis. [/column_one_half] [column_one_half]
This is the same idea but put inside a box shortcode. It seems simple, but you’ll find you can box almost anything and it really can create a lot of variance and options for your design!
[/column_one_half] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][column_one_half][/code_line] [code_line]Text text text.[/code_line] [code_line][/column_one_half][/code_line] [blank_code_line] [code_line][column_one_half][/code_line] [code_line]
Text text text.
[/code_line] [code_line][/column_one_half][/code_line] [/code_table] [/toggle_box] [line] [column_one_half] [h5]No Box:[/h5] [vimeo_video height=”250″ autoplay=”no”]http://vimeo.com/10984298[/vimeo_video] [/column_one_half] [column_one_half] [h5]Boxed In[/h5]
[vimeo_video height=”220″ autoplay=”no”]http://vimeo.com/10984298[/vimeo_video]
[/column_one_half] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][column_one_half][/code_line] [code_line][h6]NO BOX:[/h6][/code_line] [code_line][vimeo_video height=”250″ autoplay=”no”]http://vimeo.com/10984298[/vimeo_video][/code_line] [code_line][/column_one_half][/code_line] [blank_code_line] [code_line][column_one_half][/code_line] [code_line][h6]BOXED IN:[/h6][/code_line] [code_line]
[vimeo_video height=”220″ autoplay=”no”]http://vimeo.com/10984298[/vimeo_video]
[/code_line] [code_line][/column_one_half][/code_line] [/code_table] [/toggle_box] [spacer_20] [line] [h4]ATTENTION/ALERT BOXES[/h4] [info_box]Info box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/info_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][info_box][/code_line] [code_line]Text text text.[/code_line] [code_line][/info_box][/code_line] [/code_table] [/toggle_box] [line] [warning_box]Warning box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/warning_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][warning_box][/code_line] [code_line]Text text text.[/code_line] [code_line][/warning_box][/code_line] [/code_table] [/toggle_box] [line] [attention_box]Attention box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/attention_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][attention_box][/code_line] [code_line]Text text text.[/code_line] [code_line][/attention_box][/code_line] [/code_table] [/toggle_box] [line] [error_box]Error box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/error_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][error_box][/code_line] [code_line]Text text text.[/code_line] [code_line][/error_box][/code_line] [/code_table] [/toggle_box] [line] [restricted_box]Restricted box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/restricted_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][restricted_box][/code_line] [code_line]Text text text.[/code_line] [code_line][/restricted_box][/code_line] [/code_table] [/toggle_box] [line] [download_box]Download box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/download_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][download_box][/code_line] [code_line]Text text text.[/code_line] [code_line][/download_box][/code_line] [/code_table] [/toggle_box] [line] [exit_box]Exit box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/exit_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][exit_box][/code_line] [code_line]Text text text.[/code_line] [code_line][/exit_box][/code_line] [/code_table] [/toggle_box] [line] [qa_box] [qa_question] Question text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. [/qa_question] [qa_answer] Answer text. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. [/qa_answer] [/qa_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][qa_box][/code_line] [code_line][qa_question]Question text…[/qa_question][/code_line] [code_line][qa_answer]Answer text…[/qa_answer][/code_line] [code_line][/qa_box][/code_line] [/code_table] [/toggle_box] [line] [spacer_20] [teaser]There’s also custom alert box shortcodes where you can insert your own icon/graphic![/teaser] [spacer_20] [line] [h4]COLOR BOXES:[/h4] [color_box color=”red” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”red” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”maroon” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”maroon” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”orange” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”orange” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”yellow” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”yellow” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”green” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”green” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”olive” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”olive” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”teal” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”teal” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”blue” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”blue” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”navy” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”navy” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”purple” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”purple” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”stone” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”stone” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”cream” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”cream” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”grey” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”grey” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”dark” textcolor=”white”]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”dark” textcolor=”white”]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box] [line] [color_box color=”#000″ textcolor=”#999″]This is a color_box shortcode. It is not quite as versatile as a general box, but you can control the color of the box and the text. It has all the same color options as buttons, including the custom hex color ability.[/color_box] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][color_box color=”#000″ textcolor=”#999″]Text text text.[/color_box][/code_line] [/code_table] [/toggle_box]

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Leave a Reply

Your email address will not be published. Required fields are marked *