Styles

• Font family: the fonts listed here are controlled through the Fonts & Images task for your website. It is a combination of standard fonts and Google fonts that you chose to allow. If you are looking to control the overall font for the main text (e.g. text within text categories or the actual news story) then edit the Font Family tied to the Container on the default level.
  Fonts that are set to “Inherit” are inheriting the font family selected at the Global Site Style level. If the font family there is also set to Inherit, then bootstrap code within the website will determine what font family is chosen to appear.
   
   

• Font size: Change the font size (measured in pixels) of the selected area. 

• Font color: Select into this area to have the color picker appear. You may also type a known hex value directly into the box if you already know what color you want. 

• Alignment: You can choose to have content left, center, or right aligned. This is not referring to the location of the item on your website’s page. Instead it is referring to the location of the element you are editing within it’s own blue container.
  Ex: Edit a page title whose blue container spans the width of the entire style. Editing the alignment will move the title within the container.
  Edit a link or button whose blue container tightly surrounds the element. Changing the alignment does not move the link/button around the width of the entire style, but instead it remains in place. 

• Styling: Use these options to alter your text to be bold, italicized, or underlined. 

• Background image: You can add images to use here by either clicking on the “Please Select” dropdown and then “+ Create New” or by going to the Fonts & Images task for your website. These images are used for a wide variety of items. Some examples are: search buttons, custom menu/gallery arrows, lock symbols, gallery page symbols, page/region backgrounds, textures, etc.. After adding them, you are able to distinguish where they appear with the element you are editing, and whether or not the image repeats. Some examples can be seen below:
  
  
  Photos should be edited prior to uploading to be the size you desire them to appear on the website.

• Background Color: This works just like the font color field; click into the field to either type a hex value or use the color picker.
  If you are looking to add in a gradient background, you will need to use advanced options to do so. You can go here to create a gradient of your liking (copy the CSS code generated). Then edit the container of your style, and paste the CSS into the advanced options area.
  If you want to have a transparent background, there are two different ways to handle this:

  • Edit the container element your style. Add a background color and then go to the advanced options. Type in: “opacity: X;”  The value of X should be between 0 and 1 (1 being 100%).
    The issue with option 1 is if the element you are adding the opacity command in has any other elements within it such as text or an image, everything will become transparent. This is why option 1 is typically only used on the container.

  • Edit the desired element of your style and add your desired background color. In another tab, go online to a HEX to RGB converter (this is a good one) and enter the hex code of your background color in the converter.

Within the advanced options for the style’s element, edit your background-color code to read as: Background-color: rgba(Red,Green,Blue,Alpha);

Place your rgb values in their respective locations, and “Alpha” should be an integer between 0 and 1, where 1 is equal to 100%.  This code will ensure that only the background color will become transparent, and any content laying over it will stay at 100% opacity.

• Padding: Padding allows you to create space between the element you are editing, and it’s surrounding blue border. Adding padding is helpful when utilizing borders or background colors so that your content (titles, text, images, etc.) do not appear to be on the very edge or hanging outside of the boundaries.

• Margins: Margins allow you to create space surrounding the outside of an element’s blue border. This is helpful when you feel certain elements are sitting too close together and need spacing.

**Both padding and margins can be controlled specific to a particular side by writing CSS within the advanced options.

Padding-top: 10px;  padding-bottom: 5px; padding-right: 2px; padding-left: 20px;

Typically you will use –top/-bottom/-right/-left if you only want to edit the padding (or margin) of one side only. If you wanted to affect all sides differently as written above, you could write CSS as:

Padding: 10px 5px 2px 20px;

In order from left to right, the pixel amounts control: top, right, bottom, left (affects borders in a clockwise manner).

• Corners: Corners are used to give your borders and/or backgrounds rounded edges.  If you only wish to have rounded corners on a specific side, you have the ability to control that. When you view the advanced options, you will notice you have 4 pixel values for your “border-radius”. From left to right, those integers control: top left, top right, bottom left, bottom right.
  Example: I only want to have rounded corners on the top left and right corners with a size of 10. My code will now have the values of: “10px 10px 0px 0px;”

   If I only want the left corners to have a size of 10: 10px 0px 10px 0px;

• Border: Borders come in three separate types: solid, dashed, and dotted. You can control the pixel size of the border as well as the color. To choose a color, either write in the hex value or choose from a color picker.
  Just like padding/margins, borders can be applied to only specific locations to the element. To do so, you are able to edit the advanced options and enter the following code:

border-direction: #px solid;

border-direction: #px dashed;

border-direction: #px dotted;

You would enter “top”, “bottom”, “left”, or “right” instead of “direction”, the amount of pixels (size of border) instead of #, and then the type of border you want (solid, dashed, dotted).