Focus Boxes

Focus Boxes are like quotes within your content that brings attention to specific subject matter, whether it’s for information, a warning, or anything you want it to be. In this page you see a couple colours where the grey is the default colour but I added a custom green colour by adding inline styling like this:

<div class="st_focus-box" style="border-top-color: #99cc6a;"> 

 

Your theme download will contain an “extras” folder which contains html snippets to give you the styles you see below. All you have to do is simply copy & paste into your page or post and make any style changes you want.

This is a Focus Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus. Vivamus interdum condimentum posuere. Aliquam sollicitudin cursus tellus eu tempus. Maecenas a dolor libero. Phasellus malesuada nunc ipsum, nec placerat arcu.

This is a Focus Box Custom Colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus. Vivamus interdum condimentum posuere. Aliquam sollicitudin cursus tellus eu tempus. Maecenas a dolor libero. Phasellus malesuada nunc ipsum, nec placerat arcu.

This is a Focus Box with Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus. Vivamus interdum condimentum posuere. Aliquam sollicitudin cursus tellus eu tempus. Maecenas a dolor libero. Phasellus malesuada nunc ipsum, nec placerat arcu.

This is a Focus Box with Shadow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus. Vivamus interdum condimentum posuere. Aliquam sollicitudin cursus tellus eu tempus. Maecenas a dolor libero. Phasellus malesuada nunc ipsum, nec placerat arcu.

This is a Focus Box Centered

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus. Vivamus interdum condimentum posuere. Aliquam sollicitudin cursus tellus eu tempus. Maecenas a dolor libero. Phasellus malesuada nunc ipsum, nec placerat arcu.

This is a Focus Box that is Short, Aligned Left, and a Width of 30%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus.

This is a Focus Box that is Short, Aligned Right, and a Width of 42%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus.