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

Discussion in 'Styling and Customization Questions' started by WearableTechForums.com, Dec 7, 2014.

  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.
  2. Martok

    Martok Well-Known Member

    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. :)
  3. 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.
  4. TJA

    TJA Well-Known Member

    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 likes this.
  5. I didn't realize I could do that. I may give it a try. Thank you.
  6. Axel B

    Axel B Well-Known Member

    Thanks :) Just what I was looking for!
  7. Axel B

    Axel B Well-Known Member

    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" />

    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...
  8. Martok

    Martok Well-Known Member

    Indeed. EXTRA.css doesn't support conditional statements.
    Axel B likes this.
  9. Axel B

    Axel B Well-Known Member

    @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...
  10. Brogan

    Brogan XenForo Moderator Staff Member

    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'}">
    Axel B likes this.
  11. Nuno

    Nuno Active Member

    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 likes this.
  12. Axel B

    Axel B Well-Known Member

    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.

    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 ;)
  13. Brogan

    Brogan XenForo Moderator Staff Member

    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 likes this.
  14. Axel B

    Axel B Well-Known Member

    @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 ;)
  15. Brogan

    Brogan XenForo Moderator Staff Member

    If you don't want to edit templates then a child style is the way to go.
    Axel B likes this.
  16. Axel B

    Axel B Well-Known Member

    Thnx for your patience @Brogan ;)

Share This Page