Making small changes to your Drupal theme is easy! Some changes can even be made through the administrative section of your site, without having to touch any code. Explore the sections of this handbook listed in the menu to easily make customizations to your TNT theme (or any other!).
This post covers some basics of CSS and working with your Drupal theme
The first step of adding an image to a block is to get the image on your web server so that you can reference it in a block. There are a number of ways of adding an image to your web server, either using a FTP program and upload the image to a specific directory or using a module that helps you add images to your Drupal web site. The important thing to keep in mind is knowing where exactly the image is located on your web server. If you do use FTP and upload and image to a directory on your web server, you’ll need to provide the full path to the where the image was uploaded.
An extremely simple to use module that you can use with your Drupal web site is the IMCE module. The IMCE module is located at http://drupal.org/project/imce IMCE is an image/file uploader and browser that supports personal directories. Using the IMCE module you can upload jpg, png, and gif images to your Drupal web site and use the uploaded image(s) in blocks and nodes of all types.
Once you have installed the IMCE module for your Drupal web site goto the IMCE settings page located at Administer > IMCE settings - the clean URL is admin/settings/imce In the first field on the IMCE settings page, Enable inline image/file insertion into plain textareas, add edit-body - this will make IMCE available to most body text fields in Drupal (e.g., story, page, blocks). Click the Save button at the bottom of the IMCE settings page.
Now it’s time to create a new block and add your image to it. Goto the block configuration page located at Administer > Blocks – the clean URL is admin/build/block. Click on the Add block link at the top of the page. You’ll see two links at the bottom of the body text area box:
Insert image or link. Clicking on the image link will open the IMCE window which allows you to upload and select images and then add them to the body of your nodes and blocks.
NOTE: It is important to select the Full HTML option under Input format so that your image will display properly.
You can control how the date format is displayed is posts [/admin/settings/date-time], or if the date is displayed at all [/admin/build/themes/settings | “Display post information on”], but only to a certain extent. If you want complete control over how the date is displayed you will need to edit the node.tpl.php file that came with the theme.
If you wish to change the date display of comments, you’ll need to edit the comment.tpl.php file.
At about line number 11 of node.tpl.php file you’ll see:
<?php print t('Posted ') . format_date($node->created, 'custom', "F jS, Y") . t(' by ') . theme('username', $node); ?>
Here you can re-arrange the way the date and author information is displayed.
To change the date/time display to your taste, arrange the following variables in the manner you require:
a - "am" or "pm"
A - "AM" or "PM"
d - day of the month, 2 digits with leading zeros; i.e. "01" to "31"
D - day of the week, textual, 3 letters; i.e. "Fri"
F - month, textual, long; i.e. "January"
h - hour, 12-hour format; i.e. "01" to "12"
H - hour, 24-hour format; i.e. "00" to "23"
g - hour, 12-hour format without leading zeros; i.e. "1" to "12"
G - hour, 24-hour format without leading zeros; i.e. "0" to "23"
i - minutes; i.e. "00" to "59" j - day of the month without leading zeros; i.e. "1" to "31"
l (lowercase ‘L’) - day of the week, textual, long; i.e. "Friday"
L - boolean for whether it is a leap year; i.e. "0" or "1"
m - month; i.e. "01" to "12"
n - month without leading zeros; i.e. "1" to "12"
M - month, textual, 3 letters; i.e. "Jan" s - seconds; i.e. "00" to "59"
S - English ordinal suffix, textual, 2 characters; i.e. "th", "nd"
t - number of days in the given month; i.e. "28" to "31"
U - seconds since the epoch
w - day of the week, numeric, i.e. "0" (Sunday) to "6" (Saturday)
Y - year, 4 digits; i.e. "1999" y - year, 2 digits; i.e. "99"
z - day of the year; i.e. "0" to "365"
Z - timezone offset in seconds (i.e. "-43200" to "43200")
More information about customizing date/author in Drupal: http://drupal.org/node/121823 You can read more on PHP date formatting at: http://php.net/date
You can easily change the font size and font type of the theme by editing the theme’s style.css file. By default the theme’s font size and font type is set in the body selector of the theme’s style.css file. The body selector can be found at the beginning of the theme’s style.css and looks something like:
body { background: #FFF;font-family: Arial, Helvetica, Verdana, "Bitstream Vera Sans", sans-serif; font-size: 80%; font-weight: normal;line-height: 160%; }
A font size of 100% is equal to 16 pixels. The above font size of 80% is equal to 12.8 pixels. Because the theme uses an em based font sizing scheme, all fonts for theme theme will change according to the percentage you set in the body selector; these include H1, H2, page titles, node titles, block titles and paragraph font sizes.
To figure out what the pixel size of an em specified font size, divide the desired font size, in pixels, by the base font size. For example: the above mentioned font size of 80% is equal to 12.8 pixels and you want a font size of 16 pixels you can get the em size by doing 16(pixels) / 12.8(pixels) which gives you 1.25(em).
The font-family property in the body selector controls the font type or font face; there you can set your desired font type.
A very useful tool to help with testing how a font size and/or font type will look is the Firefox add-on Firebug [ https://addons.mozilla.org/en-US/firefox/addon/1843 ]. With the Firebug add-on you can change the theme’s styles in real time and see how things will look before you make any changes to the theme’s style.css file.
Many of the themes from TopNotchThemes can be configured to have more than one type of layout (e.g., sidebar on the left, sidebar on the right, or no sidebars at all) on a page by page basis.
To achieve different layouts for the different pages of your Drupal site you’ll need to configure block visibility for each page by going to the block admin page located at Administer > Blocks – the clean URL for the block admin page is admin/build/block
Once you are on the block admin page you can configure the individual blocks by clicking on the “configure” link for the block that you wish to modify. On the block’s configuration page there is a section titled “Page specific visibility settings” which allows you to specify where the block will be displayed. You have the option to “show the block on every page except the listed pages” in the “Pages” text area or you can choose to “show on only the listed pages”.
From Wikipedia:
A favicon (short for favorites icon), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. A web designer can create such icons in several ways and many recent web browsers can then make use of them. Browsers that support them may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. Some operating systems will also often use the favicon for Internet shortcuts to sites placed on the desktop or in other directories.
You can easily add a favicon to your Drupal site by going to the theme settings page: Administer > Themes > name-of-theme – the clean URL of the theme settings is admin/build/themes/settings/name-of-the-theme. Please replace “name-of-theme” with the name of the theme you are using.
Once you are on the theme settings page for the theme that you are using you can add your favicon in the “Shortcut icon settings” section midway down the page. Using the “Upload icon image” form you can select a image on your hard drive and upload it to your Drupal web site. Don’t forget to click the “Save configuration” button at the bottom of the theme settings page.
The header regions styles/formatting of the theme are located at the beginning of the style.css file that came with the theme. You can easily find the header regions section in style.css by looking for the notation:
/******************/ /*HEADER REGIONS */ /******************/
The header region section of the style.css file controls most of the styling and formatting of the header regions which includes the site logo, site name, site slogan, search box, and the various other header block regions that the theme may have to offer.
The site’s name, the name of your web site or organization, is wrapped in a H1 tag and its styling/formatting can be adjusted by changing the properties of the H1 selector in the header regions section of style.css; the H1 selector in style.css can be found by looking for the notation /* site name */
Here, for example, you can change the font size, font type, and line height. However, the color of the site name is dependent on a different H1 selector (h1 a) because the site name in Drupal is usually a link to the home page. If you wish to change the color of the site name, please look for the following selectors in the style.css: h1 a (H1 anchor) which will be notated as /* site name link */ and usually immediately follows the previously above-mentioned site name H1 selector.
Also, controlled in the HEADER REGIONS section of the theme’s style.css file are the header block regions which may be available depending on the theme. Adjusting the height of the different header regions can be done here. Look for the header region you wish to adjust – header-top, header-first, header-middle, or header-last – add the desired height (in pixels) and save the style.css. Changing the width of the header regions is a bit more tricky and is probably best to be avoided. Most themes’ overall layout is set as a fixed width and attempting to modify the header regions’ width may cause the theme’s layout to break.
By default Drupal will only display the site’s mission statement of the front page. To have your Drupal site’s mission statement displayed on all pages you’ll need to edit to files that came with the theme as follows:
Open, with a text editor, the template.php file that came with the theme. At line number 110 there is the word break; before the word break add the following line of code: $vars['custom_mission'] = variable_get('site_mission', '');
The changes should look like the following:
$vars['custom_mission'] = variable_get('site_mission', '');
break;
Open, with a text editor, the page.tpl.php file that came with the theme. Look for the following lines of code within page.tpl.php:
<?php if ($mission): ?>
<div id="mission">
<?php print $mission; ?>
</div>
<?php endif; ?>
Change the $mission variable to $custom_mission so that the above-mention lines of code from file page.tpl.php look like the following:
<?php if ($custom_mission): ?>
<div id="mission">
<?php print $custom_mission; ?>
</div>
<?php endif; ?>
The default way your page title appears in the browser’s window title bar and in search engine results, such as google.com, is as follows:
Drupals default page header format
(Site front page) SITE NAME | SITE SLOGAN
(All other pages) NODE TITLE | SITE NAME
This is widely regarded as the best approach, as people reading English read from left-to-right and are usually using a search engine to search for a topic, rather than a specific site. Therefore, it’s arguably more ergonomic to leave the Drupal default.
Changing how your page titles are constructed
1.Open your page.tpl.php file in a text editor
2.At the very top of the file, you should see the following line
<title>
<?php print $head_title; ?>
</title>
<title>
<?php
print "$title | $site_name | $site_slogan";?>
</title>
5.Upload your edited page.tpl.php file to your active theme folder for the changes to take effect.
For a full list of all the variables available, visit the page.tpl.php overview page in the phptemplate section of the handbook at drupal.org - http://drupal.org/node/11812
While breadcrumbs are an extremely useful navigation tool and help visitors of your Drupal site navigate around the site, you may want to completely remove the breadcrumbs.
To remove breadcrumbs from your Drupal web site you’ll need to remove a few lines of code from the page.tpl.php file that came with the theme. The location of the breadcrumbs varies depending on the theme; the lines of code to remove from page.php.tpl are as follows:
<?php if ($breadcrumb): ?><div id=”breadcrumb”>
<?php print $breadcrumb; ?> </div> <?php endif; ?>
It is important to remove all the lines of code mentioned above, if not, there may be a problem with the theme functioning correctly.
Please keep in mind that if the above-mentioned breadcrumb code is removed from page.tpl.php, breadcrumbs will no longer be available at all. The breadcrumb code will need to be added back to page.tpl.php for breadcrumbs to work again.
To add your own logo to the theme you’ll have to upload the image to the web server by going to the theme settings page in Drupal. The theme settings page is located at Administer > Themes > Name of Theme. The clean URL will be admin/build/themes/settings/name-of-theme. Please replace name-of-theme with the name of the theme that you are using.
On the theme settings page you can upload your logo under the “Logo image settings” section via the “Upload logo image” form. When you have uploaded your logo be sure to check on the “Logo” option at the top of theme settings page. When you click the “Save configuration” button at the bottom of the page you should now see your logo in the theme’s logo area.
Some common problems with using your own logo:
Problem: The dimensions of your custom logo are too large for the space provided for a logo.
Solution: You can adjust the width and height of the space provided for a logo by making a few minor changes to the theme’s style sheet (style.css). With a text editor, open the style.css file that came with the theme and look for a line that contains #logo. Usually the #logo line in style.css will be near the beginning of the style.css file and possibly combined with other lines. For example: #header-middle #logo This means that the logo style settings are contained within the header-middle region of the theme. Most likely the theme you are using the logo will be located somewhere in the header section(s). Most of the styles for the header sections of the theme are located near the beginning of the style.css file. Once you have found the #logo section in style.css you can adjust the width and height to suite your logo’s dimensions. For example: your logo is 120 pixels wide and 40 pixels in height; add height: 40px; and width: 120px; to the #logo section.
Problem: Your logo is not displaying after you uploaded your image via the upload form on the theme settings page.
Solution: Make sure that the “Logo” option is checked on.
Solution: You may need to refresh the web page a few time to clear out the browser’s cache for the changes/logo to show.
Solution: You may have forgotten to click the “Save configuration” button at the bottom of the theme settings page.
Solution: Your image/logo may have exceeded the maximum allowable upload file size configured by your web server or web host. This is usually controlled by PHP settings. Please see php.ini file for configuration option on upload file sizes. To avoid the limits of a max upload file size is to resize the image. Photoshop has an option to save an image for the web which gives you great control over the file size of the image while maintaining quality of the image.
The theme’s primary text color is controlled by the html selector in the style.css file that came with the theme. You can find the html selector near the beginning of the style.css file and it looks something like the following:
html { background: #FFF; color: #000; }
The color property within the html selector controls the overall text color of the theme, with the exception of links. The paragraph selector ( p ) also controls the formating of text and color may differ from the html selector; you may need to change the color property in the paragraph selector as well. Color values are set in RGB HEX values, for example, #000000 is equivalent to black, #FFFFFF is equivalent to white. Please note that the RGB HEX values contain a hash mark ( # ) and are six characters in length.
You can read more about using RGB HEX values to set color values in CSS at:
Web colors
http://en.wikipedia.org/wiki/Web_colors
HTML Color Code Chart