Drupal Subtheming nightmare with a happy ending

Im modifying the user login form of a normal Drupal installation using the adaptative theme. so far so good, until i started to create some template suggestion files for my subtheme.

The tpl in question is named block-user.tpl.php. So i create my .tpl file and put all the needed stuff inside it. Then I put it in the template directory of my subtheme and .. it didnt work.

• For now the file was in /sites/all/themes/adaptativetheme/subtheme/template/block-user.tpl

The second thing I did to make it work was copying that file on the template directory of the adaptative theme ( the father of my subtheme), and it works!. But why it didnt work on my subtheme?

• The copied file was in /sites/all/themes/adaptativetheme/adaptative/template/block-user.tpl and also in:
  

• /sites/all/themes/adaptativetheme/subthemename/template/block-user.tpl

The Fix
Apparently you have to had a copy of all the parent templates in your template directory. So the parent .tpl file of block-user.tpl.php is block.tpl.php. Its a bug in Drupal6, live with it because it wont be fixed. Why it works on the theme instead of the subtheme, because the Adaptative theme has that file by default. So I copy that file on my subtheme.. to no avail.

Clearing the Cache
I had the Rebuild the theme registry on every page load option on, so i wonder why it didnt work. I cleared all the cache ( Its an options that appears in the module Administration Menu, a must have module ), and Voila!, it worked in my subtheme!, so you must clear the cache when seeing funny stuff happening with your tpl files.

Optional Life Savier Info
Also they must be in the same directory as the parents of your subtheme. So if your main theme saves all our .tpl files in the templateyeah carpet, you need to create the same carpet in your subtheme.

Hope this little article help someone drupaling. Happy coding!

Custom Css Tips for Jquery Tabs

I love Jquery Tabs , it just make your life easier... well, only when you use his custom CSS.

But how about integrating it with your custom CSS, instead of his restrictive-gun-in-head Themes? , of course we know how to create a Tab Menu in CSS, but integrate it with Jquery Tabs is not so easy. So after one day of debugging my own code i will give you some tips to create your custom css for jquery tabs.

Tip 1: Know the classes for the Navigation Tab Bar: There is only one class that you will need to know little grasshoper:

• ui-state-active: As the name implied, this class is added to the tab that is currently selected, dont mind the other classses, you will not need them, this is the silver bullet class for jquery tabs.

So we will need 4 css for know

1. The Default Navigation Bar Css
2. The Css for the a tag inside tha navbar
3. The Css of the ui-state-active bar
4. And the a tag inside the active navbar
   

So the css for this navigation bar(1) will go like this:

ul.grindyMenu li{
background:white;
color:#D09984;
display:inline;
list-style:none;
padding:1px 15px 1px 15px;
}

Then we add the a tag css(2)

ul.grindyMenu a{
text-decoration:none;
font-size:0.7em;
font-weight:bolder;
}

And for the active tab css(3), it will be like this :

ul.grindyMenu li.ui-state-active{
background:#D09984;
}

Finally the a tag inside the active tab (4):

ul.grindyMenu li.ui-state-active a{
color:white;
}

Now there is a small catch, your css file should have those rules written in that order. Maybe here you will not need to follow that tip, but what if you need to create a rule for the ui-state-default class. Do you notice how the active and not active tabs, both have the ui-state-default class? If you declare ui-state-default after ui-sate-active, it will override it:


So make your life easier and put those rules in order, first the default class, and then the active class in your css file.

Tip 2: Know the classes for the Panels, here also we wil only need one class:

• ui-tabs.hide: This is the most important class, this class make the non active panels to hide
  

.ui-tabs-hide{
display:none;
}

And that's it. Put this class and everything will be allright. Happy coding!