XF 1.1 My single biggest frustration with XenForo

Neil E.

Neil E.

Active member
Poor template editing functionality. Let's look at this example from node_list.css
.node .nodeText
{
@property "nodeText";
margin: 10px 270px 10px 56px;
@property "/nodeText";
}
Click to expand...

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.
.node .nodeText
{
@property "nodeText";
margin: 10px 100px 10px 56px;
@property "/nodeText";
}
Click to expand...

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?
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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:
.message .messageInfo
{
@property "messageInfo";
padding: 0;
margin-right: 140px;
border-bottom: 1px none black;
@property "/messageInfo";
zoom: 1;
}
Click to expand...


Using TMS:
Search:
.message .messageInfo
{
margin-right: 140px;
}
Click to expand...


Replace:
.message .messageInfo
{
margin-left: 140px;
}
Click to expand...

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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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;
}
 
Upvote 0 Downvote
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:
.message .messageInfo​
{​
@property "messageInfo";​
padding: 0;​
margin-left: 140px;​
border-bottom: 1px none black;​
@property "/messageInfo";​
zoom: 1;​
}​
Click to expand...
​
Desired is margin: left; changed to margin: right;​
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
gldtn said:
If it's a style property, why not just go to that property and change it there?

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.
Click to expand...

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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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:
 
Upvote 0 Downvote
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)
 
Upvote 0 Downvote
Does that mean when I'm looking at a template, it shows the current state INCLUDING the style changes?
Click to expand...

Hmm.. yes!

Whatever is inside of the:
@property "messageInfo";
padding: 0;
margin-left: 140px;
border-bottom: 1px none black;
@property "/messageInfo"
Click to expand...

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.
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom