VitalSite Styles Defined
Listed below are the style options available within this site:
The "Place-Phone-Link-On-Icon" style can be applied to an anchor tag surrounding one phone number within the "Templates: Mobile Phone Numbers" panel. If this style is placed this one link will become directly clickable without expanding the menu to display the phone number. By taking this class off, the phone number or numbers will be listed within the expandable mobile menu. This style (along with the "Templates: Mobile Phone Numbers" panel) will only apply on small screens. [TEMPORARILY DOES NOT WORK]
"ClearBoth" style can be placed on text after a floated element that you do not want to wrap up beside another element.
"nowrap" style can be placed on text that you want to prevent from wrapping.
"Right", "Left" and "Center" styles can be added to images that you want to align left or right of your text or in the center of the content area.
"TextAlignCenter" style can be placed on headers or paragraph text to align the text center.
"TextAlignRight" style can be placed on headers or paragraph text to align the text right.
'Button' style can be added to (<a>) anchor tags to allow the link to appear as a button.
"Arrow-Link" can be added to an anchor tag (link) to add an arrow style right of the link.
"Plain-List" can be added to an unordered list <ul> tag to remove the bullets and remove the left padding/margins.
"TwoColum", "ThreeColumn" or "FourColumn" can be added to an unordered list <ul> tag or a div tag to place direct elements within a column structure as the screen allows. These columns do not remain as set columns on smaller screens. On phone size screens they all will default back to a single column.
"Table-Border1", "Table-Border2" or "Table-Border3" can be applied to a table tag to apply differing sets of borders. Examples can be found in the content guide.
"Table-ColorRow" can be applied to the <tr> tag to create a different colored background on a particular table row.
"AutoWidth" can be placed on a table tag to allow the table's width to default to the width of the content within. This will overwrite the default 100% width of the table. This can be used on other elements as well to create an width: auto; style.
The "LightGreyPanel", "MidGreyPanel" and "DarkGreyPanel" styles can be applied to any element within a panel to have that particular panel have the mentioned background color. This will apply within the above footer panel area.
"Img-SemiWhite" and "Img-SemiBlack" can be applied to an image tag on the home page banner to apply an overlay to the banner image so that it is possible to use text over the image without the background on the text box. This allows you to meet the color contrast requirements set for accessibility.
"Reversed" can be applied to the "PhotoText" div (first div outside of the text) to create white text with a dark background on the home page banner.
"NoBackground" can be applied to the "PhotoText" div (first div outside of the text) to remove the semi white or semi black background behind the text. If you used "NoBackground" and "Reversed" styles together then you need to make sure you are using the "Img-SemiBlack" style on the banner image to meet color contrast requirements.
"Img-Focus-Left", "Img-Focus-Center" or "Img-Focus-Right" can be used on the home banner image to allow the mobile view of the banner image to crop into the focus area. (For example, "Img-Focus-Right" will crop out the left side of the image when viewing this page on a phone.)
"Lightbox-for-img" can be applied to a link (<a> tag) to allow an image source to open within a lightbox.
"Lightbox-for-video" can be applied to a link (<a> tag) to allow a YouTube video source to open within a lightbox.
"Lightbox-for-iframe" can be applied to a link (<a> tag) to allow the link source to open within an iframe inside a lightbox.
"YouTubeVideo" can be applied to a link (<a> tag) on an image which will allow the video source to open in an iframe and also adds a play button over the image on the page.
Additional styles below the "do_not_use_below_here______" should not be used from the style dropdown. These additional styles are automatically added to the correct elements when you insert Page/Panel Elements from within the text editor.