keeping it simple with CSS magic

  • paulovsky

    (@paulovsky)


    8 years ago

    To keep things simple and avoid mistakes, I added this CSS to my child theme:

    /*show more/show less icons*/
div.show_more p.wpsm-show{color: #0397d6 !important;}
div.show_more p.wpsm-hide{color: #0397d6 !important;}
div.show_more p.wpsm-show:before {font-family: FontAwesome; content:'\f0d7';}
div.show_more p.wpsm-hide:before {font-family: FontAwesome; content:'\f0d8';}

    I added a custom FontAwesome icon to each state and also changed the default color. This way my editors can use the shortcode with minimum coding, as colors and icons are managed by CSS, as you can see with the usage example below:

    Visible content[show_more more="show more" less="show less"]Hidden content[/show_more]

    • This topic was modified 8 years ago by paulovsky.
  • The topic ‘keeping it simple with CSS magic’ is closed to new replies.