A K Chauhan's Blog » tabs http://www.akchauhan.com PHP, MySql, JavaScript, JQuery, Prototype, Drupal, HTML, CSS and more... Sun, 04 Jul 2010 20:19:23 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Styling or modifying drupal primary and secondary tabs like drupal.org http://www.akchauhan.com/styling-drupal-primary-and-secondary-tabs-like-drupalorg/ http://www.akchauhan.com/styling-drupal-primary-and-secondary-tabs-like-drupalorg/#comments Thu, 12 Mar 2009 04:21:09 +0000 admin http://blog.akchauhan.com/?p=33 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']);
        }
?>
]]> http://www.akchauhan.com/styling-drupal-primary-and-secondary-tabs-like-drupalorg/feed/ 4