Resource for Begining Xen Styling?

[Chi Bearhawks]

I'm experienced well with html and css, but I'm quite new to Xen's template system within the css. I've had years of experience with phpBB and my own websites, so doing everything from scratch and having to re-upload template and css files is the way that I've been used to things.

I plan on creating my own custom skin, so I want to read up on some of the ways that Xen's template system is set up. Is there a resource out there (topic, random webpage, etc) that can sort of introduce me to everything? Obviously, since the system is set up so extensively within the Admin panel, I suspect it would be unwise to start my own style from scratch. That being said, I'd just like an intro to how the pages are set up, and what changes what. Keeping as much of the source code in the default way will make things more flexible in the long run and with updates to the software itself.

 

[Paul B]

Styling and templates are covered in the manual.

http://xenforo.com/help/styling/
http://xenforo.com/help/style-guides/
http://xenforo.com/help/style-color/
http://xenforo.com/help/style-reference/
http://xenforo.com/help/styles/
http://xenforo.com/help/templates/

There are also many guides here in the forum in the RM: Resources

 

[tyteen4a03]

While I'm not so experienced (or that I don't know what specifically you're looking for, or that @Brogan ninja'd me) I'd wholeheartedly recommend playing around with the demo (available through xenforo.com)

XenForo's templates are stored in the DB (so no file uploading). A lot of the basic style modifications can be achieved via the Style Properties system, so most likely you don't need to modify the templates at all. However, if you really need to, you can directly modify the templates without worrying about future updates - since 1.2 there is a 3-way template merging system that makes updating templates super easy. (There is also a Template Modification system built-in but since all modifications added there are global, it's more suitable for addons)

For adding new pages, XenForo provides a powerful nodes system that allows you to create new pages easily. It can also be used for more advanced things that require a PHP callback. As always, you can build your own addon if you really need full control over the system.

 

[rainmotorsports]

I just started porting my communities theme from vbulletin to xenforo and its been pretty easy. I am fluent in HTML and CSS and have done some site layouts. However I never themed for either platform so it was potentially a challenge. Not sure about coming from phpBB but theming is not a very difficult art. Wrapping stock elements in custom divs and CSS and moving things to suit you is easy. Its mainly a matter of what template has what elements.

Xenforo has a nice system along side the templates for setting up the primary palette as well as some of the properties of elements that exist all the time. Each major element such as the header navbar body and footer are wrapped with a div for controlling the page width. This comes into play with the responsive styling. You might set your max width and margins there without ever touching the CSS template. Anything you want styled in the margins would go outside this div the rest of your theme inside. That system covers many areas and the more you theme the less you use it but for those sticking closer to stock its wonderful and still powerful.

One thing that is a god send is that the template editor will open up all templates and CSS templates that are called by the template your currently editing in tabs. That way you don't have to go looking for them which you often do in VB. But as far as what is where. Using the inspect element tool in Firefox or Chrome and then searching in templates usually does the trick.

 

[Chi Bearhawks]

Yea, I've been playing around in the demo a little, and I guess I would describe it as "overwhelming", for now. Everything is divided up into such small bits and the html output is about double the size that it needs to be, but I understand that it is designed this way to allow for simple color swapping for someone that is inexperienced.

I'd really like to just gut the whole thing and start from complete scratch, but I don't want to make it too difficult for updates in the future as well.

 

[Shelley]

Extra.Css and style properties (which brogan linked you to) is your best bet if you want to keep upgrading to a minimum effort. Another good area is the tips and tricks area which will give you some good references on what areas to modify from the many enhancements posted in that area. You could effectively use those as refereence guides to learn from so you get a grasp on working with extra.css http://xenforo.com/community/forums/tips-and-guides.79/