theming

CSS Tip – Customize without Theme Intercepts

A thorough knowledge of CSS is a must for customizing a layout using Drupal. Today, I needed to move an input field on a form. The issue is that the field shares its Drupal defined selector class with several other fields of the same type on other forms. Fix one form by the selector, break the same field on a different form.

By using the CSS ID of the parent form, (which is several divs up in the HTML) and inserting a space in between the ID and the class selector, I can zero in on the particular field that I want. The other way that this would have to be done is via an intercept at the theme level, which would be more involved and require subtheming, PHP and a TPL file. Using the two selectors together is easier for someone who doesn’t want (or know how to) take that approach.

Add a custom hyperlink to a View

This is similar to what I did last night with the More buttobn PNG file. I have the same file in a Panel Pane for a View that I put together. And I want it to go to a completely custom URL that links to a searchable View of the same aggregator items.

First, I need to get the link and the text on the screen. Since it is View, there are better, more flexible options than there were on the Block that I was working with last night. I decided to add a Link via the Header part of the View as seen below. Because there is a text area option for the header and you can place full HTML in there, I was able to add all of the styling elements directly in the header. So, it is really Inline CSS. Which is fine for here because I want complete flexibility over the element. I added positioning elements, opacity and a title to the More text and I now have my link right on the More PNG file button.

One Image – Many links – CSS, image backgrounds gradients and creativity (cheating)

I have been trying for days to figure out a way for this idea to work. This is CNN’s web site. Very nice site. About as good as you can get. I really like the “More” button that the site uses. so, i reverse engineered it and this is what I came up with, to the left and a bit down. you can’t really see it from the ss but the more link that is native to the Drupal Block for the Blogs, Forums, etc. is now nested behind the image that i recreated from the cnn site via Gimpshop. You can see the progression and how I got the darn thing where it is. First, to get the gradient background with image inserted into it is a whole other set of issues that i have covered in other posts. I just needed a way to make the More button PNG file function like the text link. So, I simply moved it (the native More link) to where the More button PGN is located via some CSS and then, I set the More link’s (from Drupal) opacity to 1. You can see it in the SS. now, because the custom style that I have used for these specific panels is consistent, (and they all have 5 items for the preview which means their height is the same) this

THERE ARE SOME CAVEATS

AT THE BOTTOM OF THIS POST – and sorry for the messiness. I don’t care too much for WordPress.com.

CSS adjustment works on all the Panels that I have it enabled on. Very nice now that I am at this point but there was quite a bit of work going into it.

The More button PNG file is not a piece of Drupal content; it is not a node. It is a simp
le PNG file that has been uploaded to the images dir and referenced in the CSS.
I do use the Link Module (the logo is a prime example) to add urls to images but that means that the one image can only have one url. I don’t want to have to upload a separate PNG for each more button then have to keep track of them all. Plus, adding a node to the site and then having to move that around would mess up the consistency with the custom panel style. This way, I have one image that essentially has more than one link. I know, I know, not really; i have cheated. But the upside to using the Native ore Link is that I don’t have to worry about the target; it’s already in there. I do realize that there may be a better way (I am sure of it) to do this in code with a custom module maybe, but i’m not at that point. and I need to keep moving on the project. and this way does have an elegance in one image
=
multiple links via CSS.

How to do Basic Styling with CSS and Drupal – Final Post

In regards to CSS and Drupal from a high level perspective, this is the last post. Any other CSS stuff will involve specific Drupal parts like Superfish Menus, Views, Panels, etc. But here is what I have and what I do to make CSS changes in Drupal.

What I have:

Hosted Drupal site from Blackmesh Hosting, the BEST hosting in the known universe
File System access to the server via SSH with the proper permissions
Firefox browser with FIREBUG
Aptana Studio 3 Code Editor
Lots of CSS Reference Books

I have a Sandbox environment but I don’t have to use it for CSS because of the MIRACLE of Firebug. I also normally use Chrome but the Firebug version for Chrome doesn’t do it for me.

How I test/make CSS changes:

Browse to the site with Firefox
Right click on the page and choose “Inspect Element with Firebug”
Click on the second icon in the top left corner of Firebug. Looks like a rectangle. This tool will allow you to track down a specific element on your page. Click an element.
The element’s HTML will be highlighted below. Its CSS will be on the right.
You can use your mouse to enter a CSS element and change it.
***Use the arrow keys to move values up and down. This is a powerful tip. You can use the arrow keys to scroll through available CSS options even when none are listed explicitly. Just play with it and get used to it. These changes are dynamic and are totally isolated to your browser if your setup is like mine***
When you have a change in place that you like, track down the CSS file using the right hand pane of Firebug. If you hover your mouse, you will see the path to the file. The CSS line number will also be listed.
****DO NOT HACK THE “CORE” THEME CSS FILES**** Make sure to subtheme what you are changing. ****ALWAYS**** Don’t put yourself in a position to have to skip an upgrade from Drupal.org because you changed a file within the theme and not the subtheme. Or worse, lose your cool changes because the upgrade replaced the CSS file. Make a subtheme. Look up how to do it. It isn’t hard. But make sure to do it.
Now that you know what CSS file you need to work with, use your SSH file browser to fine the correct file. Double click it in the right hand side of SSH. If confiured properly, Aptana will open along with the file. You can make your changes, save them and SSH will sense that the file has been changed and ask you if you want to overwrite it. Click Yes
Open a different browser and check out the change. Use Chrome, Safari, FF, IE and a mobile device to make sure the change looks good on all platforms.

That’s it! You are now a Drupal CSS wiz!

One small CSS change to my Drupal Home Page

start learning drupal - docresource.org

I want to move the whole page down just a little bit. My logo is flush against the top of the page. I just want a little head room. So, I want to do this via CSS.

Using Firebug and Firefox, i right click on the top of the page and choose inspect element. this doesn’t get me right where i need to be but it is close.

the two ss will show you everything that you need to see in red outlines. by using firebug, i can trace down the element I want by simply digging a bit into the

lower left toolbar of firebug. Then, on the right, i see the margin area that I need to change. I can make the change in FB in a completely safe way to make sure that the change is the one that I want. the right hand side of FB also shows me the CSS file that it is coming from and even the line number that I need to alter.

start learning drupal - docresource.org

I can then FTP the CSS file over SSH, open it with Aptana (or textpad, if you like) and change it. SSH will sense the changed file and ask me if I want to overwrite it. I do and then the change is a part of prod. Very easy, very safe and very nice!

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 your theme

Once again, I have a book recommendation for you. And this one may be the best of any that I have picked up. Ric Shreves’ Drupal 7 Themes. This one is great. But I do have to warn you that it isn’t for novices. I started reading this one several months ago and decided that I needed to brush up on some PHP, CSS and HTML stuff, AND learn more Drupal before I could really make use of it. But if y Learn drupal ou are at that point, where the idea of adding a content type for a specific need is understood, where the files that go into a theme are reasonably well understood, then this one will be for you. This is the book that I am really going to be able to make use of going forward in my theming.

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.

Panels

Today has been a challenging day. I’m not exactly stupid but sometimes Drupal makes me almost feel like I am. But I kept at all the panel stuff and I’m getting over the curve with only a mild headache.

One, use the Precision theme for Panels Everywhere. I stumbled across this theme during part III of the video series that I posted. It was only one reference. I missed it once. http://drupal.org/project/precision

Also, as I have learned more and more about Panels, and Panels Everywhere and how they integrate with themes (or over ride them) I want to make sure to use a Responsive theme as well. So I did some more looking around and I found that Adaptive Themes has a responsive theme for Panels Everywhere.

http://drupal.org/project/at_panels_everywhere

working with this now. watch the whole series on youtube that I posted; very helpful. will post more later.

Adding CSS to a specific element in a subtheme

Using the Omega started theme, i decided to change the font size of an element on my main page. if you don’t quite follow everything here, go back and read the last two posts. they pertain to this.

Use Google Chrome
Right click the element, in my case a block title
Choose Inspect element. The chrome dev tools will launch at the bottom.
Look at the HTML part of the element. In this case it is h2.block-title – <h2>blah.com</h2>
Look over at the right hand side. You will see the CSS files that apply to the element. the one at the top is the last one to apply. in this case it is not in the subtheme, but the parent theme, omega, itself. here it is:

media=”all” omega-text.css:49 the 49 is the line number in the css

h2.block-title {

font-size: 18px;

margin: 0;}

put your mouse over the omega-text.css:49 part and you can see the full path to the file. i didn’t expect this; i thought the css file for the block would be in the subtheme and not the parent. so, i want to change it. but i don’t do it in the parent, i do it in the subtheme css.
omega’s subtheme has a default css called global.css. i add this to that file:

media=”all”

h2.block-title {

font-size: 78px;

margin: 0;}

because of the way Drupal inheritance works, this MORE SPECIFIC file will over ride the same defined CSS element in a different file.
I save, refresh and i see the change. Now the change isn’t perfect because all the block titles are now too big. But the tools now show that the “top” file is the global.css file and the h2.block-title reference in the omega-text.css file now has a ~~strike through~~, meaning it is overridden somewhere.
so i’ll journey to the template file next to see how to give that one block a specific css definition.