Making Elemental themes image slider title and description responsive

This tutorial is over a year old and may not apply to your version of Concrete CMS.
May 20, 2015

This tutorial assumes that you

  • have a clean Concrete CMS version 5.7.4 installation
  • have not made any changes within the themes css
  • have made a copy of the Elemental Theme, so that your changes dont get overridden by concrete core updates

Here is a nice how-to explaining how to copy Elemental theme.

What I want to achieve: 1. Font sizes of the sliders title and description shall scale down on smaller screens according to bootstraps media queries already used in the theme. 2. Descriptions on very small screens - with more than one paragraph - shall only display the first paragraph.

How to achieve this: We only have to edit the .less file containing the images slider's styling. Assuming you are in the document root of your concrete installtion, go to /application/themes/name_of_your_theme/css/build/blocks/image-slider.less and open it.

Now we search for ".ccm-image-slider-text". We can see that styling for h2 and p. It looks like this:

 .ccm-image-slider-text {
    h2 {
      color: @image-slider-title-type-color;
      font-family: @image-slider-title-type-font-family;
      font-size: @image-slider-title-type-font-size;
      font-weight: @image-slider-title-type-font-weight;
      margin-bottom: 5%;
    }

    p {
      color: @image-slider-paragraph-type-color;
      font-family: @image-slider-paragraph-type-font-family;
      font-size: @image-slider-paragraph-type-font-size;
      font-weight: @image-slider-paragraph-type-font-weight;
      width: 80%;
    }
  }

Replace it with the following code:

  .ccm-image-slider-text {
    p {
      color: @image-slider-paragraph-type-color;
      font-family: @image-slider-paragraph-type-font-family;
      font-size: @image-slider-paragraph-type-font-size;
      font-weight: @image-slider-paragraph-type-font-weight;
      width: 80%;
    }

    h2 {
      color: @image-slider-title-type-color;
      font-family: @image-slider-title-type-font-family;
      font-size: @image-slider-title-type-font-size;
      font-weight: @image-slider-title-type-font-weight;
      margin-bottom: 5%; 
      line-height: 1.3;
    }

// extra small screens settings 
    @media (max-width: @screen-xs-max) {
        h2 {
            font-size: 1.2em;
            line-height: 1.1;
        }
        p {
            font-size: 0.75em;
        }
    }

 // small screens settings
    @media (min-width: @screen-sm-min) {
        h2 {
        font-size: 2em;
        line-height: 1.2;
        }
        p {
            font-size: 0.85em;
        }
    }

// medium screens settings
    @media (min-width: @screen-md-min) {
        h2 {
        font-size: 2.5em;
        line-height: 1.25;
        }
        p {
            font-size: 1em;
        }
    }

// large screens settings
    @media (min-width: @screen-lg-min) {
        h2 {  
        font-size: 3.2em;
        line-height: 1.3;
        }
        p {
            font-size: 1.1em;
        }
      }
// now some special settings
// hiding all paragraphs on very small screens
    @media (max-width: 420px) {
        h2 {
            font-size: 1.2em;
            line-height: 1.1;
        }
        p {
            font-size: 0.75em;
            visibility: hidden;
        }
    }

// only displaying the first paragraph on small screens
    @media (min-width: 421px) and (max-width: 600px) {
        h2 {
            font-size: 1.2em;
            line-height: 1.1;
        }

        h2 + p {
            font-size: 0.75em;
            visibility: visible;
        }
        p {
            font-size: 0.75em;
            visibility: hidden;
        }
    }
 }

Save image-slider.less and you're ready. Please feel free to remove the comments in the code and to delete parts you don't need. ;-)

If you want to walk through the code with me, then read on.

We're extending the .ccm-image-slider-text class with four media queries detecting the actual size of the screen/browser window. In each query we define the styles applied to the h2 headings and the paragraphs. After this we add two queries detecting screens smaller than 420 pixels and screens between 421 and 600 pixels wide. On very small screens less than 420 pixels wide, we hide the slider's description paragraphs. For screens between 421 and 600 pixels wide, we hide all paragraphs but the first one. The css selector "h2 + p" selects the first paragraph after a h2 heading and makes it visible, while the p selector is hiding all other paragraphs.

Some additional thoughts:

I'm hard coding font styles in this tutorial, which is kind of counter productive, when it comes to using the custom styles panel to edit theme styling. If you are willing to get familiar with .less, you should consider using .less variables instead of hard coded values. This will give you the ability to change the values from your customize theme panel. To learn more about .less usage in concrete check out the screencast on how to enable style customization.

This is my first how-to I've ever written, so I hope you like it and it is kind of helpful.

Recent Tutorials
WebOps Tutorial on Running and Upgrading a Concrete CMS Website
May 2, 2024
By myq.

Describes how to deploy, manage, and upgrade a Concrete CMS website

Using the Concrete Migration Tool Addon
Apr 27, 2024

How to use the Concrete CMS Migration Tool

Create custom Site Health tasks
Apr 19, 2024
By myq.

This tutorial will guide you through the creation of a new Site Health task

Reusing the same Express entity in multiple associations
Apr 11, 2024
By myq.

How to create and manage multiple associations in Express

Express Form Styling
Apr 11, 2024
By myq.

Different ways to style Express forms

Setting addon/theme version compatibility in the marketplace
Jan 9, 2024

For developers worn out with setting the latest addon or theme version manually across too many core versions, here is a JavaScript bookmarklet to do it for you.

Improvements?

Let us know by posting here.