XF 1.2 Styling using Child-Styles question

[Moddis]

I initially created a new style(which is just clone of default) with no-parent. One small issue is that after I set the Path to Images on that style to "styles/mystyle", some default XenForo images that i did not need to change or haven't found yet obviously stopped working because their default location is "styles/default". To fix the problem I just copied the xenForo styles folder to "styles/mystyle/xenforo". I would have to do this each upgrade (if something changed), but is there a better way to do this?

I started looking into child-styles as it seems to be the correct way to style templates but it did not help so im thinking of going back and renaming path of all custom file to "styles/default/mystyle" and leave the default path to images on all styles to "styles/default".

Anyway, since movie a style as a child of default did not help in the situation above, does it really matter if you make your style a child of default or its own style with no parent? Since all new templates are cloned from default they are already considered child. Are there benefits to creating a style as a child?

 

[Paul B]

If you set a custom style directory for your style then you will of course need to ensure any images are copied to it from the default style.

You only need to do this once or for second point releases if new images are introduced (or existing images are changed).
You don't have to do it every time you upgrade.

If you only have one style then there is no need to make it a child of anything.

Child styles are useful for frameworks and if the child inherits most of the parent attributes, other than a few small changes.
On my site for example I have a parent fixed width style.
I have a fluid width style which is a child of that and the only changes are it is responsive and has a max width, not fixed.

 

[Moddis]

Thanks for for the overview. BTW, I don't see master style as the parent of all that but i'm guessing you have to be in dev mode for that..

So in the case of child styles, will both EXTRA.CSS load and conflicting CSS will appear based on which loaded last or which has the !important?

 

[Paul B]

Yes, the master style only appears if development mode is enabled.

In the case of EXTRA.css, if you don't edit that template in your child style then it will inherit it from the parent.
If you edit it then only the code in that child's template will apply.

So now you're thinking, how do I just change some bits of EXTRA.css, right?
Well the way to do that is to include a template in EXTRA.css, which is specific to each style, and edit the specific bits code in that instead.

 

[Moddis]

Ok, researched this a bit and looks like I can create the css template for each child style and include in master like so: <xen:require css="child-style2.css" />

However, after playing around with the child templates a bit, I don't (yet) see much benefit in doing that over just editing the child EXTRA.css templates. Its great how if you make a tiny edit in the EXTRA.css or any other template, it no longer includes the parent template and uses the full version of the child one so there is no redundant code all over the place when everything renders.

Thanks!

 

[Paul B]

Well let's assume you have thousands of lines of code in EXTRA.css in the parent style.
In the child style you just want to change one line of code.
You can edit that line of code but the next time you update the parent EXTRA.css, any changes won't be inherited by the child.
So now you have to maintain two copies of EXTRA.css and make sure any new edits you make in the parent, you also make in the child, without overwriting your custom child edits.
It can become a bit of a pain to maintain that.
I know from experience

 

[Moddis]

That does sound like it can get messy.. I guess I just don't really understand the method to creating and including custom templates css.

So if I add to parent EXTRA.CSS "<xen:require css="child-style1.css" /> <xen:require css="child-style2.css" />" and then edit those separate css files with specific style for each template, wouldn't all 3 css templates (Extra.css, child-style1.css and child-style2.css) show up at the same time in all 3 styles?

Ok, a more viable option would be to only include <xen:require css="child-style1.css" /> in the EXTRA.css for child style 1 and include <xen:require css="child-style2.css" /> in the EXTRA.css for child style 2.

However, you would still need to 2 maintain all 3 templates because every time to edit the parent you still need to merge the child styles so that they copy everything over from parent plus keep that template include. Although after writing this out, I understand now that it is much easier to make sure you only need to pay attention to one extra line in each child template in the EXTRA.css then look and merge many many different ones.

The only downside to including custom css templates at end of EXTRA.css is that you have to be a little careful in changing style specific css because it will be merging with the original EXTRA.css. For example, you cant just delete the padding from a class, you would actually have to add "padding: inherit' or even 0.

 

[Russ]

I think it really depends how you approach the situation as in what you're trying to achieve. You shouldn't be building completely different looking styles off a parent/child style for the most part... sort of defeats the purpose in my opinion. Child styles are used to simply inherit all the changes done via the parent, with minor tweaks here and there.

However:

I recently helped a client where I did two styles, one based off another, so in extra it looked like this:

<xen:include template="global.css">
<xen:include template="style1.css">

That's style one extra.css, style two extra.css:

<xen:include template="global.css">
<xen:include tmeplate="style2.css">

Global.css would contain the changes meant for the entire site, while the specific style1/style2 would contain specific css to their style.

 

[Moddis]

I can now see how much of a hard time it can be to see changes in extra.css even without thousands of lines of code. Just wen to clean up the parent EXTRA.css a bit and was terrible fixing the child. Good thing I notes all changes so I just reverted the template back to parent

Anyway, Im going to go with he include template from now on but does that template have be to called *.css? Im only asking because I know you can use conditional statements in CSS templates and I wanted to use one in my template.

 

[Paul B]

Yes, it needs to have the .css extension if the contents are css.
You could create a standard template and then configure the contents in <style type="text/css"> tags but you can only use certain conditionals in css templates, so that wouldn't make any difference.