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

XF 1.1 My single biggest frustration with XenForo

Discussion in 'XenForo Questions and Support' started by Neil E., Aug 13, 2012.

  1. Neil E.

    Neil E. Active Member

    Poor template editing functionality. Let's look at this example from node_list.css
    I want to figure out what this controls so I paste the code into EXTRA.css and change the largest margin value to 100. This should be a very visible change when doing a screen refresh.
    I go back to check node_list.css and the template code has been molested! The point of EXTRA.css is that the original code stays intact, and EXTRA makes the change when the page is served out. What good is EXTRA if the template gets buggered? Might as well edit the template itself. This seems to be true of any code with the @ symbol present. The original template tab never gets highlighted to indicate that a change was made.

    What is going on and how do you work around it?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    See the first few posts in this thread:

    http://xenforo.com/community/threads/very-strange-template-behaviour.33387/

    In short, don't use @property tags when adding overriding CSS to the EXTRA.css template. Those tags cause the changes to be written out to the style property which is referenced by the .css templates. You need to revert the style property and then remove the @property tags from your CSS.

    The system is designed this way to allow for CSS editing via the style sheets or via the style properties interface.
     
    gldtn, erich37 and Darkimmortal like this.
  3. Neil E.

    Neil E. Active Member



    Thus the above example is the proper way to do this. I totally missed that in the other topic. Thanks for being so patient. :notworthy:
     
  4. Neil E.

    Neil E. Active Member

    OK, I'm back to working on forum setup. Here is an example of what I'm up against:
    This is the relevant section of the original template:

    Using TMS:
    Search:

    Replace:
    It would be great if someone could explain why this doesn't work. The modification does NOT get applied. Is this a flaw in how the TMS functions?

    The modification does work if I use EXTRA.css, but I'm trying to avoid using EXTRA.css because the TMS is extremely convenient for labeling and tracking modifications.
     
  5. RobinHood

    RobinHood Well-Known Member

    Try search:

    Code:
    .message .messageInfo
    {
    @property "messageInfo";
    padding: 0;
    margin-right: 140px;
    Replace:
    Code:
    ..message .messageInfo
    {
    @property "messageInfo";
    padding: 0;
    margin-left: 140px;
    
    And that will replace the margin-right property, everything after it will stay the same.

    Or you could just search the whole thing:

    Code:
    .message .messageInfo
    {
    @property "messageInfo";
    padding: 0;
    margin-right: 140px;
    border-bottom: 1px none black;
    @property "/messageInfo";
    zoom: 1;
    }
    Replace

    Code:
    .message .messageInfo
    {
    @property "messageInfo";
    padding: 0;
    margin-left: 140px;
    border-bottom: 1px none black;
    @property "/messageInfo";
    zoom: 1;
    }
    EDIT: Misinterpreted that you were trying to replace the property, not add one.
     
  6. Neil E.

    Neil E. Active Member

    To follow what Jake is saying, it's the @property that causes the problem for EXTRA.css
    I wish the same thing was true using the TMS, but it doesn't help there.
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  8. Neil E.

    Neil E. Active Member

    Your Dec 2010 request didn't get any traction. I sent a PM to Guiltar hoping he might explain how the TMS differs.
     
  9. guiltar

    guiltar Well-Known Member

    Oh you are trying to search/replace inside the @property.
    Remember that what you see in editor is expanded version of what is in db.
    So you can either change property in style editor, or add needed things after the property like "zoom: 1" here.
    Code:
    .message .messageInfo
    {
        {xen:property messageInfo}
        zoom: 1;
    }
     
  10. Neil E.

    Neil E. Active Member

    Guiltar, I don't understand it yet. Are you saying search/replace won't work for anything inside the @property? I couldn't make the TMS add anything after the property using search/replace. Can you show me what has to be done using message.css as the example?

    Actual original code from message.css:

    Desired is margin: left; changed to margin: right;
     
  11. gldtn

    gldtn Well-Known Member

    If it's a style property, why not just go to that property and change it there?

    Style Properties: Message Layout > Content Container
    http://d.pr/i/ufUn

    Everything that is changed on the style property will stay intact and you can track every modifications by clicking on the Customized components under the appearance tab.

    Basically how I start my styles is by customizing the Color Palette to the colors I wish to use and go through every style property I feel needs change before even thinking about messing with the EXTRA.CSS template. I leave the TMS system for stuff that is not changeable inside of the style properties or html code.
     
    guiltar likes this.
  12. guiltar

    guiltar Well-Known Member

    Code:
     
        .message .messageInfo
        {
        @property "messageInfo";
        padding: 0;
        margin-left: 140px;
        border-bottom: 1px none black;
        @property "/messageInfo";
        zoom: 1;
        }
     
    
    This is not a template record from db, this is what you see in editor. It is obtained from original template record by substitution of style properties inti the original record:
    Code:
    .message .messageInfo
    {
        {xen:property messageInfo}
        zoom: 1;
    }
    Search/replace works only with template records and so it can't influence style properties like it does for templates.
     
    gldtn likes this.
  13. Neil E.

    Neil E. Active Member

    Very good, this answers the question!
     
  14. Neil E.

    Neil E. Active Member

    Thanks for adding to this topic. A different viewpoint really helps.

    I never thought about putting a customization like this directly in the style property. That is a good alternative to a template edit, although there are some items that don't have style properties. The nicest part of the TMS is being able to label the changes for faster tracking, plus the ability to compare before and after on the same page. This is why I wanted to use it as much as possible. The TMS checkbox is very fast for on/off of modifications to confirm actual behaviour.

    While Customized Components is useful, it's harder to track when a change does something unexpected. It takes a lot of discipline to avoid making several changes at once.

    For a total newcomer, trying to develop a methodology for how to adjust XenForo is a real challenge.
     
  15. gldtn

    gldtn Well-Known Member

    No problem Neil E., I'm glad I was able to help out somehow.. (=

    Xenforo style property is very powerful, and I'm sure it just a matter of time before you'll find your way around it.
     
  16. Neil E.

    Neil E. Active Member

    Let's assume our goal is to use EXTRA.css to make changes AND we want to keep the original templates as virgin as possible (minimize trouble during upgrades). Thus we don't put the @property in EXTRA so nothing is written out to the original template. The search and replace method of the TMS achieves the same thing as long as we don't use the @property there either.

    So what about styling properties? If we use these to make changes, they write to the original template, don't they? What is the point in trying to keep templates intact? It seems like no matter what we do, the original templates will change. All we can hope is that upgrades add new templates instead of modifying old ones.

    Am I correct?
     
  17. gldtn

    gldtn Well-Known Member

    The style properties and the extra template is left untouched when upgrading. Hence, that's why we use these methods for styling instead of digging into the HTML and CSS templates.

    the @property in the original templates acts as variables to collect our modification inside the style properties. So no matter what we set on the style property, the original template knows exactly where to use them.

    For example let's look at the code you were trying to modify above from an original CSS template:
    Code:
    .message .messageInfo
        {
        @property "messageInfo";
        padding: 0;
        margin-left: 140px;
        border-bottom: 1px none black;
        @property "/messageInfo";
        zoom: 1;
        }
    If you modify that directly in the template, then when you upgrade, if there are any core changes to that template, you'll need to revert the template and apply all changes manually. Where on the style properties, you won't have to ;)

    You can also add this to the EXTRA.CSS
    Code:
    .message .messageInfo {
        margin-left: 260px;
    }
    Which should(some time you're need to apply !important to take affect) override the margin-left: 140px on the original template above. Which will also still be there after an upgrade.

    If you're going to use this method, do not replicate the:
    Code:
    @property "messageInfo";
     
    @property "/messageInfo";
    As that will force Xenforo to get the property from the style properties! The rule of thumb I use is, If you're able to change what you want in the style property, then do it there. Else use the extra.css template!

    I hope my explanation helps, I'm not very good at it :coffee:
     
  18. Neil E.

    Neil E. Active Member

    Your explanations are very helpful. I like that syle properties don't get touched during upgrade.

    I'm pretty sure I've seen the original template change when I've changed an item using style properties.

    Does that mean when I'm looking at a template, it shows the current state INCLUDING the style changes?

    If this is true, how would we ever know the original hasn't been changed? (other than comparing it to the master)
     
  19. gldtn

    gldtn Well-Known Member

    Hmm.. yes!

    Whatever is inside of the:
    Is treated as a variable, to change accordingly to the style property settings. the @property "messageInfo"; is telling that template to read from the style property. http://xenforo.com/help/style-reference/

    Also each style property can always be individually reset to original if needed.
     
  20. Neil E.

    Neil E. Active Member

    OK, good. I suppose that adding CSS to the Miscellaneous field would be much cleaner than using EXTRA.css (where possible).
     
    gldtn likes this.

Share This Page