Power Styles

Instructions:

Set custom section height to 39

Choose a color theme where the colors of the font work with the background color

set the desired section height and content width (small, medium or large)

These variables can be changed in the Custom CSS panel:

@background-content-color : the color that appears behind the text

use an rgb value for a transparent background and set the opacity

You can go here to paste in the hex value that you want to use for the background color (pick one of your built in colors with your template). Copy the RGB value and paste it in

So for example: if I paste in this white color: #F2F2F2, it returns and RGB value of rgb(242, 242, 242). Copy the numbers in between the paragraphs and paste it into the line below. Also set the opacity of the background by changing the last value ( 1 = 100%, .9 = 90%, .8 = 80% etc.)

@background-content-color: rgba(242, 242, 242, .9);

@background-content-padding : the amount of spacing around the text in a percentage (ie 5%)

@background-content-outline-width : the size of the outline line in pixels (ie 2%)

@background-content-outline-color : the color of the outline line

@background-content-outline-offset : how far the outline appears from the colored box

use a negative value offset to have it inset inside the content area or a positive number to place it outside of the content area with a space. A value of zero would be the same as a border

Video Tutorial:

Instructions:

Set custom section height to 65

Choose a color theme where the colors of the font work with the background color (don’t forget to check on a phone!)

These variables can be changed in the Custom CSS panel:

@vert-gradient-left: color of the left side

@vert-gradient-right: color of the right side

@vert-stop: how far right the color splits (ie 50% would be half way, 33% would be 1/3 of the way etc)

Pick 2 colors where the font color will show up on both colors!

Choose a color theme with the font color that works on both colors

Video Tutorial:

Instructions:

Set custom section height to 64

Choose a color theme where the colors of the font work with the background color ( (don’t forget to check on a phone!)

These variables can be changed in the Custom CSS panel:

@hor-gradient-top: color on the top

@hor-gradient-bottom: color on the bottom

@hor-stop:: how far down the color splits (ie 50% would be half way, 33% would be 1/3 of the way etc)

Pick 2 colors where the font color will show up on both colors!

Choose a color theme with the font color that works on both colors

Video Tutorial:

Instructions:

Set section width to 38 then select small, medium or large height as desired

Select inset under background

Select any color theme or section height and width as desired

the outside color or border can be set using site styles @linecolor

to center the content vertically in the section set the section height to 63 and then small, medium or large as desired

Video Tutorial:

Instructions:

set the section height to 63 and then small, medium or large as desired

Video Tutorial:

Instructions:

Set content width to 32 then select small, medium or large height as desired

Change color 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

to center the content vertically in the section set the section height to 63 and then small, medium or large as desired

Video Tutorial: