XF 1.4 Move extra.css contents to external CSS file

[WearableTechForums.com]

Is it possible to move my extra.css contents to an external CSS file instead? My extra.css is getting a bit lengthy, and it would be much easier to maintain via a text editor and FTP. Something that does not involve template edits would be preferable. Thank you.

 

[Martok]

Can't you just keep a copy of EXTRA.CSS as a file on your computer, then copy the contents and replace what's in EXTRA.CSS with it each time you make changes? Seems to be the simplest solution to me.

 

[WearableTechForums.com]

Yeah. I'm not a huge fan of workarounds, but that's what I've been doing. I tried using an external file with a style import tag, but then I couldn't use my xenForo colors.

 

[TJA]

My extra.css is getting a bit lengthy

Why not split your EXTRA.css file into smaller more manageable templates? For example if you have a section in your EXTRA.css dedicated to node styling, create a template called node_styling and place all relevant content into that then include this line in your EXTRA.css

<xen:include template="node_styling" />

 

[WearableTechForums.com]

I didn't realize I could do that. I may give it a try. Thank you.

 

[Axel B]

Why not split your EXTRA.css file into smaller more manageable templates? For example if you have a section in your EXTRA.css dedicated to node styling, create a template called node_styling and place all relevant content into that then include this line in your EXTRA.css

<xen:include template="node_styling" />

Thanks Just what I was looking for!

 

[Axel B]

Hopefully somebody can help me here. I got the <xen:include template="name_template" /> working. Finally I can put more structure in my extra.css.

I would like to setup some custom templates for the holidays.

• My extra.css contains all generic changes
• I want one non-holiday CSS (e.g. extra_non_holiday)
• One holiday CSS per holiday (e.g. extra_xmas, extra_halloween)

To do some testing I thought to use a conditional statement in extra.css so the extra stuff is only loaded for me:

<xen:if is="{$visitor.user_id} == 1">
<xen:include template="extra_halloween" />
<xen:else />
<xen:include template="extra_non_holiday" />
</xen:if>

For some reason I cannot get the conditional statement to work. I am user #1. I also tried <xen:if is="{$visitor.is_admin}">, but this also didn't work. All the code of the conditional statement is skipped.

I am obviously missing something...

 

[Martok]

I am obviously missing something...

Indeed. EXTRA.css doesn't support conditional statements.

 

[Axel B]

@Martok, thanks for clarifying

Is it possible in another way to load CSS with a conditional statement? I haven't done much in the Xenforo coding...

 

[Paul B]

You would need to do it in the template.

You can use conditional statements inline, using curly brackets.

For example:

<div class="something {xen:if '{$condition}', 'if_true', 'if_false'}">

 

[Nuno]

If you have access to your server (Apache, nginx, etc) configuration you can cache content in disk.

I'll do it with nginx fastcgi cache.

 

[Axel B]

@Brogan
Thanks for your reply! I understand your example, but unfortunately this is not what I try to do. I would like to conditionally load a bunch of one CSS file or another CSS file. Will split up my extra.css so I have a clear view of what needs to be adjusted per holiday, create a child theme and do the experimenting with a child theme.

@Nuno
Also thanks for your reply! This is beyond my knowledge I try to do stuff that limits the chance of me wrecking stuff Failed once and had to ask @MattW to restore my website

 

[Paul B]

I would like to conditionally load a bunch of one CSS file or another CSS file.

Based on what criteria?

You will still need to do it in the templates and can use: <xen:require css="name_of_css_template.css" />

 

[Axel B]

@Brogan, thanks! Still very hesitant changing templates. I feel safe playing with CSS but afraid to wreck things playing around in the code
I split up the extra.css and created a child theme. Will play with the child theme to get the holiday styling done and copy it back to the main style once done.

Ultimately I would just like to load extra CSS in extra.css for a specific holiday. Will get there eventually

 

[Paul B]

If you don't want to edit templates then a child style is the way to go.

 

[Axel B]

Thnx for your patience @Brogan