.tpl

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, TPL Files and More

Drupal 7, CSS, TPL, PHP

This colorful little exercise actually attempts to show where the Core and Module CSS and TPL files are located. The thing is, Core really mean Core and Core Module. Together, these are refered to as Core. Module refers to contributed modules and their corresponding files that may or may not supersede the core files. Then, there are the Theme files. These can trump all the rest of the files’ styles if the naming conventions are followed properly. This too-busy diagram also attempts to help me see how I deal with many colors, shapes and layering. I’m not a design guy and I don’t really care for design, nor am I any good at it. But, I have to learn some of it.

Inheritance rev7 – Copy – this is the actual Visio diagram. rename it to .vsd and you can see this up close.

Drupal 7 Core .TPL.PHP files

http://drupal.org/node/190815

this link will take you to a list of all the template files used in the core. this is a great link that has been very useful to me. each template is fully linked to an explanation of the template itself.

these are the files that I am particularly concerned with:

System“modules/system/…”

Validation Tools and Accessibility

well, the holidays are over. while i enjoyed eating three pounds of fudge per day, i am ready to get back in the saddle. coffee in hand, i am now on chapter 9 of shreve’s drupal theming book.

this book has been perfect for me. diving into the nuts and bolts of how Drupal really works. exploring and understanding the relationships between .tpl, .css and .info files in drupal is really the key to understanding how to make the site look the way you want it to.

so, i’m on cross browser compatibility. and therefore, standards compliant coding. here is a great tool. W3C Validator. more to come on this later.

http://www.totalvalidator.com/ for the firefox browser. install this them use the plugin to help with validation.

The Web Developer add-on and Total Validator let you temporarily disable JavaScript for page testing. This is important with forms because many browsers have jscript disabled. google “degrade gracefully” for info on this topic.

here is a section from the book that i found helpful:

Adobe Browser Lab: This convenient and well-designed utility is part of the Adobe CS Live suite of tools. It is available free of charge to owners of Adobe CS5. The tool provides live preview of both static and dynamic web pages. It allows for easy A/B comparisons and basic diagnostics. To use the service, visit http://browserlab.adobe.com.
Browsershots: The site provides a free service that allows you to submit a URL, then check back to see screenshots of the page in all the various browsers you select. While free, it can take a while to get results and there is no support for Apple or mobile devices. Visit the site at: http://www.browsershots.org.
CrossBrowserTesting: This commercial service offers a very wide range of operating systems and browsers, both traditional and mobile. Want to see how your site looks on Win98 SE running Netscape 4? You can do it here! The service includes both real time testing and a screenshots option. The site is available for a monthly subscription fee, or you can just try it out free for a week. Visit: http://crossbrowsertesting.com.

Here is some great info from the book about accessibilty:

The most commonly applied standards for web accessibility are promulgated by the W3C under the name the Web Accessibility Initiative (WAI). A subset of those guidelines, the Web Content Accessibility Guidelines (WCAG), is targeted at web developers. The WAI section of the W3C website includes a large amount of information on what it means to create accessible sites, along with resources to support your efforts.