Themes

[ethan.pszanowski]

Hey there! I was thinking about learning to style Xenforo and with that, purchase a license to do professional Xenforo styling. However before I do so I wanted to try and get a general idea of how difficult it is to Style Xenforo for an experienced HTML/CSS developer. I’m a web designer, and I’m very experienced with designing using html and css. So how difficult would it be to learn to style xenforo for a HTML/CSS Web designer?

 

[Ehren]

I’m very experienced with designing using html and css

If you're very experienced, you shouldn't have any issues with xenforo. The template files are HTML and the stylesheets are .less, but you can just use plain css if you wish since it's interchangeable. There's a user interface in the admin panel which allows you to easily assign colour schemes as well as configure other elements, so you can take advantage of that and use it in your code too.

 

[ethan.pszanowski]

If you're very experienced, you shouldn't have any issues with xenforo. The template files are HTML and the stylesheets are .less, but you can just use plain css if you wish since it's interchangeable. There's a user interface in the admin panel which allows you to easily assign colour schemes as well as configure other elements, so you can take advantage of that and use it in your code too.

Thanks for the info!

 

[ethan.pszanowski]

@Ehren I was poking around the theme templates in the demo version, I can’t seem to find out what’s files control what. Is there a reference I can follow?

 

[Ehren]

I've never seen a reference so I don't think one exists, but I may be wrong.. Using the "Search templates" feature in the left column is a helpful way of finding a template. Simply paste some unique code into that area and it should narrow down results for you

For example, the editor which I'm currently typing in is wrapped with a css class called message--quickReply. When I search for that piece of code, the quick_reply_macros template file is returned, which contains the HTML for this block, as well as the message.less file which contains the css portion.

If possible, try doing most of your modifications with css/less (place your code into the extra.less file) and try to limit the amount of HTML modifications in your theme. The main HTML file which you'll likely want to edit is PAGE_CONTAINER, which controls the header, footer, navigation, wrapper, etc. Keeping HTML modifications to a minimum is a nice way of ensuring your theme automatically updates between XF versions, and it also helps in maintaining compatibility with 3rd party addons.

To give an example of what's possible with this technique: all of my themes only have one modified HTML file which is PAGE_CONTAINER. All other style modifications are controlled by css.

 

[ethan.pszanowski]

So you can do a lot from one file it seems! Glad to hear! Not going to lie I was a little intimidated by all the files there! Would it be cool if I kept you in mind and direct message you if I have any further questions?

 

[Ehren]

That should be fine

 

[Brad Padgett]

@ethan.pszanowski I recommend using extra.less for your own work which basically applies all extra CSS/LESS code to the entire site. I also recommend when using it for production you can also create a new template from the admin panel and then all you have to do for the CSS to work on your site is go to the template "app.less" and add a reference in the same format as the others towards to bottom, simply pointing app.less to your new LESS file.

If the project is for yourself extra.less will be perfect. If you are creating a theme to sell then that's what most designers including pixel exit does is create a new LESS template and point app.less to that template.

Hope that helped.