ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• May 16, 2016 at 2:02 pm #267759
  aimeandalex

  Member

  Post count: 73

  I’m using the shortcode [hr_bold] and want to change the colour, I can’t find any documentation on this at all. I’ve tried [hr_bold color=”white”] but that did nothing.

  Please could you advise how to change at the master level and individual HRs?

  May 16, 2016 at 4:08 pm #267822
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .horizontal-break{
  color:#fff !important;
  }

  Thanks
  Mohammad

  May 17, 2016 at 12:03 pm #268036
  aimeandalex

  Member

  Post count: 73

  Hi Mohammad, tanks for this, I’d like to change the colour of individual HRs too, e.g. I have some on dark background that would look better in white, and some on light background that would be better in colour. Is there a way to do this?

  May 17, 2016 at 12:34 pm #268049
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  You will need to give the row an extra class then use this css:

  .yourextraclass .horizontal-break{
  color:#fff !important;
  }

  – Kyle

  May 17, 2016 at 12:40 pm #268055
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please paste this code at functions.php of child theme.

  
  if ( !function_exists('sf_horizontal_break_light') ) {
          function sf_horizontal_break_light( $atts, $content = null ) {
              return '<div class="horizontal-break light"> </div>';
          }
          add_shortcode( "hr_light", "sf_horizontal_break_light" );
      }
  
  if ( !function_exists('sf_horizontal_break_dark') ) {
          function sf_horizontal_break_bold( $atts, $content = null ) {
              return '<div class="horizontal-break dark"> </div>';
          }
          add_shortcode( "hr_dark", "sf_horizontal_break_dark" );
      }

  Now paste this code at custom css code area.

  .horizontal-break.light{
  color:#fff !important;
  }
  .horizontal-break.dark{
  color:#000 !important;
  }

  Use hr_dark for dark and hr_light for light.
  Thanks
  Mohammad

  May 17, 2016 at 3:01 pm #268112
  aimeandalex

  Member

  Post count: 73

  I’ve followed the instructions and the shortcode is displaying [hr_light] / [hr_dark], please could you advise?

  May 17, 2016 at 3:05 pm #268113
  aimeandalex

  Member

  Post count: 73

  My developer fixed it using this code:

  if (!function_exists('sf_horizontal_break_light') ) {
  function sf_horizontal_break_light( $atts, $content = null ) {
  return '<div class="horizontal-break light"> </div>';
  }
  add_shortcode('hr_light', 'sf_horizontal_break_light');
  }
  
  if (!function_exists('sf_horizontal_break_dark') ) {
  function sf_horizontal_break_dark( $atts, $content = null ) {
  return '<div class="horizontal-break dark"> </div>';
  }
  add_shortcode('hr_dark', 'sf_horizontal_break_dark');
  }

  But the breaks don’t look the same as the original bold ones (see screen shots)

  Attachments:

  You must be logged in to view attached files.
  May 18, 2016 at 8:34 am #268220
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this code:-

  
  if (!function_exists('sf_horizontal_break_light') ) {
  function sf_horizontal_break_light( $atts, $content = null ) {
  return '<div class="horizontal-break bold light"> </div>';
  }
  add_shortcode('hr_light', 'sf_horizontal_break_light');
  }
  
  if (!function_exists('sf_horizontal_break_dark') ) {
  function sf_horizontal_break_dark( $atts, $content = null ) {
  return '<div class="horizontal-break bold dark"> </div>';
  }
  add_shortcode('hr_dark', 'sf_horizontal_break_dark');
  }

  Thanks
  Mohammad

• Back to forum

  Posted in: Atelier