XF 2.1 How to style with template syntax in a page

runelynx

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>
 
Sort by date Sort by votes
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; }
}
 
Upvote 1 Downvote
You must log in or register to reply here.

Similar threads

Ryan Kent
  • Question Question
Using XF template syntax in a HTML page
Replies
3
Views
801
Ryan Kent
Ryan Kent
Top Bottom