XF 1.2 Template Modifications and Comparison

Anyone who has developed add-ons for XenForo 1.1 knows that template hooks are a pain. They're a pain for us too, to say the least. Plenty of people have installed the Template Modification System add-on. We've been planning a TMS-like system for some time, before the XenForo add-on was ever actually released.

XenForo 1.2 will deprecate the template hook system and introduce it's own template modification system to make it easier for add-on developers to change templates. Note that I'm primarily focused on add-on developers here. It is possible to create your own custom template modifications if you're not an add-on developer, but unless you have multiple styles, I'd recommend just making the changes to the templates directly.

Let's look at what a template modification is:

ss-2013-04-12_11-35-58.webp


It's simply a "find this" and "replace with that" style replacement. You can do this to any template. If your find matches multiple times in a single template, it will replace each occurrence.

Applying a template modification does not actually modify the template, so it will not show up as customized and it will be automatically reapplied (if possible) when upgrading.

For those of you that want technical details, the modifications are applied before a template is parsed. If the modifications cause a template compilation error, they are automatically disabled.

Here's what the template modification overview looks like:

ss-2013-04-12_11-41-07.webp


All of the template modifications will be listed here, grouped by add-on and ordered by template. The checkbox enables/disables the modification. Note that if the modification is part of an add-on (and you're not in debug mode), you will not be able to edit the modification here but you can enable/disable it. More about this when editing a template.

The 3 numbers indicate the number of times the modification matched (green), the number of times the modification failed to match (grey) and the number of times the modification caused an error (red).

Editing a Template
There are a few new bits when editing a template as well.

ss-2013-04-12_11-43-10.webp


There are 3 new things here:
  • The "prevent" checkbox. If selected, modifications will be never be applied to this template. This can be used to quickly check a template without modifications or to adjust the modifications manually.
  • The "view template modifications" link. I'll discuss this below.
  • The "view custom changes" link. This will simply display a comparison of the parent version of the template (probably the master version) and the current version so you can identify the differences.
When you select view template modifications, you'll see an overlay like this:
ss-2013-04-12_11-43-25.webp

This shows you a comparison of how the template modifications will be applied to this template.
If you choose to manually apply modifications, the template modifications will be "materialized" into the template - they will actually be written into the template and automatic application of modifications will be disabled in this template. You can then manually edit the modifications if you wish. (Obviously if you upgrade an add-on and they've changed their modifications or you install a new add-on that changes this template, you won't be getting those new modifications so this should be used with care.)

Admin and Email Templates
These aren't left out. Add-on developers will have access to very similar systems that allow the admin and email templates to be manipulated in the same way.
We look forward to more dynamic add-ons with XenForo 1.2. :)
 
Last edited by a moderator:
Click to expand...
King Kovifor said:
Do what? Create one? It may be targeted at add-ons, but I can only assume it is visible to the administrator without debug mode since it provides insight into if it was successful or not.
Click to expand...
I'm hoping so, because I'm hearing how this is not designed for styles and it has me a little concerned.

People need to be able to
  • Use TMS to make template edits
  • Easily edit those TMS entries
  • Export those edits either in part or in full with the whole theme (as the current TMS does)
If it can't do at least what the current TMS can do.... I see no value (and I'm not alone)
 
I think XF have lost the plot on this one, to be perfectly honest... that is from trying to understand the logic of what's stated here thus far.

Include a TMS for stylers to edit templates without hooks. Absolutely.

Include a TMS to replace the hook system for add-ons. Insane.
 
Anthony Parsons said:
I think XF have lost the plot on this one, to be perfectly honest... that is from trying to understand the logic of what's stated here thus far.

Include a TMS for stylers to edit templates without hooks. Absolutely.

Include a TMS to replace the hook system for add-ons. Insane.
Click to expand...
Why would replacing the hook system be insane? This provides unlimited hooks and easier for developers.
 
Hoffi said:
If you can build a Template, you can build a TMC.
If you are a designer, and could not build a template... you're not a good webdesigner.
Click to expand...
No, because using TMS/TMC(?) allows to override some default CSS and this is very convenient, especially when they are already marked as !important.
 
King Kovifor said:
If style designers could create most of their custom code through the TMC system, it would make maintenance and upgrades easier for everyone.
Click to expand...
I actually meant my framework :p.

I could probably use it for my framework however it would not allow for both mine and John's to be used together.
 
cclaerhout said:
No, because using TMS/TMC(?) allows to override some default CSS and this is very convenient, especially when they are already marked as !important.
Click to expand...
I don't see a problem. Yes, it allows this. That's good, isn't it.
Now you can build an AddOn for your Style, with template changes. Easier Update for everyone.

And if you use !important in your CSS, you're a lousy designer. Use better selectors to overwrite CSS, not important.
 
Hoffi said:
Now you can build an AddOn for your Style
Click to expand...
You don't build add-ons for 'your' style... you build them for the software. How do you release an add-on for 'your' style?

Hoffi said:
And if you use !important in your CSS, you're a lousy designer. Use better selectors to overwrite CSS, not important.
Click to expand...
Seriously, again? How exactly do you propose that when you need to override default XF behaviour? Oh wait... you use important in your add-on styling to do that!
 
Anthony Parsons said:
You don't build add-ons for 'your' style... you build them for the software. How do you release an add-on for 'your' style?
Click to expand...
I have an AddOn for my personal style. And if I would release it, I release a Style XML and an AddOn XML. Where is the Problem?
The AddOn XML modifies the Templates, maybe add new templates and StyleBlocks inside the XenForo Style-System.
Anthony Parsons said:
Seriously, again? How exactly do you propose that when you need to override default XF behaviour? Oh wait... you use important in your add-on styling to do that!
Click to expand...
No, i never use important, I'll find another way. I'll give an exacter selector, that becomes a higher prorisation from the renderer engine.

If you have this HTML Code.
HTML: 
<div class="Moo">
 <div class="Meh">
   Hello World.
 </div>
</div>

Code: 
div.Meh { color: red; }
div.Moo {color: blue; }

Now the Output would be:
Hello World.

Now, to get this:
Hello World.

You can du this crappy thing:
Code: 
div.Meh { color: red; }
div.Moo {color: blue; }
div.Meh { color: green !important; }

or., the better way:

Code: 
div.Meh { color: red; }
div.Moo {color: blue; }
div.Moo div.Meh { color: green; }

You see,, a better (detailed) selector, has more priority.

Don't use !important, There is only one!
 
Hoffi said:
I have an AddOn for my personal style. And if I would release it, I release a Style XML and an AddOn XML. Where is the Problem?
The AddOn XML modifies the Templates, maybe add new templates and StyleBlocks inside the XenForo Style-System.

No, i never use important, I'll find another way. I'll give an exacter selector, that becomes a higher prorisation from the renderer engine.

If you have this HTML Code.
HTML: 
<div class="Moo">
<div class="Meh">
  Hello World.
</div>
</div>

Code: 
div.Meh { color: red; }
div.Moo {color: blue; }

Now the Output would be:
Hello World.

Now, to get this:
Hello World.

You can du this crappy thing:
Code: 
div.Meh { color: red; }
div.Moo {color: blue; }
div.Meh { color: green !important; }

or., the better way:

Code: 
div.Meh { color: red; }
div.Moo {color: blue; }
div.Moo div.Meh { color: green; }

You see,, a better (detailed) selector, has more priority.

Don't use !important, There is only one!
Click to expand...
This isn't always possible.

In a perfect world you shouldn't have to use !important, but then you wake up and you realize things like the Member Card and the editor don't really allow for convenient editing.
 

Similar threads

El Porcharo
  • Question Question
XF 2.2 Debug a not working template modification
Replies
0
Views
307
El Porcharo
El Porcharo
ShikiSuen
  • Suggestion Suggestion
Lack of interest Content search among template modifications.
Replies
0
Views
317
ShikiSuen
ShikiSuen
CStrategies
  • Solved
XF 2.1 Way to view all modifications to a template?
Replies
3
Views
594
CStrategies
CStrategies
N
XF 2.2 REGEX for template modifications
Replies
3
Views
863
securedme
securedme
Nulumia
[OzzModz] Template Modification List Tweaks [Deleted]
Replies
4
Views
1K
Ozzy47
Ozzy47
Top Bottom