Power Styles

All these styles rely on the settings for each section which can be accessed by editing the page and then clicking on the pen icon in the top right of each section.

Add a border around the content

Instructions:

choose the color theme of you choice to get the background color and text color

select any of the secondary color themes (ie ending in 2 like “Lightest2”)

Add a text block and toggle on the background:

To add rounded corners adjust the corner radius values (individually or for all corners). In the example above all corners have a 40px radius

Adjust the amount of padding or space around the text by selecting S, M or L underneath the padding option on the text block (shown above)

the color of the border is set with the in the custom CSS panel. Look for this section to adjust:

//* set the border line color and size below - this is used in many places: border around photos on secondary color themes, line on hover etc *//

@bordercolor : @bright; // color of the border

@borderlinesize: 2px; // thickness of the border

This example has a radius of 40px and padding of Large

Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.

This example has a corner radius of 0 and padding of Medium

Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.

Add a line at the bottom or the top of a section

Instructions:

Insert a markdown block in the section that you want the line to appear before or after.

For a line at the top of the section, copy and paste this into the markdown block:

Section Styles section-line-top

For a line at the bottom of the section, copy and paste this into the markdown block:

Section Styles section-line-bottom

Select full or inset under background

Select any color theme or section height and width as desired

the color and size of the border can be set by editing the variables @sectionlinecolor and @sectionlinesize in the Custom CSS area

Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada.

Section Styles section-line-top section-line-bottom

Add line around section content on all sides

Instructions:

Insert a markdown block in the section that you want the line to appear before or after.

For a line at the top of the section, copy and paste this into the markdown block:

Section Styles section-border

Select any color theme

Select full width or inset background

the color and size of the border can be set by editing the variables @sectionlinecolor and @sectionlinesize in the Custom CSS area

Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada.

Section Styles section-border

Add a vertical line down the center of a section

Instructions:

Insert a markdown block in the section that you want the line to appear before or after.

For a line at the top of the section, copy and paste this into the markdown block:

Section Styles vertical-line

Change color of section as desired

background can be full width or inset

for inset, set the border color in the site styles panel

the color of the line can be modified in the custom CSS panel by changing the value for @linecolor for the color and @line for the size of the line

Add a vertical line down the center of a section

Add any text or images as you like

Section Styles vertical-line

Split the content and background image equally

Split content and background image 50/50
image left / content right

Instructions:

Insert a markdown block in the section and copy and paste this code:

Section Styles bg-left

Section Styles bg-left

Split content and background image 50/50
image left / content right

IInstructions:

Insert a markdown block in the section and copy and paste this code

Section Styles bg-right

Section Styles bg-right

Manage background image size and placement

Background Image option 1

Instructions:

Insert a markdown block in the section and copy and paste this code

Section Styles bg-1

  • Optionally choose “inset” for the background width if you would like a border around the section (the color of the section is set in the site styles panel for color theme selected for the section)

Here are the settings you can control:

background-image-1-width : the percentage width of the image in the section (ie 40%)

background-image-1-height : the percentage height of the image in the section

background-image-1-top : the percentage distance from the top of the section that the image will appear

background-image-1-leftpos : the percentage distance from the left of the section that the image will appear

Section Styles bg-1

Background Image option 2 (in the middle)

Instructions:

Insert a markdown block in the section and copy and paste this code

Section Styles bg-2

  • Optionally choose “inset” for the background width if you would like a border around the section (the color of the section is set in the site styles panel for color theme selected for the section)

Here are the settings you can control:

background-image-2-width: the percentage width of the image in the section (ie 50%)

background-image-2-height: the percentage height of the image in the section

background-image-2-top : the percentage distance from the top of the section that the image will appear

background-image-2-opacity : the opacity of the image (ie. .5 = 50%)

Background Image option 2 (in the middle)

Section Styles bg-2

Background Image option 3

(in this case shown on the right side only at 40% width)

 

Instructions:

Insert a markdown block in the section and copy and paste this code

Section Styles bg-3

  • Optionally choose “inset” for the background width if you would like a border around the section (the color of the section is set in the site styles panel for color theme selected for the section)

 

Here are the settings you can control:

background-image-3-width: : the percentage width of the image in the section (ie 40%)

background-image-3-height: the percentage height of the image in the section

background-image-3-top : the percentage distance from the top of the section that the image will appear

background-image-3-leftpos : the percentage distance from the left of the section that the image will appear

 

Background Image option 2 (in the middle)

Section Styles bg-3