0

I am adding theme styling settings and I would like to have associated color to the checkbox in themes setting form. So far, i haven't been able to do so, because the output strips inline styling and then external styling is being reset for the admin view. How do you enable html output of the text next to the checkbox?

Here is my code so far:

function THEMENAME_form_system_theme_settings_alter(&$form, &$form_state){
       $form['theme_style'] = array(
        '#title' => 'Theme Style',
        '#type' => 'fieldset',
        '#collapsible' => FALSE,
        '#collapsed' => FALSE,
    );
    $form['theme_style']['color'] = array(
        '#title' => t('Color Skin'),
        '#type' => 'checkboxes',
        '#options' => color_schemas(),
//        '#process' => array(),
        '#pre_render' => array(),
        '#post_render' => array(),
        '#format' => array('text_format' => 'full_html'),
    );
}

function color_schemas(){
   $colors = array(
        'blue' => htmlentities('<span style="display:inline-block;width:20px;height:20px;background-color:#DDD;vertical-align:middle;border-radius:0">Blue</span>'),
        'black' => '<span id="black-skin">Black</span>',
        'maroon' => t('Maroon'),
        'grey' => t('Grey'),
        'white' => t('White'),
    );
    return $colors;
}

Here i try different things. To set the text format in '#format' attribute. I also attach 'id' element so could style in external style sheet but those are reset by admin imported CSS. I also try convert all html entities and output which works but it doesn't render the html correctly

0

For starters, if you're using an admin theme like Seven for your administration pages, nothing on those pages will ever be affected by another theme's code. If you need to write code that applies across any theme, then you should be putting that in a module.

Inline styles are an attack vector for XSS, which is why they're generally not allowed in any kind of markup that is the result of user input. That includes the label text for a form element, such as a checkbox: the label is constructed by theme_form_element_label(), which sanitizes the text with filter_xss_admin(). That's absolutely the correct thing to do.

The proper way to do this is to put your styles in an external spreadsheet, as you've mentioned. Consider whether you could implement your code as a module instead.

  • Thank You Les. I moved the CSS in external css file style-admin.php and then attached as following: – latvian Nov 10 '13 at 17:29
  • if(($user->uid)){ drupal_add_css(drupal_get_path('theme',$GLOBALS['theme']) .'/css/style-admin.css', array('group' => 999, 'weight' => 999, 'type' => 'file')); } – latvian Nov 10 '13 at 17:30
  • however this doesn't work because the admin theme css is taking precedence over the style-admin.css no matter what the weight and group is set. why? – latvian Nov 10 '13 at 17:31
  • I don't believe it's a precedence issue. I think the issue is that you have two completely different themes running on your site. The code you put in your main site theme does not run at all on your admin pages, because your admin pages are using the "seven" theme. Try changing your "administration theme" in admin/appearance from "Seven" to your default theme to see what I'm talking about. – Les Lim Nov 10 '13 at 18:03
  • Thank You Les. I am not sure, but when i look what css is imported i can see all of my custom theme css files before the admin css with the reset.css between – latvian Nov 22 '13 at 4:35
0

You can use simple markup in the t() function, look at especially this comment, which indicates to this source: Dynamic or static links and HTML in translatable strings.

The general rule of thumb for translatable strings is that we keep inline markup for translation but avoid block tags (but do read the whole story before you make this your mantra).

According to this documentation, your code should be look like:

function color_schemas() {
  $colors = array(
    'blue' => t('<span style="display:inline-block;width:20px;height:20px;background-color:#DDD;vertical-align:middle;border-radius:0">Blue</span>'),
    'black' => t('<span id="black-skin">Black</span>'),
    'maroon' => t('Maroon'),
    'grey' => t('Grey'),
    'white' => t('White'),
  );
  return $colors;
}

Though I would suggest you to use css classes for span instead of inline styling.

  • Thank you Elin. It still strips away all of the style attribute with its values wether in the 't' function or not. This is Drupal 7.2x with admin theme 'seven'. Any more ideas? – latvian Nov 10 '13 at 17:27

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.