Add all css edits to EXTRA.css

Add all css edits to EXTRA.css

I'm not sure I understand how to use extra.css for all the template edits i have

The idea behind extra.css is it's the one template that won't need to be reverted once you upgrade. So say you're coding a style and you're adding extra thing's to the navigation, rather than using navigation.css, use extra.css so you won't have to revert on upgrade.

Ideally though majority of your edits should be done through the style properties, you won't have to revert those on an upgrade.
I get all that... but think it would be handy to have sort of step by step manual

For example
I'm going to add a custom block <xen:include template="notice" /> right under <xen:include template="sidebar_online_users" /> (so we going to add changes to forum_list)
than i'm going to add board message. so i need to add <xen:include template="Board_Message_By_Kaiser" /> after <!-- top breadcrumb, top ctrl --> (Changes are to be made in PAGE_CONTAINER. )
and so on...

What do i actually need to put into EXTRA.css ? :rolleyes:
EXTRA.css is just for making changes to existing css classes, to avoid editing the default templates.

That makes it much easier when upgrading as you don't need to revert and reapply edits.

You can also use it to create your own classes.

EXTRA.css never needs reverting.
I forget brogan, how would I include a remote css doc in a template , with standard <link rel= ?
<xen:require css="file_name.css" />

Or do you mean outside the XenForo templates, i.e. standard html?
In which case it would be <link rel="stylesheet" type="text/css" href="file_name_and_path" />
yup just wanted to make sure for the inclusion of .css files outside templates..thanks....

and thanks for clearing up about no html in extra.css I hadn't tried it I just assumed.
When I was doing a few styles for vB I was able to use "<vb:if condition="$stylevar['textdirection'] == 'rtl'">" in the additional.css (same as xf's EXTRA.css). Anyone tried similar with xF yet or know if its possible?

I used it to correct a forumhead image when text direction changed.
I personally only use EXTRA.css for my own unique code. Any changes made to default code should be made within those individual templates otherwise if code is updated from version to version and you've moved it to extra.css, you're going to have a tough time identifying what needs updating. Updating templates is easy enough with a simple file comparison it forces one to become more intimate with the code ;)
damn, wish I had known this last week...I just changed all the normal css files as I didnt know about EXTRA.css.

sad face :unsure:
It's not too late to change and in fact you may want to before you upgrade.

Otherwise potentially you could have a lot of templates to revert and will then have to reapply your customisations.
I can't see EXTRA.css in the style editing pages. How do I edit it? Where is it? Can you include this info in your resource main page please?
[Edit : Found it on this page. It's not clear to a noob that it's one of the templates.
It's mentioned in the description:

I'm a bit lost but trying to understand Brogan.

How would I be able to add this to extra.css instead of the 'post' template? would love to know!


  1. Upload the contents of the 'upload' directory to your forum root.
  2. Install the addon_Duplicate.xml file
  3. In the 'post' template after:
    <xen:if is="{$canViewIps} AND {$post.ip_id}"><a href="{xen:link posts/ip, $post}" class="item control ip OverlayTrigger"><span></span>{xen:phrase ip}</a></xen:if>
    <xen:if is="{$canViewIps} AND {$post.ip_id}"><a href="{xen:link posts/duplicate, $post}" class="item control duplicate OverlayTrigger"><span></span>{xen:phrase dark_duplicate}</a></xen:if>
That's a template edit and is outside the scope of EXTRA.css.

EXTRA.css is just for CSS, not HTML.
Brogan updated Add all css edits to EXTRA.css with a new update entry:

Template comparison and merging versus using EXTRA.css

Note that with the introduction of 1.2, editing templates is now much easier to manage due to the built in merging functionality:

Whilst you can continue using EXTRA.css, editing templates is now an equally valid approach and won't necessarily introduce any additional work when it comes to upgrading.

See this resource for more information:...

Read the rest of this update entry...
Top Bottom