CSS

It's been a LONG time since my last post (roughly a year) so I thought it was time to finally post something new. I've been lucky enough to build quite a few Drupal themes lately and below are some bits of code that I use on a dailly basis when adding to or developing custom themes. The nice part is everything below should be easy enough to copy and paste! *Note: All code below is for Drupal 6.

Views horizontal scrollbar

You know that annoying horizontal scroll bar that appears on your browser everytime you hover over a View on your site? This short bit of CSS gets rid of that. Place the following code in your theme's CSS file and away goes the horizontal scroll. div.view div.views-admin-links {   width: auto; }

Admin page columns

Ever built a theme only to have the "/admin" columns display one on top of each other? That's typically due to not enough width in the content area to properly float the two columns. Add this bit of CSS to your theme's CSS file and you will no longer have the problem of floating your admin page columns. div.admin .left, div.admin .right {   margin-left: 1%;   margin-right: 1%; }

Rounded tabs from Zen

I'm a big fan of the rounded "edit" and "view" tabs on the Zen theme and wanted to incorporate them into my own themes. There's a couple of files you'll need to edit but it's really quite simple copy and paste. Be sure to download the tabs images and place them in your themes folder in the "images/tabs" folder so the paths below match up.

This week I had the task of taking a rather long and complicated list and shortening it down into categories with sub lists. jQuery seemed like the best way to go as I've seen accordion style sliding list and things of that sort before. The only thing I hadn't come across was a list with a drop down menu which controlled the list and content below...so I set out to build one as well as teach myself some jQuery (I knew what it was, just never wrote my own jQuery code before).

So the idea here was I wanted a list to appear on the right side of my div which contained categories in which I could click on and have the content on the page, in lists, expand to show the selected list all while sliding away the previously displayed list.

This screenshot/mockup will help better explain the desired look and feel as well as functionality I was going for.

Sounds quite tricky but after a bit of messing around with some basic jQuery code and functionality I was able to get everything working somewhat well.

I first started out by building the header area with the "MOST RECENT" list and "SORT BY CATEGORY" text. I made it so when you click on the "MOST RECENT" link it would drop down a menu with the category listings. These category listings control what is shown on the page, it controls what list will appear when you click on your desired category.

So once I got the header portion built, I then begin making a list wrapped in custom divs for each of the category lists' content. Being that I have five categories I had to make 5 custom wrapped divs. For these divs were controlled by the category drop down list on right.

I started working on an admin theme for Drupal over two months ago in my spare time and just got around to packaging it up offering it up for download. I've used it on a a few client's sites and they seem to like it so hopefully someone else can get some use out of it.

As you may or may not know Drupal has the ability to switch from your site's theme to an admin theme when the user is logged in as an admin and in the "/admin" URL. Typically I used the Garland theme for this purpose as it looks different than any theme I've made so it's easy to tell if you the user are in the "admin" area as opposed to viewing a site. Not to mention the Garland theme looks and and works great too.

The only annoyance I've had with switching over to an admin theme is that when you go to edit a page it takes you to the "edit" page but still uses your site's theme. This can get confusing as you are in the admin menu but yet your theme isn't using the admin theme you selected. To fix this I created a module for my theme which uses my Drupal admin theme for the "add", "edit" and "delete" pages.

Screenshot of my Drupal admin theme:

So if you download my Drupal admin theme be sure to install the module for it as well. Also be sure to activate it through the "modules" page. It probably won't work for everyone but it seems to do the job for me and my clients so far. Feel free to rip it apart and make it your own.

Ready to give it a try? Go ahead and download my Drupal admin theme.

You can also grab the module here.

I'm a big fan of the Simplemenu module for Drupal as it's quite a time-saver when developing a site. It's really handy to have the entire admin menu right at the top of each page.

Clients also love it for it's ease of use and they don't have to navigate to "/admin" everytime they log in and want to make a change to the site. Now they can just hover over the option the want on the top navigation bar accross their browser and drill down to the specific page they want. Very handy and much quicker than manually drilling down to each page. It's been a real time-saver for me so far.

As soon as I installed Simplemenu I knew it was a module I was going to use for quite some time. That's the reason I wanted to skin it and make it look/work better for me and my clients. I also implemented it into a custom Drupal admin theme I am working on which I will release real soon. So check back for that one early next week.

My custom menu:

Although my changes are minor I would stil like to thank the author for creating such a useful module written by Ted Serbinski, aka, m3avrck. I took what he had supplied and modified the CSS, JavaScript (just a little) and added a few new images.

These changes look and work great in Safari, FireFox and IE7. It works in IE6 just fine but the top level menu background doesn't stay colored when you drill down to the sub menus. I'm sure it's an easy fix but I didn't bother researching it much since..well it's IE6. If anyone wants me to fix it then please let me know and I'll give it a shot.

So for now - if you'd like you can go ahead and download my modified version of the Simplemenu module for Drupal.

After working with Drupal for over a year now I have learned many different ways to go about creating a custom Drupal theme. I have tried taking existing Drupal themes such as Garland and Blue Marine and hacking them to pieces while inserting my DIVs and classes trying to get things to work and look right. That just creates a huge mess of code and often contains unneeded elements (code bloat = not a good thing).

I've found that the best method for me to create custom Drupal themes is to first code up the site using static HTML/CSS, as in create an index.html file and go to town. I always code my sites using Notepad2 and then view/test them in FireFox. I also use the WebDev Toolbar so I can see how everything looks on-the-fly as I code my CSS. This really helps as I can code a LOT faster and see my CSS changes immediately.

Once I get everything looking decent (doesn't have to be perfect yet) in FireFox I then open the index.html file in IE7 and begin making IE7 specific changes to my CSS so everything looks decent there as well. I then load the index.html file in IE6 and do the same. Once things look the same across FireFox and IE7/IE6 I load it in Safari to see how it looks there. For this site I kinda ignored some issues with IE6 as it's a pain to work with and I'll get around to fixing them eventually.

So once the site looks the same in FireFox, IE6/IE7 and Safari it's time to add Drupal code to our static HTML file. This is much easier than it used to seem to me so if you follow these code snippets you should be all set...

Doctype to

*I included my CSS files for screen and print viewing (screen.css and print.css)