XF 1.5 Using Style Properties with custom CSS

[Nulumia]

Hello,
I'm new to Xenforo, however I've been a vBulletin style designer all the way since vB 3.6 (just now moving over from vb4 to Xenforo for good!). Having said that I was wondering if style properties would behave in a way somewhat like Stylevars from vBulletin 4x. I'm not sure if this is anywhere near the case but here's what I'm running into.

I made a new custom Style Property Group and added a few properties to it, in this case my property is called "dlContentBackground". I then tried to reference them in my custom CSS template by doing the following:

.secondaryContent {
@property "dlContentBackground";

@property "/dlContentBackground";
}

After saving the template and reloading, sometimes the entries were auto-printed inside the @property's (as seen below), and sometimes they weren't. It took a lot of trial and error of saving the Style Property page and reloading to finally get them to appear in the CSS template. Am I doing this right?

Also, I noticed that let's say the entries are successfully pulled from the Style Property page and auto-writes in my CSS template as such:

.secondaryContent {
@property "dlContentBackground";
font-size: 13px;
font-family: Tahoma;
background: #4d4d4d none;
border: 1px solid #5c5c5c;
border-radius: 0px;
@property "/dlContentBackground";
}

I've noticed that making manual changes here to these entries, and saving the custom CSS template will send those changes back to the Style Properties page and overwrite them there.. is this normal and intended? I've also noticed some odd behavior where sometimes these entries would get put back in the Property page in different places.. for example it would dump them in the additional css textbox and not load them in the table area (Background: Margin) (Technically, for example it looks like the format "background: ___" does not get parsed back into the table, but can only do so coming from a format of "background-image/-color/-repeat:", exactly matching the table field types.) Just wondering if this is normal also? Perhaps this is redundant but I'm assuming it wouldn't ever be a good idea to make manual changes to the entries listed between @property tags, correct? As this would override the Properties page. I'm also wondering if this would cause a further complication where let's say a manual or accidental change to one of these entries is made from a specific css template.. would these changes get filtered out into another css templates that reference the same Style Property? Or would they have to be opened individually, to have the changes reload/reprint, then save them?

Also, I noticed that when editing my custom.css template, clicking View History shows a record of the following:
.secondaryContent {
{xen: property dlContentBackground}
}

I'm assuming here that this is the equivalent of the enclosing @property "_"'s to the system's point of view. When I tried adding a new CSS class via this method, upon page reload it auto-formatted this method back out to the enclosing @property tags.. is this always the case, and intended? To be honest, I would prefer the {xen: property name} method to remain over the @property tags for simplicity sake and the problem with over-writing auto-printed entries as described above. This also closely resembles how Stylevars worked in vB4.

Another problem, as a designer I often have multiple tabs open at once.. one for the css template, another for Style Property page, etc. I believed I've encountered this where if I save changes on the Style Properties page while the css template is open, and do not immediately reload my css template to reflect those new changes, saving my css template will send back the now outdated entries to the Style Properties page and undo the work I just performed. I'm wondering if this is a correct assumption or did I observe something else going on? I'm asking because I often add numerous new classes to my css template before saving to test those changes, and making any Style Property page changes in the meantime and saving them would screw up the whole system.

Sorry for such a load of questions, just trying to get a very thorough understanding of how the system works.
Thanks for any input!

 

[Paul B]

I've noticed that making manual changes here to these entries, and saving the custom CSS template will send those changes back to the Style Properties page and overwrite them there.. is this normal and intended?

Yes, that is correct.
Updating the SP will be reflected in the template and vice versa.

For this reason, you shouldn't be editing both simultaneously, or have the template open while editing the SPs, and then save the (now outdated) template.

 

[Nulumia]

Thanks Brogan, would this mean that every time placing a reference to an SP such as:

.newClassName {
@property "dlContentBackground";
something: here;
@property "/dlContentBackground";
}

would delete the entire SP sheet with this new data? Or will it append/replace the value listed only? I ask because I just realized that having a new class reference a SP via empty enclosing @property ""s will effectively wipe out the Style Property because it is sending a blank definition back to the SP page, if this makes sense... My concern is that I often reference the same Style Property from dozens of different elements/classes, so trying not to get any accidents.

Would the proper way to reference SP's then be to use this method?
.className {
{xen: property propertyName}
}

Thanks again,