XF 2.3 Variation Template Conditionals?

[Mushpoie]

Hi,

I would like to create a theme based off the default theme but want to use a template conditional for differences between the variations in extra.less.

Does anyone know the new template conditionals for the new theme yet or attempted this?

Thanks in advance.

 

[philmckrackon]

If your saying you only want some changes in the child style via extra.less, by applying them in the child style they will not affect the master.
Or did I miss understand the question?

 

[Mushpoie]

If your saying you only want some changes in the child style via extra.less, by applying them in the child style they will not affect the master.
Or did I miss understand the question?

I'd like to change quite a bit with css depending on the variation, also would like to know this for templates to

 

[philmckrackon]

In the extra.less you can specify templates as shown below. This is only an example.

// *** Link Colors ***
[data-template="Template_Name"]
{
    .block.??_page a:link
    {
        color: #4170cf;
        text-decoration: none;
    }
    .block.!!!-page a:visited
    {
        color: purple;
        text-decoration: none;
    } 
    .p-body-main a:hover 
    {
        text-decoration: underline;
    }
}

 

[Mushpoie]

Here's what I am talking about:

<xf:if is="{$xf.style.getAlternateStyleType()}">
.p-staffBar {
background:#FF0000 !important;
}
</xf:if>

This ignores the alternate style regardless the setting, when it should only effect the alternate.

 

[philmckrackon]

As far as I know, styles cannot be specified.
That is handled by the hierarchy.
Master controls child.
If you want the child different you have to change each child.
The style is assumed by the one you select when editing.

 

[Jeremy P]

You'll likely want .m-colorScheme(...):

XF 2.3 Post in thread 'Custom prefixes'

Jul 1, 2024

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...

• Jeremy P

• 
• 

 

[philmckrackon]

You'll likely want .m-colorScheme(...):

XF 2.3 Post in thread 'Custom prefixes'

Jul 1, 2024

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...

• Jeremy P

• 
• 

Shoot, forgot to ask what XF version!