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

Customizing Superfish Menus? Look to the CSS for most changes

I had to do some tweaking on my Superfish menus today and what I have discovered is that if you are going to use Superfish, get ready to use Firebug and edit the CSS files.

Today I had to make (what I thought was) a really basic change. my drop downs weren’t wide enough for the submenus. i figured that there must be a setting for this but couldn’t find one. So I did some reading and found that to make a change as basic as this, I had to add some css. Not a big deal, but a little surprising.

Fixing my Superfish Menu bar

I have been trying to fix this with CSS. And I just can’t make it work. Why? Because I probably don’t know enough CSS. So, instead of wasting time, i am going to take a different approach.

You can see that the menu bar doesn’t extend all the way to the outer part of the frame like I want it to. the background is an image that is repeated many times

learn drupal css superfish

over and over  so what I am going to do is alter the image itself to include the color portion that I want it to have. To me, this isn’t the best solution because it locks me in with that color, but I also figure that I’ll learn enough CSS along this trip to do what I really want later.

learn drupal images       this isn’t going to show up too well but it should do.

the image on the left is the original. to make the menu      bar fit, i added the menu bar image to the sliver image 
learn drupal images

and you see the end result below. i need to tweak the borders but that can be done with CSS – even by me!

learn drupal images

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.

 

 

JS, CSS and more

Well, my slacking is going to end. by that i mean that i am going to actually get superfish to work on my drupal site tonight. and by slacking, i mean that i have been spending all my time working on the js and css stuff. which has been really fun and cool. here is a really good web site for css aspiritors.

20 Websites To Help You Learn and Master CSS

I hope that the link on this comes through ok. otherwise i am going to have to redo it. but. all things considered, the slog through the nexus of design>programming>form>function appears to be moving. even if it is moving in sort of strange spurts. ok. on to superfish. and i have been using komodoedit a lot. and that seems to be a pretty good program for something that is free. and even gimp is coming along although that one is really tough.