Making Elemental themes image slider title and description responsive

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
Updating Concrete Themes from Version 8 to Version 9
Nov 24, 2022

This tutorial covers commonly encountered issues when upgrading a Concrete CMS theme from version 8 to version 9

Transferring ownership of an add-on and a theme
Nov 15, 2022
By katzueno.

If you encounter a Concrete CMS add-on or theme that you love but not being maintained, you may want to ask the author to help or take over the add-on or theme. Here is the quick step-by-step guide of how to transfer the ownership.

How to update Add-Ons if not on the Update Add-Ons Menu item
Jul 4, 2022

How to manually download an add-on and update it when your site's core versions isn't considered compatible with the add-on version.

Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Was this information useful?
Thank you for your feedback.