Skip to main content

Custom CSS Styles

To apply styles to your images/buttons or text, select the content and go to "Styles" drop down.

Cascade custom styles under "format" option

Choose one of the following available styles (you may not have all custom styles listed here):

  1. Align-text-center
     Aligns text to the center (alignment options in the WYSIWYG toolbar don't work)
  2. Image Styles
    • align-image-left: Aligns image to the left and wraps the text around it.
    • align-image-right: Aligns image to the right and wraps the text around it.
    • align-image-center: Aligns image to the center of the page with no text wrapping.
  3. Button style – You can create buttons in WYSIWYG by using this style. To create a button in WYSIWYG, follow the steps below:
    • Type in the button text.
    • Go to "Insert/Edit Link" in your WYSIWYG and choose link destination.
    • Choose "Button" as your link class.

      Button class as part of insert link pop up
    • Center-list: When you have more than one button link in WYSIWYG, apply this style to align them to the center. You will select all "Buttons" that you have in WYSIWYG and apply "Center-list" using the styles drop-down.
  4. Hide part of the link text but make it available for screen readers (to avoid having "Read more/Click here" type link text):
    Add the highlighted text to the anchor tag (go to WYSIWYG HTML editor to add this): <a href=" link url goes here">Read More <span class="hide-label">hidden text goes here</span></a>
    You will still see full link text in the edit mode but it should disappear in preview mode. You can add this additional html to links (including button links) that are created in the WYSIWYG.