Tag Archives: tutorials

How to Add Theme Settings for Drupal 7

Posted on by
Reply

You know that list of checkboxes on the theme settings page that let you turn on and off parts of the theme like the logo or slogan? Well, you can add your own options to that list really easily in Drupal 7. In D6, this was kind of a pain, because you had to write all sorts of functions to save and load your settings to the database and handle everything properly. In D7, that’s all done through the Form API, so the heavy lifting is done for you. All you need to do is tell it to add some form fields, and what the new setting is called!

You’ll need to create a theme-settings.php file in your theme, and add this code to it:

<?php
function themename_form_system_theme_settings_alter(&$form, &$form_state) {
  $form['theme_settings']['your_option'] = array(
    '#type' => 'checkbox',
    '#title' => t('Your Option'),
    '#default_value' => theme_get_setting('your_option'),
  );
}
  • ['theme_settings'] is the existing fieldset to add your option to. You can leave it off, but by pointing it to the theme_settings group, it’ll be added to the existing list of checkbox display options for your theme. Handy!
  • ['your_option'] is the name of your new option.
  • #type tells Drupal what kind of form element to create.
  • #title is the title (or in this case, label) text for the form element.
  • #default_value tells Drupal where to find the initial setting for the form element.

We set #default_value to theme_get_setting('your_option'), which tells Drupal to look for this setting in the database. But here’s the brilliant part — if it can’t find that setting in the database, it will check in your theme’s .info file! So add this line:

settings[your_option] = 1

Now your theme will use the default setting unless the admin overrides it on the theme settings page.

You’ll want to actually do something with this setting, so here’s the PHP call to load it.

theme_get_setting('your_option');

You can call this in from any of your .tpl.php files. For a simple checkbox option like this, you can build an if() statement around it, like so:

<?php if (theme_get_setting('your_option')): ?>
  <!-- Your code here! -->
<?php endif; ?>

In this example, we added a checkbox, but you can add just about any form elements you can think of, including radio buttons and text input fields. What sort of options will you add to your theme?

References

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

How to Avoid Paragraph Gaps when Using Superscript and Subscript

Posted on by
7

Frequently, when I see a webpage with superscript or subscript text, I see associated gaps in the paragraph. This is caused because the default way browsers render super and subscript text is to add enough vertical space in the paragraph to show them. The result is ugly, but as you can see in the following screenshot, you can easily fix the problem with just a few lines of CSS.

HTML Superscript and Subscript Handling

In the first paragraph, you can see the layout gap problem, and in the second paragraph, you can see the paragraph as it should be displayed, by using the following CSS rules.

sup {
	vertical-align: baseline;
	position: relative;
	bottom: .33em;
}
sub {
	vertical-align: baseline;
	position: relative;
	bottom: -.33em;
}

The browser shifts the super and subscript text by using the vertical-align CSS property, which leaves gaps in the paragraph. By resetting this property to the defaul value of baseline, we get rid of the gaps. Then we restore the appearance of the text by using position: relative; and shifting the bottom up or down by .33em. Since this uses ems, you can use these lines in your reset stylesheet, no matter what font treatment you use on your site. Now go forth, and may paragraph gaps never plague you again!

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.