subtheme

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.

CSS with Panels

It seems that the big problem for me with Panels and adding CSS is that the selectors that are used to style elements are a little too broad. Let me explain: I use Panel Panes exclusively. I also may use Minipanels within Panel Panes themselves. But whatever content I want to display, I use Panels to do it.

So what I wind up with are CSS selectors (.block, html, etc) that are broader than I need them to be. I change the CSS for a border in a Panel Pane for a View and it also adds a border to an Image that I display in the Header via a Panel Pane. No good. So this is what I do to work around this. I have a SS too but it is a mess. I’ll try to explain it.

Look at the image… there are numbers in red that correspond to this explanation:

1 – create a Custom Style for your Panel Pane with the Panels editor. Don’t put much in it. You can use this to do all you styling but what I am trying to do it pin these elements down in CSS so that I have total control. Or more control anyway. Assign this Custom Style to any individual Panel Pane that you want to have these stylings. **

2 and 3- The Style has been assigned to a Panel Panes individually. Looking at the Firebug stuff (yes, I’m just using Chrome at the moment) you can see that each of these Panel Panes Elements now derives their styles from the .pane-plain-box.bs1 selector. So when I make a change to the one selector, only the two Panes that have been assigned that style are affected.

Now, I have to copy that css file to my subtheme and add it to the .info file. As long as I don’t change the style in the Drupal Stylizer or change it on the Panel Pane, the CTools generated name should stay the same and I should not have to worry about the file being overwritten and my changes lost. I think…. I’ll know after a bit but I think that this will work.

There may be a better way to do this. If there is please tell me and I will eat crow all day long. This isn’t the best way to do this I am sure….

Styling Superfish Menus with CSS

I have Superfish in place and I do like it. There are several styles that you can choose from in the block config for SF. They are OK but I want to go with a fairly generic one that I can alter to suit my tastes. So, I have chosen the default style. This uses the CSS file called default.css located in sites/all/libraries/superfish/style

I take that CSS, copy it and put that copy under the name of sf.css and place it in:

/var/www/html/sites/all/themes/adaptivetheme/docresource/css – this is my drupal install

location and my SUBTHEMEd version of AT_CORE.

I then edit the .info file of my subtheme and add the reference to the new CSS file I have added. Then, I flush the cache and check the CSS being used via Firebug.

You can see that the CSS file referenced is the new one that I have created. Now, I can change all the SF CSS that I want.

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….

Drupal 7 Theming – Omega

I’m getting ready to hit the ground running with theming. I have an Omega subtheme in place on Prod and Sand. It is functional enough in Prod to be left alone for now.

One thing about Omega. It’s meant to be subthemed. If you want a theme that can be implemented quickly and easily, and that looks good out of the box, you might want to keep looking. From my experience, it may be better to plunk down $100.00 US (or o) and get a premium theme from one of the many companies that develop them. I’m going with Omega because I want to learn the process/product more so than make my prod site look pretty. But I still want to do that too.

One resource that I found helpful not only for theming but also for understanding more about the ways that the presentation layer of Drupal works “under the hood” is Drupal 7 Themes by Rick Shreves. I haven’t even finished it yet but it has been really insightful for me, helping me to understand .info, .tpl, .css and other files that comprise Drupal themes. If you need a good theme resource, check it out. and this blog. 😉

One of the good things about the Omega theme is that it is setup for subtheming. Subtheming isn’t difficult at all but why not take all the breaks that you can? Drupal is already tough enough. Plus, I chose it because of the many high profile web sites that use Omega. Here is a part of the list.

Plus, Omega is really well documented. Here are some links:

Read More: Informational Micro-Site – these links are copied from Drupal.org

Omega Theme and Subtheme – CSS

well, the holidays are upon us and i have been pretty busy. so here i am trying to play catchup.

i have decided to go with the omega theme. it has several points that have made me choose it.

it has an html5 subtheme starter kit.
it is pretty well documented – http://drupal.org/node/819164
it is a responsive theme, meaning it will execute media queries that will assign a specific css based on browser size, which means it is easily adaptable for mobile, which is the size that it is really meant to be used with (mobile) first.
it is designed to be subthemed so that the core theme can be updated without impacting the subtheme that you create.

there are many elements that go into the successful creation of an Omega subtheme. I suggest you read the whole handbook. But, here, I will skip to the Omega CSS particulars.

global.css = global
yoursubthemename-alpha-default.css = default
yoursubthemename-alpha-default-narrow.css = narrow
yoursubthemename-alpha-default-normal.css = normal
yoursubthemename-alpha-default-wide.css = wide

it is important to note that these css files listed also indicate how the css files are “stacked” or “inherited”. What you see is that mobile devices are dealt with first. and that the layers are stacked up to a “wide” monitor arrangement. this encourages you to write “lean” css code.