Before I start on this one - let me make one thing clear - recently I have started to do quite a bit of work for JoomlaShack, this article is in no way to be read as an attack on JoomlaShack or my colleagues over there. But I think that this article will highlight the difficulties template designers face. How can they know all the uses (and abuses) that will be thrown at their work.

First things first - this is a great template (Lightfast - from JoomlaShack), I liked it from the first time I saw it. I think on balance I am drawn more to Elavation purely on looks, but I think Lightfast suits my needs more for this specific project.

Biggest Problem So Far

As you will see I have a 3 or 4 line footer at the bottom of the page and this created my biggest problem to date - the footer graphic built into th template is a bit 'slimline' - not very high. It would take one line, maybe two at a push - but nowhere near enough for my needs. The first solution I hit upon was to ensure that my 'footer' module was set to 100% width and then to apply a background colour the same as, or similar to, the graphic.

#footer{height:80px;background-color: #333333;}

This worked - almost, but the template graphic had a white border 1 or 2 pixels at the top. This produced a white horizontal line effectively dividing the graphic from the similarly coloured background

I needed to edit the graphic to 'flood fill' the white border with the same colour as the rest of the image. Now if you know anything about me it is that "I don't do graphics". I am aesthetically challenged - both personally (look at my photo) and skillswise. I seriously cannot put a shirt and tie together and expect them to complement one another - unless they came as a boxed set

That appeared to work - until I used this template's nifty little width changing gizmo. When switched to the narrower view the template switches to a different graphic for the bottom - and was reverting to not placing my background colour immediately above this graphic. Consequently my footer text didn't fit within the footer graphic and nothing I tried would make it work. I tried adding a similar style declaration to the stylesheet that controls the site in this narrow mode but it didn't work.

My friend Waseem (Haaris on the Joomla forums, and a colleague of mine at JoomlaShack) pointed out the error of my ways. The template switcher appends a new class to the body element and the stylesheet has a style applied to
body.bodyfluid #footer{...}
No matter what I applied to #footer it would be outranked by the body.bodyfluid #footer directive.

But with one more change to the stylesheet I was up and running.
I had to replace this
body.bodyfluid #footer{position:relative;clear:both;margin:0px;text-align:center;background:url(../images/footerbg.png) no-repeat center bottom; width:776px;height:46px;}

/* Waseem's Fix */ add these two styles to height:80px; background-color: #333333; the body.bodyfluid #footer line in 800.css

A big thank you to Waseem.