tabs reconfiguration

bwv - October 6, 2008 - 22:01
Project:Abarre
Version:5.x-1.0
Component:User interface
Category:support request
Priority:normal
Assigned:couzinhub
Status:closed
Description

I would like to alter the appearance and location of the tabs, so that they look and function in a manner identical to those in the moleskine theme. Is that within the realm of the possible, and if so, how would be the best way to approach it? Many thanks for your kind assistance.

#1

couzinhub - October 6, 2008 - 22:17

That's a little bit more complicated than the sidebar issue. You need to do 2 things :

First, in style.css, remove the code from the line 490 to 515 :

div.tabs{
top:5px;
right:5px;
position:fixed;
z-index:999;
}
ul.tabs{
text-align:center;
background-color:#FFFFFF;
padding:0;
border:5px solid #c00;
}
.tabs .tabs li{
display:block;
}
ul.primary li a{
font-size:14px;
background-color:transparent;
border:none;
margin:0;
display:block;
}
ul.primary li.active a{
border:none;
background-color:#cdd;
}

Then, open the page.tpl.php file, and move the line 19 :
<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
to line 55 , after the title, and before the help :

<?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
<?php print $help; ?>

That should do the trick :)

#2

bwv - October 7, 2008 - 09:16

Yes, it did, thank you very much.

#3

couzinhub - October 7, 2008 - 16:32
Assigned to:Anonymous» couzinhub
Status:active» fixed

#4

bwv - October 7, 2008 - 18:26

Hi, one follow up please: is it possible, now that I have reconfigured the tabs, to make them look like the tabs in the moleskine theme? Thanks again for your help.

#5

couzinhub - October 7, 2008 - 18:41

That my friend is quite easy, just find out in moleskine what are the css rules that create the tabs design, and copy paste them to abarre stylesheet. It is located from the line 511 to 536 in moleskine's stylesheet. Don't forget to also copy the images used for the tab design. This might work, but there might be some adjustment to do.
I think that it might be a good css exercise, and also, if ou are not using it, I really recommend that you try the firefox addon called FIREBUG, that you can find here : https://addons.mozilla.org/en-US/firefox/addon/1843
It is the best tool to tweak our css around.

Cheers

#6

bwv - October 7, 2008 - 18:58

Merci!

#7

Anonymous (not verified) - October 21, 2008 - 19:01
Status:fixed» closed

Automatically closed -- issue fixed for two weeks with no activity.

 
 

Drupal is a registered trademark of Dries Buytaert.