Well, these really aren’t “shortcodes” in the traditional WordPress sense. They are CSS components built directly into our themes that you can use to beef up the look of your content. Most of them come from Bootstrap, but we have added color swatches that you can use for full-width colored sections and a couple of cool additional buttons. Color Swatches These color swatches are all based on the “Flat UI” kit from designmodo, although we’ve renamed their esoteric color names to things that should be easier to remember. bg-white #fff bg-offwhite #f2f2f2 bg-lightgray #ebebeb bg-gray #e7e7e7 bg-darkgray #e0e0e0 bg-lightgreen #1abc9c bg-darkgreen #16a085 bg-brightgreen #2ecc71 bg-darkbrightgreen #27AE60 bg-blue #3498db bg-darkblue #2980b9 bg-purple #9B59B6 bg-darkpurple #8E44AD bg-midnightblue #34495e bg-darkmidnightblue #2C3E50 bg-yellow #f1c40f bg-lightorange #F39C12 bg-orange #E67E22 bg-darkorange #D35400 bg-red #ff7878 bg-brightred #E74C3C bg-darkred #C0392B bg-almostblack #2f2f2f bg-notquiteblack #222 bg-black #000 <div class="section bg-darkgreen centered">bg-darkgreen</div> Note that you can also use these colors for text as well. Just use the prefix ‘color-‘ instead of ‘bg-‘. For example, this text is in color-blue. <span class="color-blue">this text is in color-blue</span> Text Alignment Of course WordPress has left, center, and right alignment that you can choose from the Visual Editor and that’s the easiest way to do it. However, because this theme is based on Bootstrap, there are some additional ones. Left aligned text Center aligned text Right aligned text Justified text. 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. <p class="alignleft">Left aligned text</p> or <p class="text-left">Left aligned text</p> <p class="aligncenter">Center aligned text</p> or <p class="text-center">Center aligned text</p> <p class="alignright">Right aligned text</p> or <p class="text-right">Right aligned text</p> <p class="text-justify">Justified text</p> Text Transformation Transform text in components with text capitalization classes. These are especially useful in our themes, either to add capitalization or remove it from themes like Spot that automatically capitalize certain headings. LOWERCASED TEXT uppercased text capitalized text <p class="text-lowercase">LOWERCASED TEXT</p> <p class="text-uppercase">uppercased text</p> <p class="text-capitalize">capitalized text</p> Buttons, Buttons, and More Buttons btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link btn-lg (default) btn-small btn-xs <a href="#" class="btn btn-primary">btn-primary</a> Progress Bars Standard (progress-bars) 30% Complete (default) 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete Striped (progress-striped) 30% Complete (default) 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete (danger) Animated (progress-bar-striped active) 45% Complete Stacked (all in same “progress” div) 35% Complete (success) 20% Complete (warning) 10% Complete (danger) <div class="progress-bar progress-bar-success" style="width: 40%;" role="progressbar"><span class="sr-only">40% Complete (success)</span></div> Tabbed Content Home Profile Messages Settings This is some text related to home. Sed platea nunc class dictum risus semper facilisi tempus nisl placerat eget arcu suscipit. Fames pede primis purus nostra elementum dictum fames gravida curae; cum. Mollis sollicitudin felis arcu bibendum. Accumsan conubia. Taciti tristique class ipsum. Urna ante primis penatibus rutrum ultrices fringilla libero fames ipsum non eros cras. Sed dapibus porta scelerisque faucibus Tincidunt ipsum litora tincidunt justo facilisis. Turpis, leo fringilla laoreet. Tristique commodo tempor duis. Facilisis integer, blandit pretium nascetur pulvinar. Tristique ad laoreet. Natoque fermentum lacus. Donec ornare fermentum nostra sit. Fringilla Sollicitudin. Neque. In taciti penatibus lobortis suspendisse vivamus non at egestas sodales. Cubilia lacinia. This is some text related to profile. Rutrum magna nonummy ullamcorper dis facilisis elementum. Per Sodales luctus commodo orci lacinia pharetra consequat elit vestibulum nam blandit primis. Malesuada quis primis phasellus eget praesent est montes imperdiet mattis habitasse hymenaeos. Amet mus condimentum aliquet consectetuer. Tempor eget pulvinar aliquet penatibus ante tristique justo odio. Odio magna torquent, nostra donec interdum eget lobortis nonummy conubia potenti dictumst sagittis nulla. This is some text related to message. Adipiscing vivamus vivamus mattis sed quis curabitur sit hac aenean. Porta neque viverra cras, ante lobortis velit ligula nunc ullamcorper. Eget condimentum ut, pellentesque rutrum ornare class interdum dictum id arcu mattis nullam Nullam morbi. Arcu suspendisse Cras. Non. Ad augue tempor semper mus potenti sagittis imperdiet Tincidunt donec vivamus. This is some text related to settings. Mus. Litora mi eros. Enim lectus. Neque quisque dapibus dui nunc phasellus Netus. Viverra ultrices morbi morbi mi varius, vehicula aliquet ac dictumst tincidunt porttitor Eleifend amet sem. Praesent elit nec facilisis pharetra. Faucibus aliquam. Blandit netus cras amet. Lobortis. Phasellus blandit porttitor velit dictumst ullamcorper pulvinar hendrerit montes ultricies rhoncus commodo nullam cras mi leo pellentesque sit sed. Nostra donec rhoncus eleifend mattis ultrices magnis consequat vivamus sodales montes. <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> ... </ul> <div class="tab-content"> <div class="tab-pane active" id="home">This is some text related to <b>home</b>.</div> <div class="tab-pane" id="profile">This is some text related to <b>profile</b>.</div> ... </div> Collapsible Content Panels Collapsible Group Item #1 + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS. Collapsible Group Item #2 + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS. Collapsible Group Item #3 + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS. <div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Collapsible Group Item #1 + </a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">Collapsible Group Item #2 + </a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">Collapsible Group Item #3 + </a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> </div> Alerts This is the text for the alert (alert-primary) This is the text for the alert (alert-success) This is the text for the alert (alert-info) This is the text for the alert (alert-warning) This is the text for the alert (alert-danger) <div class="alert alert-primary">This is the text for the alert (alert-primary)</div> Panels Default Panel (panel-default) Panel content Primary Panel (panel-primary) Panel content Success Panel (panel-success) Panel content Info Panel (panel-info) Panel content Warning Panel (panel-warning) Panel content Danger Panel (panel-danger) Panel content <div class="panel panel-primary"> <div class="panel-heading"><h3 class="panel-title">Primary Panel (panel-primary)</h3></div> <div class="panel-body">Panel content</div> </div> Share this:Click to share on Facebook (Opens in new window)Click to share on Twitter (Opens in new window)Click to share on Reddit (Opens in new window)Click to share on LinkedIn (Opens in new window)
Como utilizo nesse tema essa função “Full-width Image Just add h1 and h2 tags in the caption” mencionada acima? Parabéns pelo seu tema! Log in to Reply
As I use in this theme this function “Full-width Image Just add h1 and h2 tags in the caption “mentioned above? Congratulations on your theme! Log in to Reply
What does “quicktags” mean? [fullwidth][/fullwidth], or ? “This theme includes two “quick tags” in the WordPress HTML editor to add a normal full-width sections or a special “header” section that has a thick bottom border. You just need to make sure you are in Text mode instead of Visual mode in the editor. The quicktags are as follows: fullwidth – For use in a full-width page template or fullwidth article. Inserts a section and container for your content. Default color is offwhite, but you can change it to any of our included colored backgrounds.” Log in to Reply
If you set a page to any of the included fullwidth page templates, then you need to handle putting your text into a Bootstrap “container”. This is so you can add a colored section that fills the entire width of the page, but then contain the content of that section so there is proper margins on the left and right. For example, let’s say we want a full-width blue section on our page. We can do it like this: <div class="section bg-blue"> <div class="container">> Our text and other content goes here and has proper margins on it. </div> </div> These “quicktags”, just insert HTML similar to above for you so you don’t have to type it all. Log in to Reply
I noticed you recommend Agnosia Bootstrap Carousel by AuSoft, does that mean JavaScript Carousel component is not included with the theme by default? If its not included how complicated would it be for a novice to add it and/or other components not included in the theme? Log in to Reply
You can do anything with the theme that Bootstrap can do, even without plugins. You have to paste in the HTML samples and edit it. Carousels are covered here: http://getbootstrap.com/javascript/ Log in to Reply
Hi, Elana. I think its a good idea for me to post the code blocks right after each example. In the meantime, every “shortcode” except the color palette is standard Bootstrap HTML. You can see how to code any of the “shortcodes” here: http://getbootstrap.com/components/ Log in to Reply
interesting theme, but to use it it would have been great to have more “educational” instruction. e.g. code examples for each “shortcode” Log in to Reply