1. Check out this week's build competition!
    http://craftblock.me/this-weeks-theme
    Dismiss Notice

Custom Markup & Styles

Mar 18, 2016
Custom Markup & Styles
  • Hi! This is just a wiki for us staff to use to help us create threads and wiki pages!



    StyleBox (top)

    A StyleBox is a set of rows which allows you to float content left and right. Great for galleries and content that has pictures. Here's an example:

    Example(top)

    This is a right column box.
    This is the left column.
    This is the left column.
    This is the right column.
    This is the right column. Left has a video!

    Markup(top)

    <div class="stylebox extra"> <section class="boxgroup"> <div class="colbox"><img src="http://IMGURLHERE.png" class="colboximg"> </div> <div class="colboxt">This is a right column box.</div> </section> <section class="boxgroup"> <div class="colboxx">This is the left column.</diV> <div class="colbox"><img src="http://IMGURLHERE.png" class="colboximg-full"> </div> </section> <section class="boxgroup"> <div class="colbox left">This is the left column.</div> <div class="colbox right">This is the right column.</div> </section> </div>

    Using(top)

    • The "extra" class on the "stylebox" element" gives the odd set of rows a background color.
    • "boxgroup" class is required for each row.
    • The image requires "colboximg" class, if the image is too big, add "-full" to the class. "colboximg-full".
    • For video, which is only tested with an YouTube embed, just paste the embed and modify the "width" value to "100%".
    • Make sure the content is switched to HTML.
  • Loading...
  • Loading...
Xomee likes this.