Add all css edits to EXTRA.css

Add all css edits to EXTRA.css


Well-known member
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:


XenForo moderator
Staff member
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.


XenForo moderator
Staff member
<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" />


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

Steve F

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


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


XenForo moderator
Staff member
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.

Stuart Wright

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


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


XenForo moderator
Staff member
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...