Saving Special Symbols in Custom CSS Theme Option Issue

[FreeWPTP]

I just noticed that if we save special symbol like greater than > in Custom CSS theme option then on saving the CSS option the symbol gets converted to > as shown in the attached screenshots.

I have also confirmed this is happening for Dazzling theme also so it seems the issue with other Colorlib themes Custom CSS theme option.

[FreeWPTP]

It seems the issue is already reported below.

puikinsh/Dazzling#7

[puikinsh]

This form is generated by Options Framework and it does form sanitization to avoid unsecure data written inside database. This form does need sanitization of some sort for security purpose but it would be great if sanitized data would be written on database but once they are printed in website source > would be converted back.

I know that it is possible but not sure how it could be done easily.

@FreeWPTP Maybe you have an idea for that or already have some solution?

[FreeWPTP]

@puikinsh we can cover the > back once they are printed in website source by using the function html_entity_decode http://www.php.net/html_entity_decode before outputting custom_css option.

The following code worked for me using the html_entity_decode function by adding it in the custom plugin or in the functions.php file of child theme.

// Get theme options

    function custom_get_unite_theme_options(){

      echo '<style type="text/css">';

      if ( of_get_option('link_color')) {
        echo 'a, #infinite-handle span {color:' . of_get_option('link_color') . '}';
      }
      if ( of_get_option('link_hover_color')) {
        echo 'a:hover {color: '.of_get_option('link_hover_color', '#000').';}';
      }
      if ( of_get_option('link_active_color')) {
        echo 'a:active {color: '.of_get_option('link_active_color', '#000').';}';
      }
      if ( of_get_option('element_color')) {
        echo '.btn-primary, .label-primary, .carousel-caption h4 {background-color: '.of_get_option('element_color', '#000').'; border-color: '.of_get_option('element_color', '#000').';} hr.section-divider:after, .entry-meta .fa { color: '.of_get_option('element_color', '#000').'}';
      }
      if ( of_get_option('element_color_hover')) {
        echo '.btn-primary:hover, .label-primary[href]:hover, .label-primary[href]:focus, #infinite-handle span:hover, .btn.btn-primary.read-more:hover, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .site-main [class*="navigation"] a:hover, .more-link:hover, #image-navigation .nav-previous a:hover, #image-navigation .nav-next a:hover  { background-color: '.of_get_option('element_color_hover', '#000').'; border-color: '.of_get_option('element_color_hover', '#000').'; }';
      }
      if ( of_get_option('heading_color')) {
        echo 'h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .entry-title {color: '.of_get_option('heading_color', '#000').';}';
      }
      if ( of_get_option('top_nav_bg_color')) {
        echo '.navbar.navbar-default {background-color: '.of_get_option('top_nav_bg_color', '#000').';}';
      }
      if ( of_get_option('top_nav_link_color')) {
        echo '.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: '.of_get_option('top_nav_link_color', '#000').';}';
      }
      if ( of_get_option('top_nav_dropdown_bg')) {
        echo '.dropdown-menu, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {background-color: '.of_get_option('top_nav_dropdown_bg', '#000').';}';
      }
      if ( of_get_option('top_nav_dropdown_item')) {
        echo '.navbar-default .navbar-nav .open .dropdown-menu > li > a { color: '.of_get_option('top_nav_dropdown_item', '#000').';}';
      }
      if ( of_get_option('footer_bg_color')) {
        echo '#colophon {background-color: '.of_get_option('footer_bg_color', '#000').';}';
      }
      if ( of_get_option('footer_text_color')) {
        echo '.copyright {color: '.of_get_option('footer_text_color', '#000').';}';
      }
      if ( of_get_option('footer_link_color')) {
        echo '.site-info a {color: '.of_get_option('footer_link_color', '#000').';}';
      }
      if ( of_get_option('social_color')) {
        echo '.social-profile {color: '.of_get_option('social_color', '#000').';}';
      }
      if ( of_get_option('social_hover_color')) {
        echo '.social-profile:hover {color: '.of_get_option('social_hover_color', '#000').' !important;}';
      }
      $typography = of_get_option('main_body_typography');
      if ( $typography ) {
        echo '.entry-content {font-family: ' . $typography['face'] . '; font-size:' . $typography['size'] . '; font-weight: ' . $typography['style'] . '; color:'.$typography['color'] . ';}';
      }
      if ( of_get_option('custom_css')) {
        echo html_entity_decode( of_get_option( 'custom_css', 'no entry' ) );
      }
        echo '</style>';
    }

function customize_unite_theme_options(){

    remove_action('wp_head','get_unite_theme_options');
    add_action('wp_head','custom_get_unite_theme_options',10);
}
add_action('init', 'customize_unite_theme_options');

[puikinsh]

Awesome! Thank you!

I have made changed for the main version of theme.

[FreeWPTP]

You are welcome!

Cheers