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

XF 1.4 Move extra.css contents to external CSS file

#1
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

Well-known member
#2
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. :)
 

TJA

Well-known member
#4
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" />
 

Axel B

Well-known member
#6
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

Well-known member
#7
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...
 

Brogan

XenForo moderator
Staff member
#10
You would need to do it in the template.

You can use conditional statements inline, using curly brackets.

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

Nuno

Active member
#11
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

Well-known member
#12
@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 :p Failed once and had to ask @MattW to restore my website ;)
 

Axel B

Well-known member
#14
@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 ;)