1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Creating Style Properties

Discussion in 'Styling and Customization Questions' started by Amaury, Jun 24, 2015.

  1. Amaury

    Amaury Well-Known Member

    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:

    XenForo Avatar Editor.PNG

    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.
  2. Arty

    Arty Well-Known Member

    When updating XenForo overwrites only master style and changes only templates and properties that belong to XenForo.
    That is incorrect. XenForo never reverts style properties during update. It only overwrites master style, it never touches child styles.
    Adam K M and Amaury like this.
  3. Amaury

    Amaury Well-Known Member

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

    Arty Well-Known Member

    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 likes this.
  5. Amaury

    Amaury Well-Known Member

    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. :oops:
  6. Adam K M

    Adam K M Active Member

    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!
  7. Amaury

    Amaury Well-Known Member

    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:

    KHF Avatar.PNG

    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.

    KHF Property 1.PNG

    KHF Property 2.PNG
  8. Adam K M

    Adam K M Active Member

    Hello @Amaury, based on you saying:
    You already kind of know how to generate the style property, but are just confused on how to apply it to your css?
  9. Amaury

    Amaury Well-Known Member

    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.
  10. Brogan

    Brogan XenForo Moderator Staff Member

    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.
    Adam K M and Amaury like this.
  11. Amaury

    Amaury Well-Known Member

    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.
    Last edited: Jul 5, 2015
  12. Adam K M

    Adam K M Active Member

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

    Amaury Well-Known Member

    So I have it down correctly, then? That's all I do?
  14. Adam K M

    Adam K M Active Member

    Yep, that's all you do @Amaury.
    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 likes this.
  15. Amaury

    Amaury Well-Known Member

    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.
  16. Brogan

    Brogan XenForo Moderator Staff Member

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

    Amaury Well-Known Member

    Yeah, I probably shouldn't have said:

    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.
  18. Steve F

    Steve F Well-Known Member


    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;
    Amaury and Adam K M like this.
  19. Adam K M

    Adam K M Active Member

    @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.
  20. Russ

    Russ Well-Known Member

    Amaury likes this.

Share This Page