XF 1.4 Creating Style Properties

[Amaury]

We're working on a framework that will be used for KH-Flare 2016 and future styles. We plan on creating style properties so we can significantly reduce the amount of custom CSS we use.

As an example, we have to use custom CSS for the local avatar and Gravatar blocks within the Avatar Editor overlay because there are no style properties for those:



My question is if we create custom style properties, will they be overwritten when updating XenForo? I know that if you customize the core properties, such as changing the color of @contentText on the color palette, they will be reverted when you update, but I'm not sure if that extends to custom style properties as well.

 

[Arty]

When updating XenForo overwrites only master style and changes only templates and properties that belong to XenForo.

I know that if you customize the core properties, such as changing the color of @contentText on the color palette, they will be reverted when you update

That is incorrect. XenForo never reverts style properties during update. It only overwrites master style, it never touches child styles.

 

[Amaury]

Sorry, I should have clarified. I was referring to when you do that to the master style.

 

[Arty]

You should never edit default style properties in master style.

If style properties belong to add-on, then you can edit them in master style. Those properties are not part of XenForo and will not be overwritten during XenForo update. They will be overwritten during your custom add-on update.

If style properties belong to style, you should edit them in style. They will be overwritten only when you'll import new XML file and select option to overwrite your style.

 

[Amaury]

I think I may have gotten myself confused.

You have to enable debug mode to create style properties, and I was somehow confusing that with editing the master style.

 

[Adam K M]

I think I may have gotten myself confused.

You have to enable debug mode to create style properties, and I was somehow confusing that with editing the master style.

Create a child-theme of the master style (or your curent style that might be receiving updates from an outside source) to preserve all template edits, style property additions, and style property changes. When XenForo updates, and the default style is receiving updates, I believe the update comes with a new interal .xml for the default style, which would in turn over-write your style property additions, even the ones that you created yourself.

Well, that's what I believe from my current understanding at any rate, if you think or know it's different than what I said above, don't hesitate to let me know!

 

[Amaury]

As @Nights appears to be very busy currently, perhaps I can get some help creating my first style property here.

As mentioned, for our framework, we want to create style properties for everything that doesn't have style properties. For example, the avatar editor has no style properties for the blocks within it:



The account_avatar_overlay.css has this, which as can be seen, has no style property, though the border color is controlled by a color palette item:

    .AvatarEditor .avatarOption
    {
        overflow: hidden; zoom: 1;
        padding: 10px;
        border: 1px solid @primaryMedium;
        border-radius: 5px;
        margin-bottom: 10px;

        background: rgba(0,0,0, 0.25);
    }

So I have this in EXTRA.css:

/* Account Avatar Overlay */

.xenOverlay .AvatarEditor .avatarOption {
    background-color: @primaryLightest;
    border-color: @primaryLight;
}

/* Account Avatar Overlay */

I want to create a style property for this under the Form-Type Overlays style property category. I know that I need debug mode enabled and I know how to get there, I just don't know what to do.

Is it just a simple matter of:

• Creating it under the correct style
  • In this case, KH-Flare Framework
• Creating a name
• Creating a title
• Creating a description
• Selecting to use Property Type or Scalar with default value
  • In this case, I want the former. In the latter's case, I assume that's like how the Avatar style property under General has @primaryLighter for its border by default?
  • Layout would be like the margin and padding and Extra would be the Miscellaneous section, correct?
• I don't need a sub-group since I'm choosing to use property types
• Choosing a display order

And boom, I have the basic structure of the style property and can edit it. But then I somehow need to tell it what to control.

 

[Adam K M]

Hello @Amaury, based on you saying:

Selecting to use Property Type or Scalar with default value.

You already kind of know how to generate the style property, but are just confused on how to apply it to your css?

 

[Amaury]

Yes, for the most part. I just don't know how to make it control what I want it to control and it's why I've been waiting on Nights.

 

[Paul B]

Look at how an existing style property works and replicate it.

Essentially you create the style property, create the CSS class and assign it to the relevant element in the template, wrap the code in the css template in the style property attribute.

 

[Amaury]

Ah, I see. So I got the first part right. The property types are what I want--scalar deals with color palette items.

So let's say my property name is avatarEditorOverlayBlocks. I would create a template (or edit EXTRA.css or account_avatar_overlay.css) and add:

.AvatarEditor .avatarOption {
    {xen:property avatarEditorOverlayBlocks}
}

And that would be it, if I understood you correctly?

It's really the same thing we can already do: call complete style properties in EXTRA.css or other CSS templates. For example, for our login overlay:

.xenOverlay #pageLogin {
    @property "formOverlay";
    color: @contentText;
    background-color: @contentBackground;
    padding: 15px 25px;
    border: 20px solid @secondaryLighter;
    border-radius: 20px;
    _zoom: 1;
    @property "/formOverlay";
}

This just involves an extra step in that you create the style property first.

 

[Adam K M]

{xenroperty avatarEditorOverlayBlocks}

I always just use @avatarEditorOverlayBlocks and then save and refresh the page.

 

[Amaury]

So I have it down correctly, then? That's all I do?

 

[Adam K M]

Yep, that's all you do @Amaury.

This just involves an extra step in that you create the style property first.

Spot on!

Best of luck with your framework. Although, I think if the framework's mainly intended for regular forum admins (not power users or developers), giving that many options might be a bit overwhelming.

 

[Amaury]

In our case, we're doing this to reduce how much custom CSS we use in EXTRA.css. Although we may or may not actually have less CSS than we do now, but it'll be more neat and tidy having properties being called in there rather than just a lot of CSS.

Not only that, but if the color of the sidebar block headings, for example, will always be controlled by @contentText for us, it makes no sense to have to redo that every time. And we did have a framework--sort of--before, but we're taking it to the next level starting with KH-Flare 2016.

 

[Paul B]

Unless you're going to make the style available, or regularly change those elements, it's largely a waste of time.

 

[Amaury]

Yeah, I probably shouldn't have said:

As mentioned, for our framework, we want to create style properties for everything that doesn't have style properties.

We'll likely just create style properties for things we change in each style, such as the position of the logo, and possibly add-on stuff.

 

[Steve F]

@Amaury

Are you working from a already customized style? The reason I ask, is if you want to farther down the road have a different type of layout than what your parent (framework) has then you will be working backwards. I would definitely suggest starting with an unedited style to start your framework.

Also something I found useful for things such as this example. You make a property to control an area that doesn't already have a property you have problems of not all of the CSS being applied as it gets overwritten with the original CSS. What we have done to remedy this is to add a new selector to the html so we can target that and be more specific.

It just makes it easier to remember and always something you can reference in your CSS instead of searching through for specifics.

.XenBase .AvatarEditor .avatarOption {
    background-color: @primaryLightest;
    border-color: @primaryLight;
}

 

[Adam K M]

@Steve F ooo, I like that trick!

Hadn't actually thought of that myself - I'd usually use xenForo's already existing classes, but that would take time and this is pretty clean. Nifty.

 

[Russ]

If you're still having trouble, I have a very basic tutorial on style properties:

Create Simple Style Properties