themes

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!

Great Post about how to build a site in Drupal

One of the toughest things about Drupal is the variety of methods you can employ in building a site. Do I use Blocks? What about Panels? Views?? Mini-Panels??? GPanels????? AHHHHH!!!!!

At this point, I am using Panels for just about everything. And I really like that. I can easily move a block around on a page. Recreate the page using the Views, Nodes, Menus, etc. that I have already defined. And then I can have variants. So that is the direction that I am taking. But, this is more art than science so there are a many correct ways to do the same thing. So what works for me won’t work as well for someone else.

Here is a blog from someone (Randall Knutson) A LOT more experienced with Drupal than I am. Worth reading if you are at the point where you are regretting using Drupal because of the learning curve. Take heart. This thing is a beast but once you tame it it is SOOOOO cool.

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, panels and more Panels

I have worked with Panels so much today that i want to throw up. But I feel like I am finally making progress. Even though I almost had to roll back my sandbox to a backup.

Panels are good. They allow you to have an easier time with layouts. But they can be tricky. You have to have a theme enabled that will support it properly. Especially if you are looking to have a responsive theme for Mobile devices.

I had an issue with the Panels Everywhere module and the Advanced Forum theme. That has been cleared up for the most part. By that I mean that I am not going to be using Panels Everywhere. Although, the issue really was the default theme template for PE and the AF module. You can have the mods installed and enabled together but when I enable the default template for PE, AF give you an error that doesn’t clearly implicate PE. It was only through A LOT of T&E that I figured that out. I had great help from the AF guy at Drupal.org but it really wasn’t his issue. But, I have gotten around the impasse.

So, here is where I am on this particular subject”

I’m going to start a new tag – “drupal idiosyncrasy” – DI
DI – other themes may “look” available when you are setting up a panel. But that doesn’t mean it will work properly
using adaptive themes AT Subtheme 7.x-3.1 for responsive design with Panels
Chose “override” Drupal block in the panel that I set up
went to structure, blocks and removed the custom placed blocks (from categorized feeds) that were still showing up even though I told the panel to override them.
Told the panel that i want it to be the front page. check the vids from lullibot. too. this is one. http://drupalize.me/videos/setting-multi-column-home-page

now I have the detail that i wanted to have on the front page. This part was tricky and I thought a few times about throwing the whole thing out and going with Joomla. But, I persevered….

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.

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

Theming, CSS and aesthetic decisions

Today I’m going to begin working (again) with the CSS stuff in my sandbox. My environments are all consistent right now (I spent some time over the weekend making sure enabled/installed modules are mirrored and patch levels are the same). It’s amazing how quickly your environments can cease to mirror each other if you’re aren’t meticulous about it.

My prod site is in an OK shape. But there is a lot of work to be done.

AT Subtheme 7.x-3.1 (default theme) – my current prod theme

I have changed my sandbox over to the Omega theme. Did a little tweaking and enabled it on Prod. It’s time to get back into working with the CSS stuff. Omega has a good rep as a responsive theme, meaning it uses media queries to determine screen width. This is how the theme knows whether you are on a mobile device or not.

Production and Development, SSH, Quality and Testing

So I have my two environments up and running. What I need to do now is get them aligned so I can do proper testing in the dev environment before moving the files to prod with a minimum of trouble. So, I have my dev environment on a vm on my laptop. i can access prod from the laptop or desktop via the drupal web interface. I can also access it via SSH and aptana. that’s the way that i can upload the code to prod. but i need to be able to access the dev code consistently from the desktop (the vm is on the laptop and the files are too big to move around).

so i need to be able to access the laptop vm from the desktop. and since they (desk n vm) are on different networks i have to route packets from the vm network to the home wireless network. otherwise, i’m going to have to sync the code files from the desk to the lap, upload the files on the laptop to the vm for testing, then upload from desk to prod via ssh. i think that i might try to get SSH running on the vm centos install then make it accessible to the desk. that would also closely mimic prod. that’s the ticket.

AT Core 7.x-3.1

AT Subtheme 7.x-3.1 (default theme) – my current prod theme