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.

Add an easy to manage Footer

My site is coming along nicely but I needed a simple, but appealing footer section. I use Panels and have gotten pretty good with CSS so I put this together as shown:

Image

Image

Here is a summary of what I did to make this.

  • I created a panel style for the footer element called footer1.
  • I edited the css for footer1 in my custom css file in my subtheme and added a background image, a little 1k blue gradient sliver, that is repeated via css to cover the entire bottom of the page.
  • I made sure to check the “make this style available to other..” as seen here. The name that you give the region/pane will then be easily assigned to other panel elements in the in-place editor
  • Create a custom menu with whatever you want. Add that menu to a Superfish block. The superfish menu block doesn’t have to be handled by the Block Admin at all; it will be available via the in-place editor in Panels under Misc. as seen here.
  • So once I have configured the Superfish settings for the Block the way I want (without enabling the block in Blocks Manager at all) it will be ready to go. In this case, I have used CSS for the superfish menu I created to center the menu, make the text color white. That is tested in Firebug and Inspector (the chrome tool) and then added to my custom css file.Image
  • Since the background image and the menu are separate entities and handled by different css classes, they can sit on top of each well well.
  • Now, On any Panel page that I have, any at all, all I have to do to add this footer is add the fotter1 style to the region in Panels Pages, and add the Superfish Menu from Misc as a piece of content, also in the Panel in-place editor.

This is a little complicated to get set up. But I now have a lot of flexibility on the footer. It is easy to maintain (the menu items are just menu links in the standard m

enu config) the footer image takes a few clicks to insert. and if I wanted to update the image itself, all i would have to do is place a new “sliver” image with the same name in the same folder where it currently resides. Quite nice once it si in place. If you want more detail, let me know and I’ll be more specific.

  • Image

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

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

learn drupal - css and superfish

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.