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
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: