XMS Systems Style Sheet Cheat Sheet

XMS Systems Style Sheet Cheat Sheet

A summary of styles and CSS "scripts" you can use in XMS Systems.

Add one or a combination of the following CSS Styles to your div. Be careful to ensure there is a space between the existing style and what you want to enter. Also note that the words are case sensitive and needs to be 100% correctly spelled.

This is targeted at the more advanced user that are brave enough to click the “Source” button on the editor.
For the rest, just drop us a support ticket the ask for help.

How to use the classes.

e.g. you might see something like this in your code to tell the browser to display the text as a Heading Level 5

<h5>This is a heading level 5</h5>

Changing it as follows:

<h5 class=”txt_shadow”>This is a heading level 5</h5>

will add a drop down shadow to the text.

This is a heading level 5

Standard classes

  • default_custom_div
    the standard background of your content
  • thumbs
    to style images to make them responsive
  • warning_div
    block with a light red background
  • txt_shadow
    add a drop shadow to your text
  • show_pointer
    replace mouse pointer with a pointing finger on hover
  • wide_div1
    stretches the width of the background to the maximum of the viewport, each can be styled to different heights and backgrounds
  • wide_div2
  • wide_div3
  • wide_div4

Style links as Buttons

On the screen where you enter the link, click “Advanced” and enter the classes you want in the “Stylesheet Classes” field

or if you adventurous try the following:

A normal link would look like this Test Link and the code would look like this

<a href=”some_pahe.php”>Test Link</a>

To make this look like a button edit the code as follows

<a class=”button button-action” href=”some_pahe.php”>Test Link</a>

will give make it look like this Test Link

  • button-danger
    button-danger
  • button-warning
    button-warning
  • button-ok
    button-ok
  • button-bread
    button-bread
  • button-black
    button-black
  • button-action
    button-action
  • button-primary
    button-primary
  • button-submit
    button-submit

Note: Your buttons could be styled a different colour

Special Function

  • offset-by-[n]
    ​if you need to centre a column (e.g. six columns wide) in your grid without using 2 empty “three columns” on either side you can use this class and replace the [n] with the number of empty column on either side of you centred column
    e.g.  class=”offset-by-three six columns” will give you a six column block centred in the row with a three column space to the left and right of it.
  • embed
  • tmp
    add this to your element to have it draw a red line around it to visually see where the div or other element ends
  • big_link
    Add this to expand link to the parent div. This will allow your visitor to click anywhere inside the div instead of directly on the link
  • same_height
    Add this class to all the columns inside a row to display them as equal heights
  • wide_table
    to add information in table format and ensure it is always visible regardless of the width of the viewport first add a div with a class of “wide_table then add your  table inside the div. This class will add a horizontal scroll bar below the table if the table is wider than the viewport​
  • hide_this
    hide item if view-port smaller than 800px
  • show_this
    show item if view-port smaller than 800px
  • div_overlay
    use this to add a title to an image as an overlay. To use this you will create a div around the image, followed by a div inside the same div with this class.
    Example Image with overlay
<div>
  <img alt="Alt info to the image" class="thumbs" src="/media/image/winter_photo.jpg"/>
     <div class="div_overlay">
        <h5>Armagh – Winter 2009 – 2010</h5>
     </div>
</div>
​pre and code tags will be generated if you add a style “formatted” from the editor dropdown and style the selected text like this

Carousel

To add a carousel in your content is discussed elsewhere. Search for “Adding a Carousel”.
The classes below will add navigation buttons and dots below the carousel

  • owl_carousel_only
    Slides only
  • owl_carousel_no_nav
    Dots representing slides below slider
  • owl_carousel_no_dots
    “prev” and “next” navigation buttons below slider
  • owl_carousel
    Slides with navigation buttons and dots below slider

Layout

  • valign-middle
    this will align everything in a div/row vertically and horizontally
  • valign-vertical
    this will align everything in a div/row vertically
  • u-full-width
    this class will stretch a button to the full width if the column. Useful to style for a mobile device
  • u-max-full-width
    this class will stretch a button to the full width if the column. Useful to style for a mobile device
  • u-pull-right
  • u-pull-left 
  • u-center
    add this class to center everything in a div instead of clicking the “Center Align” button on each paragraph

CSS Animations

If we want to have some animation on our heading to draw attention to it we can update the class as follows

<h5 class=”txt_shadow animated bounce infinite”>This is a heading level 5</h5>

to make the div bounce. By adding infinite to the class the animation will repeat.

This is a heading level 5

Animations Delay

Adding one of the following will delay the animation on page load. Using these you can have elements on your page “slide” in or out after up to 5 seconds after the page loaded.

  • delay_1_sec
  • delay_2_sec
  • delay_3_sec
  • delay_4_sec
  • delay_5_sec

Animations Attention Seekers

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • jello

Animations Bouncing Entrances

  • bounceIn
  • bouncehInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp

Animation Bouncing Exits

  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutUp

Animation Fading Entrances

  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeUp
  • fadeUpBig

Animation Fading Exits

  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig

Animation Flippers

  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY

Animation Lightspeed

  • lightSpeedIn
  • lightSpeedOut

Animation Rotating Entrances

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

Animate Rotating Exits

  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

Animate Sliding Entrances

  • slideInUp
  • slideInDown
  • slideInLeft
  • slideInRight

Animate Sliding Exits

  • slideOutUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight

Animate Zoom Entrances

  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp

Animate Zoom Exits

  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

Animate Specials

  • hinge
  • rollIn
  • rollOut

For animation preview click here

Icons

A complete set of icons can be used by applying them as classes using the integrated “Font Awesome” iconset.

See the complete list of icons here directly at Font Awesome

Note: Using these in your text editor might be problematic because the “classes” might be stripped out from your content when you edit your content a second time.

Written by:  - Updated 27 Aug  
Get pdf version
comments powered by Disqus
flashy