• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Default XF Footer Additional Boxes

Status
Not open for further replies.

Anthony Parsons

Well-known member
I got bored today, so here is a quick style mod you could install to create a custom footer addition to the default style.

*** This is purely a play around and by no means is it necessarily feasible ***

### Huge thanks to Floris from Xenfans for teaching me how to use hooks from his below example he uploaded here. Much appreciated Floris. ###

Screen shot 2011-11-16 at 2.35.24 PM.webp

Screen shot 2011-11-16 at 2.35.55 PM.webp

Installation

Install the addon via uploading the /library/ folder

Install the .xml file via the addon system.

It will create two templates and a property style menu. It does not affect the default XF footer in any other way.

I have shifted the default XF colors, etc, out of the @property attributes to minimise issues with colouring, though you could put them back within them in the footer_custom.css template and control them uniquely from the new style property tab created.

Upgrade

Choose upgrade from the previous version and upload the .xml over the prior version.

***********************************************************************************************
Revision History

V3 - Fixed bug with links inheriting default footer block styling.
V2 - Added option to enable / disable per style back into footer_custom template.
V1 - Upgraded manual template installation to hook system.

This will install on any XF version where the footer template contains the "footer" hook.

*********************************************************************************************
 

Attachments

I've taken your .xml, changed "version" from customFooter to 1.0.1, build from 0 to 2.
Then I created a .php file that uses the footer hook to inject the footer_custom template you made.
And a code event listener for template_hook to make it all work together.
I haven't touched anything else.
I like to use this on one of my sites, but I prefer to not customize the footer template. This allows me to do that.
I also didn't do a conditional check, because if you don't want to show it you could just disable the plugin.
Feel free to use my customization to your addon in the next update of your .zip, if you want to.
 

Attachments

Awesome Floris.... I haven't worked out how to use hooks yet, so I will study your code and try and learn it.

I hope you'll be bored tomorrow too! :D
Yer, I am making them for the user ranks floating around, I want to make a few different footer styles, and also to cater for Flexile...

But now I have to study Floris's code, as I want to use hooks, just don't understand how to at this point. Hopefully this will allow me to learn quick enough for future additions.

I also don't like any template edits... so if I learn this, then I can do more bits and pieces for others without such issues. Actually, I despise template edits, hence why I did this in this fashion using its own templates.

The idea was to allow people to play around with different methods, ie. you could turn off box 2, increase the width on box 1 & 3 for a two box layout, etc.
 
Ok, thanks to Floris, quickly learnt the template hook system, got it sorted now.

Have made some adjustments, credited Floris for his awesome teaching skills via his example uploaded above, and now upgraded the initial file to use the template hook system, which was actually much easier than I thought to work out.

You could upgrade the first version if you don't want to use template edits. Otherwise, the first version released is otherwise identical other than using hooks.
 
Basically you create a listener event in the .php code that is sorta like

if the case is that we run into this code, get our custom template, and append it to $contents

Then to tell xenforo it should do something by going into the admin area > dev tab > code event listener, and select template_hook and the two input boxes are left: the class as in that .php file, and the right: the event (like the name of that public static function)

The name of the class is basically the directory under library, any sub dir, and the filename
so library/XenFans/FooterBoxes/Index.php results in class XenFans_FooterBoxes_Index

The event is whatever you call it basically. I just go with templateHook

Technically i might have explained this incorrectly, but that's basically how it is, i've kept the index.php file and code event listener (which is inside the .xml) as simple and forward as possible so tracing back how it's done shouldn't be too hard.
 
Anyone else having issues with the zip file? When I go to unzip the file I get this error: A problem is preventing this folder from being encrypted. Any ideas???
 
Anthony you are so gorgeous when you're bored!

I think this could be amazing if I could put it at the top instead of the footer.
Three different notices boxes WHEEEE!
So Floris could you magic that? - to position it?
anthony-boxes.webp
 
Anyone know why the the boxes would only be allowing a single word per line when I'm entering HTML and such in them? I got box 3 to work fine, but boxes 1 and 2 are apparently not liking the content I put in them or something. When looking at the HTML source and CSS, I see no reason why it would be doing that.

footerboxes.webp
 
I think this could be amazing if I could put it at the top instead of the footer.
Three different notices boxes WHEEEE!
So Floris could you magic that? - to position it?
Change the hook location in the Listener.php file from "footer" to the hook location you want it to appear.

OR

Enable debug mode: http://xenforo.com/community/threads/frequently-asked-questions.5183/#post-248490

Go into > ACP > Development > Code Event Listeners and uncheck "Custom Footer"

Then find the relevant templates you want to insert the footer boxes and use:

<xen:include template="footer_custom" />

to call the template manually into the position you want it to be.

When looking at the HTML source and CSS, I see no reason why it would be doing that.
Care to post the HTML and CSS you're using? The boxes don't just distort... if you don't close a tag / nest them correctly, you may be creating a problem. The boxes already use XF default baseHtml class to correctly render HTML.

The boxes are ordered, Box 3 (floats right), then Box 1 (floats left) and Box 2 does nothing, as it will automatically fall between them both due to floats and widths.

The reason its done that way is to ensure the left and right boxes correctly reside on their respective margins, the center box centers automatically.
 
Care to post the HTML and CSS you're using? The boxes don't just distort... if you don't close a tag / nest them correctly, you may be creating a problem. The boxes already use XF default baseHtml class to correctly render HTML.

The boxes are ordered, Box 3 (floats right), then Box 1 (floats left) and Box 2 does nothing, as it will automatically fall between them both due to floats and widths.

The reason its done that way is to ensure the left and right boxes correctly reside on their respective margins, the center box centers automatically.

This is all I am using right now.
HTML:
<b>Spoutcraft</b>: <a href="http://spout.in/exe">exe</a> | <a href="http://spout.in/jar">jar</a> | <a href="http://spout.in/app">app</a>
 
Ok... that is interesting. I see your problem when doing it myself, and your syntax is correct. Leave it with it... as I have to update my localhost to the latest version to ensure its not an beta / RC issue, and also what has changed in the 1.1 version to force that onto each line.
 
Ok... that is interesting. I see your problem when doing it myself, and your syntax is correct. Leave it with it... as I have to update my localhost to the latest version to ensure its not an beta / RC issue, and also what has changed in the 1.1 version to force that onto each line.
I figured... ;)
I'm using 1.1.0 final right now and the modified version that Floris released, although your original one did the same too.
 
Ok, problem fixed. Upgrade uploaded above.

The problem was that the boxes were inheriting the default footer link css, which turns footer links into blocks, which means a line before and after is placed automatically. I changed that to display: inline for these boxes, and remove default padding that was also inheriting.

Should be good now.

You will see the amendment within the footer_custom.css file:

#customFooter a, #customFooter a:visited
{
display: inline;
padding: 0;
}
 
Ok, problem fixed. Upgrade uploaded above.

The problem was that the boxes were inheriting the default footer link css, which turns footer links into blocks, which means a line before and after is placed automatically. I changed that to display: inline for these boxes, and remove default padding that was also inheriting.

Should be good now.
Thanks for figuring that out! :)
 
Status
Not open for further replies.
Top Bottom