Category: Drupal Theming

More about theming – Devel Themer

What I really want to do is to be able to do whatever I want. Haha. Seriously, I want to be able to customize Drupal so that it doesn’t look like Drupal. So I am now working on theming functions. And to find out how a particular part of my site is generated, I am using the Devel module along with Devel Themer. These used to be packaged together but now they are separate contrib modules.

I had a sort of hard time getting Devel_themer to work properly. It was on the harder side of medium as far as modules go. But, I paid close attention to the issue queue at Drupal.org for the Devel_themer module and I was able to get it all figured out eventually. If you are getting 404 AJAZ errors, look at the queue and you will find answers there.

Lullabot has some good videos on how to use Devel_Themer. Check them out here.

Subtheming TPL files

I need to begin using the Drupal overrides as they apply to the templates, or TPL files. Basically, I have some areas of my site that I want to customize in a way that you can’t do with CSS. Specifically, I want to create a hyperlink out of an area of the block title as it is rendered in my Panel Page.

I am using AT_Core for my main theme. I have this subthemed to a theme called DOCResource. This is a great article by Jeff Burnz about using Drupal Overrides via subthemed TPL files. Since he is the man when it comes to AT, it is AT specific, however, the concepts are pretty universal.

http://adaptivethemes.com/documentation/using-template-overrides

Since working with TPL files can be damaging, I will be making all initial changes to my Quality Environment.

TPL Files and customizing your pages

I need to add a hyperlink to an area of my site. The element comprises a gradient based area with an image over the right hand side. I need this whole area to be a link. But you can’t add a hyperlink with CSS and I don’t want to do it via a module based solution. I want to edit the Drupal files themselves (properly subthemed, or at least submoduled) so that I can understand the product better and be able to make whatever changes that I want to in the future. So, I am going to get the old Quality environment going and test it out there. when I have a procedure in place, I’ll write it up.

Drupal, CSS, Firebug & Aptana

learn drupal docresource

Well, I finally have been able to start with the CSS portion of my site. I am using Firefox with Firebug to assist me. This combo works really well with Aptana Code Editor, my favorite open source editor.

I have a couple of ss to show what to do on a really basic level. if you right click an element you want to know about and choose inspect with firebug, you’ll get a whole bunch of info about it. You can also click the rectangle in the red oval in the top pic and choose to inspect it that way. You

learn drupal docresource

will see the element that you want to inspect in the blue rectangle as above, also in the red oval.

look to your right now and you will see how you can change the element on the fly by altering the css in the bottom right hand window. Notice that I have changed the font of the element to Arial. This way you can test out your changes and then make them to the correct place in prod when you are happy with it. Of course, FB will do a lot more than this but a good start is a good start.

This is a good reference for CSS from W3Schools.com

Theme Developer

OK, While I am waiting for my bank to process my Google payment, I am starting on customizing my AT Core subtheme, named, DOCResource, after my site.

Theme Developer is a cool mod that is described as Firebug for Drupal. But it also can do some crazy stuff with the DOM, like injecting markers so you can see what came from where, so it is not advisable to keep it turned on for long.

There are in addition, functions that need to be run on the prod site so that you can track down issues and bottlenecks. So I am installing the mods but I will not be enabling them.

Customizing my Drupal theme – Adaptive Themes Core

well, it is time that i started customizing my theme. i knew that i would want to do this myself so i put some thought into my theme choice before I started. and I decided to with adaptive themes core.

AT Core 7.x-3.1

AT Core is the framework that drives the responsive layout system and provides an extensive set of tools for theme development. You do not need to enable this theme. Use the provided AT Subtheme to get started.
this theme is pretty basic to begin with. and while it isn’t hard at all to create your own subtheme (and you should do it just to get a good understanding of drupal theme architecture) it is nice that AT comes with one ready to be destroyed. note – if you plan on modifying a theme, make a subtheme out of it first. that way it can still take advantage of upgrades via drupal.org. I also chose it because it is a responsive theme, meaning that it does media queries to determine screen width. This is important for mobile devices and tablets. AT also has good documentation and support. I’ll post links to this post as I find them.
AT on Drupal.org – the main page
AT Documentation – Very good stuff here, and professional service options too.
I have my sandbox in pretty good shape. and it is using the same theme and subtheme. So, I will be doing my development there and then transferring the files to prod. Make sure that you disable any caching that you might have enabled so that you get fresh versions of changes as they are made.

Drupal 7 Presentation – Firebug

Do yourself a favor if you plan on subtheming and install Firefox and Firebug. Google it and read about it and you’ll see why this is such a critical tool for subthemers…

Do yourself another favor and also try Chrome’s Developer tools. you can right click on an element and see all the fun stuff behind it. including the css inheritance. i like chrome more than ff. it’s just faster. even though it is a little big brother-ish. which it is…. but i still like it.

and, i wish that ie would just go away. what a piece of monkey junk….