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.
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.
Find a hex color value with your mouse on anything!
This is a cool piece of software and of course it is FREE.
This nifty little utility will allow you to find the color value of any pixel on your screen by holding down the left mouse button while the utility is running. VERY nice.
Graphic Design and GIMP
Yikes. I haven’t posted in a couple days. I have been stuck in Design H3LL. But, I know GIMP a LOT better than I did. And it is a skill that is worth having.
So using the mighty GIMPShop I was able to go from this:
Which is something that I threw together using some clip art and MSPaint,
And even though I am not a design guy at all, I think this isn’t too bad of a job. and better than the 20 bucks i spent on a logo mill logo.
I took the one image and recolorized it as seperate layers in gimp. I then copied each colored layer, darkened it and placed it slightly offcenter to get a shadow effect. I then used a free font I found, made the two sections of text their own layers and added a black layer behind each, offcenter to get the shadow. exported this as a PNG and added it to the header of my site, where it allows the background to come through nicely. Maybe not the best but not bad for a dork like me! 😉
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
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.
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.
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:
- read up on a LOT of CSS to find out what your options are.
- use firebug to track down what needs to be changed and test how to change it.
- 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.
- 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/*.css