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

XF 1.4 Create new style - tutorials?

Hi everyone,

I'm trying to find a step by step tutorial teaching how to create styles. I assume it would use a basic template, but also instructions on Xenforo language, files to modify, etc. I don't exactly know what all to look for, but if I want to send a designer to look at a tutorial where would I send him/her?

Thank you!



XenForo moderator
Staff member
It's not really clear what you're asking.

Creating a new style is as simple as clicking the [+ Create New Style] button in the ACP.

After that it really depends what you want to do and how customised you want it to be.

The help manual has some pages related to it: Styling | XenForo
Thanks Brogan,

I'd like to find instructions on how to create a custom style from scratch. I see many people creating free and paid styles, and wonder where they find instructions to do so? Some are fairly advanced, other pretty basic.

Let's say I wanted to hire a professional graphic designer who has never one, and is new to Xenforo, where would I send him to find the most complete instructions?

Appreciate the help!



XenForo moderator
Staff member
There are no instructions as such.
It's a case of getting stuck in to the templates, style properties, css, etc.

A skilled designer familiar with HTML and CSS shouldn't really have any issues - all it will require is becoming familiar with the XenForo pages and various elements.


XenForo moderator
Staff member
Some of the seasoned designers have their own frameworks, which is another level above basic styling.
Ah, that's probably it. And I don't believe there is anything on the topic on Xenforo, on how to build your own Xenforo framework, dos and donts, guidelines, etc.?

oO5 Dynasty

Well-known member
Ah, that's probably it. And I don't believe there is anything on the topic on Xenforo, on how to build your own Xenforo framework, dos and donts, guidelines, etc.?
I've been trying to mess around with the styles etc. and i've had no luck. One problem i have is the fact their is no editor to see what you are doing in the styles property to the actual board. Would be nice to change a color and see what it actually effects. Would make styling a lot easier. Also their are a ton of cool features i see on tons of boards that are custom designs. So if you don't know much of anything about designing or coding, you will be stuck. Which means you would need help from other people. Which i could help you, but im struggling to hook my site up with a good style.
I found it very messy. The admin panel should have the items listed in alphabetical order. The templates are, but not the Style properties. You have no idea how many hours I pulled my hair trying to remember where I was and what I did to make a small change. Example, today I wanted to take off a little red square beside the nodes titles. I went in Style Properties, and "somehow" found a checkbox I could just tick. WOW! Hours later, I have to redo this, and there is no way I could find it. My brain is in overdrive with tension just working on styling.

Your idea is awesome, though. I there was a wysiwyg "style builder," or we could color code elements that belong to specific sections in the admin panel, even better - a drag and drop interface... wow.

It drove me nuts over the months to know there are so few developers who could help with this, but would do it for me at a price few can afford, and in the end I would have learned nothing. It's still a young software, and I hope that over time it will become more and more streamline in terms of customization. But it's the same issue with every board platform I worked with. You can run into a wall pretty quickly.

Have you looked into XenMig? It's a portal, but can do so much more, and the guy has been heavily updating it for the past few months. You may, or may not, find it useful.

xenMiG Portal

Other than that, our members are thrilled with Xenforo, a little less about my styling... ;)

Good luck!


oO5 Dynasty

Well-known member
Yes a Styling editor would be awesome. Split screen editing with the left side as your editor and the right side your actual Board. Editor could work for each different section as well, so you could make those small changes between the forum_List and profile pages. Maybe some cool Video Tutorials that come with that version, and some sample templates to start editing from. I am not a skilled designer or coder or developer, so this stuff is hard for me to follow. Trying my best and i just want to create a nice website for my company.

Dylan V

Well-known member
Before, when I had no knowledge about XenForo, I thought that stylize a style was really complicated, but now that I've learned how it worked, it's really very easy. This is not really complicated, you just have to learn properly how it works and ask for help to people who know better than you. You can learn in this way, because that's how I did.

Steve F

Well-known member
It's really quite simple once you dig in to the system. As for remembering what did what when you change things the same applies, once you're familiar with it you can easily remember where things are.

Get familiar with developer and inspector tools for what browser you use. In XenForo, class names are almost always the same name as style properties. Granted some areas do not have properties but a quick admin or template search will show you that.

Admin search is really nice, get used to using that and template search. The primaryContent is a class you will see used in areas such as the forum list nodes, as you can see it has a few style properties tied into it.

Last edited:
Thanks Steve,

The thing I find most confusing is have to have to "read" through the style properties list to try and find what I'm looking for. It's not sorted alphabetically, nor does it seem to follow any logic. If we could sort alphabetically, or color-code or drag and drop to create our own cluster of favorite, go-to, or mostly used settings, that would be ideal (for me anyway).

THIS JUST IN!! I just learned that I can do a search in there to find let's say "category strip" and it will take me there. I didn't know that... Thank you for that!