By culfin on

Hi everyone,

I'd like to build a new base theme which integrates the Semantic UI framework (http://semantic-ui.com) and acts as a bridge by including the framework classes.

Now I'm looking for a clever solution to inject these different classes to the markup.
Example: Semantic UI extends the <h1> tag with an additional class="ui header", which then should be added to <h1>.

I found a function theme_html_tag which might be able to do this by adding the classes to the render array: https://api.drupal.org/api/drupal/includes!theme.inc/function/theme_html...

Unfortunately I have no idea how to use this function. Do I need to use a preprocess function and how should this look like? Can anyone help me with an example?

Thanks a lot,

Andreas

⋅ Categories: Drupal 7.x

Comments

jaypan’s picture

jaypan
Location Victoria, BC
commented

Tags are created in various methods in Drupal. Sometimes you will see a tag explicitly defined as a #prefix or #suffix in a render array:

$page['some_part'] = array
(
  '#markup' => t('Some text'),
  '#prefix' => '<h2>',
  '#suffix' => '</h2>',
);

In this case the only way to change the tag would be to override the #prefix (and potentially #suffix as well). Some tags are created in theme functions:

theme some_item($vars)
{
  $output = '<h2>' . $vars['value'] . '</h2>';
  return $output;
}

In this case, you would need to override the theme function with your own, inserting the classes. Some HTML tags are output in templates.
From page.tpl.php in Garland, D7:

<h1 id="branding"><a href="<?php print $front_page ?>">
            <?php if ($logo): ?>
              <img src="<?php print $logo ?>" alt="<?php print $site_name_and_slogan ?>" title="<?php print $site_name_and_slogan ?>" id="logo" />
            <?php endif; ?>
            <?php print $site_html ?>
            </a></h1>

In this case, you'd have to override the template, changing the tags as necessary.

And some tags will be outputted using PHP, implementing theme_html_tag() that you found:

print theme('html_tag',
  array(
    'element' => array(
      '#tag' => 'h2',
      '#attributes' => array(
        'class' => 'activities-sidbar',
      ),
      '#value' => 'Activity History',
    ),
  )
);

In this case, you'd have to override theme_html_tag() to change the tags accordingly. This is actually essentially the same as step 2.

You were asking about the page <h1> tag - it is usually created using the 3rd method I showed, and will be found in the page.tpl.php file.

Contact me to contract me for D7 -> D10/11 migrations.

culfin’s picture

culfin commented

Thanks for detailed answer. :-)

So I would have to use all of the described approaches for each element?
Changing it in each tpl.php file sounds easy, because I could just do it with a search&replace with my texteditor.

But is there a way to programmatically change all elements directly in the render array after they have been added to it (with prefix/suffix, theme function or PHP)? Maybe with a process function?

Thanks a lot for your help.

Andreas