The CSS Editor allows you to easily make styling changes to content areas or regions on individual pages throughout your website.  


Some of changes that can be made include adding/changing a background image or background color, adjusting the text color and/or size, setting a border style as well as modifying the spacing for the specific content area or region.

*Note:  Any changes made using the CSS Editor ONLY to apply the specific content area or region on the CURRENT page.  Changes are NOT applied site-wide.


To access the CSS Editor, you first need to go into Edit mode.  This is done by clicking the Edit icon in the upper left of your toolbar.




Once in Edit mode, all of the available content areas and page regions will be highlighted.






The blue edit icon (pencil and paper icon) next to each content area or region will open the CSS Editor for that specific area.  You are able to adjust the settings for the Background, Border, Spacing, and Text for that area.




Background


Within the Background tab, you are able to add a background image or set a background color for the selected area.  


Changing the background image

To add or change a background image, hover over the 'Ad Background Image' box on the left side of the CSS Editor window.


This will open up the access to view the available options to selecting a background image.  You'll be able so select an image from your File Manager, the Content Manager, or Upload an image directly from your computer.



Once you have selected or uploaded your desired image, press the 'Accept' button at the top of the window.



Once you have your image selected, there are additional settings available to adjust how it displays.

Image Repeat: Provides options for having the image repeat on the background.

  • None --  will place the image at it's real size for the background.
  • Horizontal --  will repeat the image across the screen, from left to right.
  • Vertical -- will repeat the image down the screen, from top to bottom.
  • Tile --  will repeat the image at its current image size in a tile pattern, filling the entire screen.


    Image Size: Provides options for sizing of the background image

    • Auto -- the background image contains its own width and height.
    • Length -- the length will set the width based on the background image.
    • Cover -- will scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
    • Contain -- will scale the image to the largest size such that both its width and its height can fit inside the content area.

       

    Image Scroll: Provides options for applying an effect to the background image when scrolling on the website.

    • None -- no specific attachment is set to the background image. 
    • Scroll -- the background scrolls along with the screen.
    • Fixed -- the background is fixed so when scrolling on the site the image will not move.
    • Local -- the background will scroll along with the elements contents (similar to Scroll).
    • Initial -- will set to the default effect.

    Image Position: Will let you adjust the position of the image within the background area. 

     

    To remove the background image, select the 'Remove' button below the image and next the the image URL field.


    When finished making adjustments, make sure to 'Save' in the lower right corner of the window.




    Changing the background color

    To change the background color of the selected area, click the background color box. From here you can select a preset color, or custom choose a color by using the color picker or adding in a specific color number within the color information field.



    You can also select the opacity, or intensity, of the color by using the slider gauge.



    Once you have your color chosen, click 'Select.  Then click 'Save' in the CSS Editor window to save your changes.


    To remove the background color, select the transparent box within the color picker.




    Border


    The Border tab allows you to place a border around the content area or region, or added rounded corners to an applied background image.




    Border Style

    This allows you to change the style of your border.  In order for the border to display on the page, you must first select a border color and a border width.



    Dashed border style



    Dotted border style



    Doubled border style



    Initial border style

    Will set border style to the default value from the template


    Inherit border style

    Will set to inherit any styling from a parent object in the template (when applicable)


    Note: In most cases with the templates, both Initial and Inherit will show the same as the 'none' option.



    Solid border style




    Border Color

    To change the border color of the selected area, click the border color box.  From here you can select a preset color, or custom choose a color by using the color picker or adding in a specific color number within the color information field.




    You can also select the opacity, or intensity, of the color by using the slider gauge.




    Border Width

    To choose a thickness for your border, type in a number or use the arrows to set the desired pixel width.



    Border Radius

    Border radius allows you to create rounded corners on your border.  Type in a number or use the arrows to select your desired corner styling. The larger the number, the more rounded the corner will be.



    Spacing


    With the Spacing tab, you can add spacing around, and also within, the content area/region you are editing.  Margin refers to the space outside of the border of the content area or region, whereas Padding refers to the space between the content being placed and the edge of the area or region you are editing.




    In the image below, the spaces between the white box and the top and bottom of the background image is the top and bottom margin for the content area.  The space between the edge of the the white box and the text inside the box, is the padding for the content area.




    Margin
    To adjust the size of the top, right, left, and bottom margins, simply type in a desired size into the box or use the up and down arrows to achieve the desired size.


    Padding

    To adjust the size of the top, right, left, and bottom padding, simply type in the desired size into the box or use the up and down arrows to achieve the desired size.


    Text


    With the text tab, you can change the styling of the text placed within the content area as long as that text DOES NOT have any additional styling placed on it from within the Text Editor (example: a heading style such as h1, h2, etc.). For text to be styleable within the CSS Editor must be placed as plain text.


    You can change formatted text (h1, h2, p, etc.) to plain text by using the Text Editor.  When in Edit mode, click on the text area you would like to change, and when the edit window opens, highlight the desired text.  Then go under Formats, select Block, then Div.  This will remove any headings or paragraph formatting associated with the highlighted text.



    Text settings made in the CSS Editor will affect all unstyled text within the content area or region.  If you only want to have certain portions of text to have specific styling, we strongly recommend using the Text Editor.


    Font Family

    Font family allows you to change the font of your text to one of the preset options listed.  Just select your font of choice from the drop down options and you should see the change reflected in the background.  



    Font Weight

    Change the weight of the text to be bolded.



    Font Style

    Change the font style to be in italics.



    Alignment

    Change the alignment of the text within the content area to be left, right, or center justified by selecting the desired option from the dropdown.  Note: Make sure there is no alignment set within the text editor.



    Text Color

    Change the color of the text in the content area by choosing a preset color, using the color picker to choose a custom color, or by adding in a specific color number within the color information field.




    You can also adjust the opacity, or intensity, of the color by using the slider gauge.



    Font Size

    Change the size of the text by typing in a desired size or by using the up and down arrows to achieve the desired size.



    Line Height

    Line Height refers to the space between lines of text.  To change the size simply type in a desired number or use the up and down arrows to achieve the desired spacing size.  The larger the number, the greater the space between lines.  Note: By typing in a desired number, you are able to add in decimal points.  Example: 1.5, 1.25, 2.5.




    Settings


    Within Settings, you have the option to remove ALL styling that has been applied within the CSS Editor.  To do so, click on the 'Settings' button in top right side of the CSS Editor, and then click the red 'Remove' button.



    Once clicked, you'll be prompted to confirm your choice.  Click 'yes' to remove all settings, click 'no' to cancel.  Then click 'Save' to save your choice.