XF 2.1 How to style with template syntax in a page

runelynx

Member
I'm going nuts trying to find how to use my basic colors / style within a page's HTML. I'm doing what the documentation says, but the doc also seems really incomplete. Can anyone please help? Why does the code below not result in colored headers?




<head> <style> h1 { color: @xf-paletteAccent1; } h2 { color: @xf-paletteAccent2; } h3 { color: @xf-paletteAccent3; } </style> </head> <body> <h1> Staff Command Help </h1> <h2> Permissions </h2> <h3> Helper & Enforcers </h3>
 
This should work:

Code:
<style>
h1 {
color: {{ property('paletteAccent1') }};
}
h2 {
color: {{ property('paletteAccent2') }};
}
h3 {
color: {{ property('paletteAccent3') }};
}
</style>
<h1>
Staff Command Help
</h1>
<h2>
Permissions
</h2>
<h3>
Helper & Enforcers
</h3>

Don't use the head/body tags, this is strictly inserting all of the content inside the main content area, your original code would have outputted two head's in the source code.

Or you could just use EXTRA.LESS, target specific pages:

Code:
[data-container-key="node-20"]
{
    h1 { color: @xf-paletteAccent1; }
    h2 { color: @xf-paletteAccent2; }
    h3 { color: @xf-paletteAccent3; }
}
 
Back
Top Bottom