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.

Advertisements

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.

AT Subtheming and Panel layouts.

I turns out that I made a good decision when i chose AT Responsive Panels for my Panel layouts. Since I am trying to follow the KISS rule, (keep it simple stupid) i decided to stay as consistent as possible in my layouts. So in going with the AT Core Theme, I also decided to use AT Panel layout for my pages.

home-page

Media Queries

Interested in how they work? Drupal giant Ken Burnz recommends this article.