Tag: design

Advice about Menus

Menus in Drupal can be a little weird. Even with Nice Menus installed, the menu system often seems inflexible, rigid. I have frequently been tempted to create all my own menu items with paths entered manually. But that would be a big mistake. One really important tip is always to let Drupal create a menu item for you (on just about everything that you think you may want to have on a menu one day) and then assign the item to a “holding” parent menu, where it is available but “out of the way”. That way you can always go back and assign it someplace relevant to its function. And, the system will keep up with the path in case it changes, like a view that you change the path on long after its creation.

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.

Minipanels, Panels and the flexible, Responsive, layout that I have wanted

Well, I don’t really know why I didn’t make this work better quite a while ago. If you need flexibility in your page layouts and you use a lot of Views, then I believe that this is the way to go. Use Panels for the overall layout and then plug in smaller bits of content within the Panel locations using Minipanels. I tried using them before and I think that I simply made a couple of mistakes in implementing them. But now that I know a little more than I did before, I have used them successfully and their implementation is going to be a real Godsend to me.

learn drupal - minipanels

 

Here is a little image of what you can do. The layout here is a standard AT_Core layout that I have subthemed. I used Minipanels to add the smaller black boxes in the layout. Now I can have two elements at the very top of the page without having to use so much CSS that I run into other problems later, especially when I view the site on a mobile device. And the page is all Panels so there is a lot of consistency. The only issue is that I have to edit the Minipanel separately from the rest of the panel page.

 

Gpanels and a more flexible layout

I have been bumping up against some of the limitations that Drupal imposes on layouts. There are ways around just about any limitation Drupal may have, the trick is to find and use the right one. So, I flirted with the idea of using Blocks and Panels together. But, as seen in the earlier post, I have nixed that. CSS can provide many placement options but I believe that really big changes need to happen at the level of the theme, in the code. So, I started looking at AT’s Gpanels. These are code blocks that can be inserted into the page.tpl.php file that will give more layout options. I think this is going to be the way to go. This solution supports responsive design as well.

  • Need to use Panels
  • Need Responsiveness built in
  • Need more layout options
  • Don’t want to use Blocks at all
  • Need to use Views

OK, So I can’t use GPanels because it is Blocks. Dropping this. Going to try Panels Everywhere again. I failed at that once but I’m going to give it another shot. I know more now so I bet that the issues that I was having will be overcome.

Blocks and Panels together

I’m now leaning towards using some blocks in my page design. Here is something to think about.

I have been using Panel Pages almost exclusively for my page designs. But what I am finding is that I believe that it will be beneficial to use some blocks for things that I really never want to change, regardless of the parts of the site that the user navigates to. These parts right now mainly include the header and the menu bar. I believe that i will always want to have a few specific elements there. they will never change. So, I am enabling those with Blocks and then the “middles” of the pages with Panels elements. I believe that this will trim up the amount of CSS that I have to add to a site. And I believe it will help with the cross platform experience too. meaning mobile….

I’ll have to do a little tweaking, but I believe that it is going to provide a better framework for me. It’s like the servers in a farm; they all have the same base build regardless of the application that will eventually live there. That type of consistency always made sense to an infrastructure guy like me. Don’t know why I didn’t think of the parallel sooner except that I am really not very good at this type of stuff. But, when monkey-man do something over and over again, monkey-man get good at it. ;-)

after ten. must sleep.

GIMP and Images

I don’t like graphic design. Mainly because I am not good at it and it is hard. But there are a few things that you probably need to be able to do in GIMP. Don’t get me wrong; it (GIMP)  is a great program. Complicated though. Like Drupal

Being able to take an image with a white background and isolate it so that it

Image

sits on your background unobtrusively is a great thing to be able to do. Here are a few hints how to do this in GIMP to go from this on the right to the image below. And because I have integrated images using the linking feature (look it up in the earlier post, it is under LinkImage module) it is also a link to the sponsor’s site. Very nice.

Image

This is not a step by step for GIMP; these are the highlights.

  •  In Gimp create a background layer that is transparent.
  • add the JPG or whatever it is as a layer above that.
  • Use the Magic wand to isolate all the white part of the top layer, the white being what you don’t want to see in the final image.
  • as you delete it, you will see the transparency layer show through as the checkerboard. it will begin to look like the image at the bottom
  • when you have removed all the extraneous white, export the image to a png. it will now show as a float over the background that you have and will appear as seen on the left. this is a great thing to be able to do to process images. and the wand tool will work with other colors if you play with it a bit.

33

More… Custom Styling with CSS

I have been doing a lot of CSS work and it is all going pretty well. The main thing to do is:

  1. read up on a LOT of CSS to find out what your options are.css2
  2. use firebug to track down what needs to be changed and test how to change it.
  3. alter the css file or the inline css. inline css can often be changed from within drupal if you have a content type with some text. The title text on the SS below uses inline css that i added via the “source” button of the CKEditor module on that particular piece of content.
  4. subtheme all your css files by copying the ones you need into your subtheme directory, making sure to note their existence in the .info file for your subtheme.

 

CSS Files for Superfish within a subtheme

I have three Superfish specific css files that I have had to work with. Since there are now quite a few css files in the subtheme, I have created a subfolder for the superfish ones to go into. This is really important because one of them has the great name, default.css. so it needs to go into a sf specific home. here is a SS:

Make sure to change the .info file to reflect the new folder. Something like, /css/superfish/*.cssImage