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
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.

Add-On Developers: Get Your Add-Ons Ready for Concrete CMS 9.0
Aug 6, 2021
By andrew.

Concrete CMS 9.0 is coming! But there are some changes in version 9 that might affected your add-ons and themes. This document aims to answer questions about the most common ways that your add-ons might need to be changed, and common problems you'll run into.

Permissions for editors in a multilingual site
Jun 2, 2021
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Was this information useful?
Thank you for your feedback.