Hi all,

I have had some difficulties tailoring the Rockettheme Afterburner template and hope for some guidance!

In simple terms I was trying to load two modules (Stalker and the core Search) to the "top" position (right hand side of the header/banner) and have them nicely align right. However by default the second module appears in the centre of the screen (as the CSS on #header .module includes "float: right;").

My first workaround was to use Modules Anywhere in the top position with this picking up the two modules that were assigned to a new topright position that I created. You can see this on the live site sag.org.au. Even here there were some apparent gremlins with IE8 that I solved by installing the IE compatibility plug in and setting IE8 to emulate IE7.

But this workaround appears to fall apart when I want to construct a URL containing just the dynamically created header and main menu for inclusion in pages generated by another application. It appears that the Modules Anywhere module only works when there is a component on the page - as soon as I delete <jdoc:include type="component" /> line in the template index.php page the Modules Anywhere output disappears.

In any case this workaround seems clunky and seemed to lead to minor inconsistencies in rendering in different browsers.

So I have recently created a second module position "top2" in the template index.php page so that I could apply whatever CSS I need to in order to address the positioning issue.



It is probably easy enough and I thought I had solved it with the temporarily inline CSS (combination of new divs with floats and clears) in orphan test page sag.org.au/site-header.html (made with a copy of the afterburner template). Looks fine in FF3.6 but IE8 is not there.

Alternately sag.org.au/site-footer.html shows template html with only the newly added new template position (as per the code snippet above). This might be an easier starting point if someone is prepared to look at the code for me with Firebug.

I thought it should be relatively easy to use CSS to have the top2 position appear on the right hand side immediately below the top position - with the logo appearing on the left as per normal. I hope my problem is just my lack of hands-on CSS experience and someone will be able to help relatively easily.

Any takers?

David

CSS



There you go, that works in my head.

btw I made the heights and widths up so you'll need to modify them to match your template.

and the display:block isn't needed since you have that in #logo for the click hot spot.

Thanks Peter.

I tried your solution which made sense to me but it did not solve the problem. I have tried to attach two screen shots of what it produced in Firefox and IE . Alternately at least for a while it is at sag.org.au/site-footer.html. I am guessing that there is something else in the template that is in conflict.

I was thinking further about it myself and think I will next try setting the top and top2 positions as absolute positions though this may lose some of the template's flexibility.

Any further ideas?

David

Hey David,

Yes your missing your floats and widths for the containers of the left and right elements.

I added the styles inline in firebug there so you can see.

I also changed top to topContainer incase there is another #top css style.

Please don't implement the css inline on your site though.

Peter

Thanks again Peter.

Unfortunately I cannot see what you have done but do take confidence that you have shown in can be done.

Here is where I am at:

1. I created duplicate versions of the afterburner template, by duplicating the existing afterburner folder to two new folders and adding _f and _h to the folder name and the template name in the respective templateDetails.xml files. Both new templates showed in the backend template manager and I assigned each of these templates to a single menu option/page: site-footer and site-header respectively.

2. I assumed that I could now edit the relevant index.php and light3.css files for these new templates independently of the core afterburner template that applied to the rest of the site. This seemed to work fine for the index.php file, though I had to change its file permissions from 555 first in order to save changes.

3. However I am not so sure with the light3.css file. Firstly when editing it in the backend template manager I note it is listed as Unwriteable. Having said that changes I made either via the backend template manager or via FileZilla/NotePad++ seemed to be saved normally - and were still there when I checked later. The real crunch though is that when I use Firebug I don't see any sign of the CSS changes I added. It appears as if the new template is still using the original afterburner CSS file. I have checked the templateDetails.xml file and the reference there to the CSS files refers to it being in the css folder - this would seem to be relative to the template root folder but it does not seem to be working that way. Is there somewhere else I need to specify the CSS folder or the template root directory?

4. The other thing I noted is that when I track the CSS by inspecting the search box element in Firebug, CSS more specific than at the div header or top level comes from the module, module-body and search classes. Although I don't see any float css anywhere, I wondered if what I apply at the div level might be disinherited by more specific CSS.

Quite prepared to accept that the issue could be in my use of Firebug or in my understanding of how templates use their associated files.

Cheers - David

OK - answered my point 3 - found that the css file location is hard-coded into the template's index.php file.

David

OK, I think I have solved my problem.

The main difficulties were not surprisingly a combination of the CSS specificity layering in the Afterburner template, some residual browser behaviour differences, and some misunderstandings on my part.

My first incorrect assumption was that when I duplicated a template folder, renamed the folder, and then the template name in the templateDetails.xml file, that pages assigned to that template via the Joomla backend would use its CSS files. Nope, had to change the hard-coded css file reference in the templates's index.php file as well. Should have thought of that earlier - or at least tested my assumption earlier.

Second lesson was that time spent mastering Firebug saves time in finding the particular css to modify - I wasted a lot of time adding in Div IDs and Classes to no effect with the css attributes being effectively set by Afterburner or an extension at a lower level.

The final simple solution was to leave both modules in the "top" position and
a. Add module class suffix searchTopRight to the Search module
b. Add the following css code in the Modules area (under #header .module {float:right;margin-left:325px;} )
i. #header .module-body {padding:10px 15px 0px;} >> this removes bottom padding that affected IE's placement of the logo image
ii. #header .module .searchTopRight {position:absolute;right:8px;top:28px;} >> this sorted the alignment problem with the two modules in the Afterburner "top" position

Of course this works as I do not expect anyone else to be adding further modules to this position - at least without involving me.

With this I was able to drop use of Modules Anywhere and was then able to create alternate index.php pages for just the site header and just the site footer - see www.sag.org.au/site-header.html and www.sag.org.au/site-footer.html respectively, something I could not do with Modules Anywhere involved as it seemed to require the component output to do its magic.

Good learning exercise - very frustrating at times - and of course none of it chargeable...

Thanks Peter for your help.