Posts Tagged tabs

Styling or modifying drupal primary and secondary tabs like drupal.org

If you want your drupal website’s primary and secondary tabs in same style like drupal.org have in “bluebeach” theme. (See the below graphic.)

Durpal styled tab

Drupal styled tab

Then you have to create a wrapper for tabs so you can put the rounded corner images on both side of tabs. like this

<span class=”a”><span class=”b”>Tab Title</span></span>

But the default “garland” theme does not provide this wrapper. So, you have to put this wrapper by customizing theme. Here I am just illustrating the code that you need to create wrapper around the tabs. After that you need to put the necessary style in your CSS files.

You need to change the “theme_menu_item_link()” to put these wrappers in tab. I am using the code of Drupal 6.9 in this example but I think this approach will work in all versions of Drupal by little tweak.

Existing code:

<?php
	function theme_menu_item_link($link) {
		if (empty($link['localized_options'])) {
			$link['localized_options'] = array();
		}
 
                return l($link['title'], $link['href'], $link['localized_options']);
	}
?>

New code (With changes required)

<?php
	function theme_menu_item_link($link) {
		if (empty($link['localized_options'])) {
			$link['localized_options'] = array();
		}
               if ($link['tab']) {
			$link['title'] =<span class=”a”><span class=”b”>. $link['title'] .</span></span>;
			$link['localized_options'] = $link['localized_options'] + array(’html’ => TRUE);
	       }
 
               return l($link['title'], $link['href'], $link['localized_options']);
        }
?>

, ,

4 Comments