• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Starting out with editing templates. Where do I start?

Stuart Wright

Well-known member
#1
Hello folks.
I need, for a start, to make our footer look like this:

1.jpg

I've not done any template editing before and I notice that there are hooks in them. Should I use the footer hooks to add the HTML of this template and EXTRA.css to add the necessary css?

Might it be a good idea at this point to ask an experienced styler for help with this project?
 

Dan

Well-known member
#2
I would create 2 new templates for this

newfooter & newfooter.css

and use the template hooks to replace the footer content with newfooter.

Once you migrate to xf 1.2, you could use the included template modification/merge system instead of the hooks
 
Last edited by a moderator:

Brogan

XenForo moderator
Staff member
#3
You could do that with a single HTML template and associated CSS template.
Either as an add-on or just manually inserted into the templates.

Presumably the content static is static, which means you don't need any ACP options for updating it?
 

Chris D

XenForo developer
Staff member
#4
I would do as @ExtraLicense suggests and create two new templates, but I wouldn't go to the trouble of learning how to use hooks to programatically add it to the template.

Instead, as Brogan suggests, manually inserting into the templates would be a good idea.

We never used to recommend this because manually edited templates and upgrades could be a nightmare. But actually, with the diff/merge and outdated template handling in 1.2, it should no longer be a major concern.

So, create your new templates in the Admin CP (e.g. avforums_footer and avforums_footer.css) and populate them with your HTML and CSS code.

Then in the XenForo footer template (or perhaps at the bottom of PAGE_CONTAINER - depends on the positioning you need), you can simply do this:

Code:
<xen:include template="avforums_footer" />
That will include your footer template.

In your footer template, you will need this to call your footer css:

Code:
<xen:require css="avforums_footer.css" />