How to use the Custom CSS block in XMS Systems

Tutorial and example for how to use the custom CSS block with adjustments included for small mobile devices.

Using XMS Systems “out the box” is already flexible and you can do a lot. However there might just be the case that you want to do something special and will need to use some custom Cascading Style Sheet (CSS) code to achieve this.

You can always add the code in the custom.css file but if you only going to use it once on your website in a specific form it is a bit senseless to have it load everytime with every page.

To solve that “once-off” cases you have the option to add CSS code into the “Custom CSS” block of the page you are editing.

Scenario

In our example we want to display an image as a background with a text overlay like in the image below

To achieve this you will first create the image you want to use and make sure it is optimised the image the best you can. Smallest filesize while still maintaining an acceptable image quality.

Next you can open the page you want to edit and upload the image into a folder where you can easily find it again.

Before you start the next step, make sure to click the button at the top of the page to make a backup of your work.

Custom CSS

In the “Custom CSS” block add the following code. (You can copy the following block and paste it into the “Custom CSS” block

@media (min-width: 550px) {
        .wide_div1 {
            background: url(../uploads/media/background/construction-junction.jpg) no-repeat center top!IMPORTANT;
            background-size: 190rem!IMPORTANT;    
                height:30rem!IMPORTANT;
                color: white!IMPORTANT;
        }
}

@media (max-width: 549px) {
        .wide_div1 {
                display: flex;
                align-items: center;
                justify-content: center;
            background: url(../uploads/media/background/construction-junction.jpg) no-repeat center top!IMPORTANT;
            background-size: 60rem!IMPORTANT;    
                height:10rem!IMPORTANT;
                color: white!IMPORTANT;
        }

      .large_text  {
               font-size: 2rem!IMPORTANT;
           font-weight: normal!IMPORTANT;
               text-align: center;
       }
}

It should look like this when you are done.

Custom “programming”

The next step is probably going to be the most difficult. But give it a try…

On your text editor, click the “_<>Source” button and copy and paste the following block of code above the code you already have in the editor.

<div class="wide_div1 valign-vertical">
  <div class="row">
    <div class="twelve columns">
      <div class="large_text">&ldquo;Your home is your castle,</div>
      <div class="large_text">Your workplace can be too&hellip;&rdquo;</div>
    </div>
  </div>
</div>

It should look like the following when you are done

Now scroll down to the bottom of the page and click the “Update” button and with a bit of luck your page should display the way you want it. If it is not working, your most likely problem would be an incorrect change to the url pointing to the file you uploaded.

Good luck and enjoy digging into the inner workings of XMS Systems and the wonderful world of CSS.