User Interface and Theme


Theme Color Pallette from Nature Inspiration

COLOR PALETTE for Image below

COLOR PALETTE for Image below

COLOR PALETTE for Image below

Add icons to attachments ( files ) depending upon its type

This is one of those theme changes that is must have if your website has lot of content as file attachments.

Check out the post on

So depending upon the type of file the corresponding icon will display, like pdf, mp3, wav, doc, xls and so on. You can practically add any icon you want.

External Links in New Window with Message box

External links to the websites should alway open in new window. Else users will leave your website and may not return back.

Also its good to display a message box stating that they are leaving the website. Use the following method to achive this.

1. Create new file external.js
2. Put the following code in there.

$(function() {
.click(function() {, '_blank');
return false;

In above code replace with your website domain.

Customize User Login Box ( block )

If you want to customize the User Login box so that everything is displayed on one line like this, then add the following code to the page.tpl.php file of your theme.

<?php global $user; ?>
<?php if ($user->uid) : ?>
<?php print(t('Logged in as:'))?> <?php print l($user->name,'user/'.$user->uid); ?> |
<?php print l((t('log out')),"logout"); ?>
<?php else : ?>

" method="post">
<?php print l((t('Register')),"user/register"); ?> | <?php print(t('Login:'))?>

Make the node links prominent or change appearance.

Node links are the links that usually appear on footer of each node, namely - "Read More", "Add Comment" etc.

It is usually a good practice to make it prominent to improve the look of the website.

You will have to modify the

1. Style sheet
2. node.tpl.php.

To make the node links appear like on ( light green ) add the following to your .css file

.links2 {
border-bottom: 1px solid #bbb;
padding-bottom: 0.75em;
margin-bottom: 1.5em;
background-color: #E9FFCA;
color: #235F6B;
border-top: 1px solid #bbb;
padding-top: 0.5em;

Attach Secondary menu under Primary or Move it around

This explains how to attach Secondary menu under Primary like on

You just need to know a bit HTML here. Find this code in your page.tpl.php

<?php if (isset($secondary_links)) { ?>
<?php print theme('links', $secondary_links) ?>
<?php } ?>

Move it below the code for primary menu. Below is the snippet from bluemarine theme.

<?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links) ?><?php } ?>

Highlight Selected Primary Menu item

Selected Primary menu items are not highlighted in default themes. If you wish to have this feature as on then

You will have to

1. Modify Style sheet
2. Modify page.tpl.php
3. Need attached images.

1. Add the following to your .css file. I am using bluemarine theme

#primary {
float: left;
width: 100%;
/*background: url("bg.gif") repeat-x bottom;*/
font-size: 118%;
line-height: normal;
background-color: transparent;

#primary ul {
margin: 0;
padding: 8px 8px 0;
list-style: none;

#primary a, #primary strong, #primary span {


Subscribe to RSS - User Interface and Theme