Style Any Alternate Template System or Tool to build templates for Xen?

[jt2011]

Let's face it, if you really want to customize your site the xenforo template and style system is overly complex, completely unintuitive and makes no sense.

In the default template/style alone there are 494 template and css items.
This is insane.

If you wanted to convert the default Xen template to the twitter Bootstrap framework, well I have to say it would take one person more time than it should. I've been trying for several hours to make some headway with this and its way more trouble that it should be. I really wonder what the logic is behind the system Xen uses. The only word that I can think to best describe the template/style system is nightmare; it is a complete nightmare.

It wouldn't be so bad if there was only 1 css file and one html/template file for each unique page or section on the site like phpBB but literally having hundreds of template files to scroll through and hope that you are editing the right one; really is a nightmare.

Anyways, the template system is ridiculous and I understand now why there are so few template variations and designs for it. Despite the great features of Xenforo I think that it won't grow in popularity much more than it has due to this one major issue. Yes Xen has managed to make a great admin interface that most people can figure out in a day or two but it still has miles to go with the allowing people to easily modify their designs.

If I had known the insane complexity in designing templates beforehand I would not have made the purchase but in any event I jumped into it and now I'm stuck with it.

So my question is, are there any alternate template systems for Xen?
Or perhaps a tool that allows you to export an html site to a Xen XML style file?
I have my fingers crossed but I'm guessing no.

Is there any method to have all the Xen template pieces for a page like viewing a thread, show in one page instead of all over the place so that I can create a custom template design for viewing a thread? When I talk about customizing the template I mean getting rid of everything and starting from scratch like deleting the nav bars and using my own, etc...

this is an issue that really gets to me, can you tell?
lol

 

[Forsaken]

Let's face it, if you really want to customize your site the xenforo template and style system is overly complex, completely unintuitive and makes no sense.

In the default template/style alone there are 494 template and css items.
This is insane.

If you wanted to convert the default Xen template to the twitter Bootstrap framework, well I have to say it would take one person more time than it should. I've been trying for several hours to make some headway with this and its way more trouble that it should be. I really wonder what the logic is behind the system Xen uses. The only word that I can think to best describe the template/style system is nightmare; it is a complete nightmare.

It wouldn't be so bad if there was only 1 css file and one html/template file for each unique page or section on the site like phpBB but literally having hundreds of template files to scroll through and hope that you are editing the right; one really blows.

Anyways, the template system is ridiculous and I understand now why there are so few template variations and designs for it. Despite the great features of Xenforo I think that it won't grow in popularity much more than it has due to this one major issue. Yes Xen has managed to make a great admin interface that most people can figure out in a day or two but it still has miles to go with the allowing people to easily modify their designs.

If I had known the insane complexity in designing templates beforehand I would not have made the purchase but in any event I jumped into it and now I'm stuck with it.

So my question is, are there any alternate template systems for Xen?
Or perhaps a tool that allows you to export an html site to a Xen XML style file?
I have my fingers crossed but I'm guessing no.

Is there any method to have all the Xen template pieces for a page like viewing a thread, show in one page instead of all over the place so that I can create a custom template design for viewing a thread? When I talk about customizing the template I mean getting rid of everything and starting from scratch like deleting the nav bars and using my own, etc...

this is an issue that really gets to me, can you tell?
lol

Compared to any other forum system, XenForo has the best styling and template system I've ever seen, and I've done styles for most major scripts. The CSS is laid in a way to be completely re-usable and easily edited, the style properties make changes much easier to do and keep them future-proof, and the syntax and semantics are better than pretty much any script I've used.

This is because they're logically split up into templates. Each page has its template, and has areas of the page separated out to make it more efficient when editing. You really only ever need to go to the page template (thread_view) which will display all of the included templates. There are also cues for where to edit certain elements. At most, you probably will only have to spend a few minutes of looking up the template one time before you figure out the way things are laid out, which is something expected when switching platforms.

XenForo is made to use the XenForo CSS; obviously switching to a different framework would require a ridiculous amount of hours (I'd estimate close to 150-200 hours without style properties). You could always include Twitter bootstrap through templates and make use of the code that you need, and ignore the rest, saving you work.

There is no need to scroll through XenForo templates, there is a filter on the top of the listing, and you need only type a partial name and it'll update the list with javascript.

As I said before, the reason why there are very few template variation and design is usability. You could change how things look, but then you have to deal with users who will be confused from a non-standard design that is common across forum software, loss of critical information if it was removed, and a loss of usability. It isn't that it isn't possible to completely change the look of XenForo, it is more that most designers (Premium ones) probably won't change certain elements as its what people are use to. Change isn't necessarily good, and good user experience doesn't necessarily come with a good design.

From your posts, you haven't attempted to learn how XenForo works (Which again, is an obvious requirement which switching platforms). All XenForo requires for learning how to do a style is: a) CSS, b) HTML, c) XenForo's wording for things that are different from other platforms, d) XenForo syntax for conditional and phrases, e) jQuery/Javascript if you intend to do things with it.

 

[DBA]

Seriously? Wow.
If you think XF's system is crap I'd suggest you try vB's.

What advantage is there to switch the entire style over to the twitter bootstrap framework? What exactly are you trying to accomplish?


Couple of the basics:

EVERYTHING is run through the PAGE_CONTAINER template.
Add all your custom CSS to the EXTRA.css template (an !important is sometimes needed)
To find the main content template of whatever page you're on, you can find it here.

 

[jt2011]

the reason why there are very few template variation and design is usability. You could change how things look, but then you have to deal with users who will be confused from a non-standard design that is common across forum software, loss of critical information if it was removed, and a loss of usability.

I don't agree. If I want to make my Xen forum look like the front page of CNN.com I should be able to do it and my users will still easily be able to understand how to use it.

All XenForo requires for learning how to do a style is: a) CSS, b) HTML, c) XenForo's wording for things that are different from other platforms, d) XenForo syntax for conditional and phrases, e) jQuery/Javascript if you intend to do things with it.

Yes that's obvious that its html/css/php but the trouble arises in finding the files you need to edit.
For example in Xenforo to replace the tab navigation bar with a custom solution, I have to edit half a dozen files or more and put code into Extra.css, this makes no sense.
I should just be able to modify one file like navigation_bar.php/html

 

[Forsaken]

I don't agree. If I want to make my Xen forum look like the front page of CNN.com I should be able to do it and my users will still easily be able to understand how to use it.



Yes that's obvious that its html/css/php but the trouble arises in finding the files you need to edit.
For example in Xenforo to replace the tab navigation bar with a custom solution, I have to edit half a dozen files or more and put code into Extra.css, this makes no sense.
I should just be able to modify one file like navigation_bar.php/html

To modify the navigation all you need to do is modify page_container to include an alternative template to the navigation template, or navigation by replacing all the HTML. You can then create your own css template and include it in extra.css, add the code directly to extra.css, or replace navigation.css.

You're making things out to be more difficult than they have to be.

 

[jt2011]

Seriously? Wow.
If you think XF's system is crap I'd suggest you try vB's.

The template/theme/style system - yes
I wouldn't touch VB again even if it was free.

What advantage is there to switch the entire style over to the twitter bootstrap framework?

The advantage is being able to make it look like I want it to look. Having the freedom to place things where you want.
https://github.com/twitter/bootstrap/
I am only using the twitter bootstrap as an example because it works across most devices and OS's and I love the look of all the elements and styles.

What exactly are you trying to accomplish?

Design flexibility to put things where I want.
What If I want to move my navbar to the sidebar instead? or have a forum with 2 columns of threads instead of one?
Or place the reply comment form into the sidebar?

 

[jt2011]

To modify the navigation all you need to do is modify page_container to include an alternative template to the navigation template, or navigation by replacing all the HTML. You can then create your own css template and include it in extra.css, add the code directly to extra.css, or replace navigation.css.

Is there clear documentation somewhere about doing this sort of thing?

The only one I can find is this and it is not very detailed. For example it does not explain what a named template is, does it mean a file in a folder somewhere or a new template that you create in the xen admin?
http://xenforo.com/help/html-templates/
It would be great if there was a tutorial or more detailed explanation with maybe some examples for each part.
A step by step guide to creating a xen template from scratch or modifying the default would be a tremendous help not only to myself but the community, i think.
I searched for "xenforo template tutorial" but can't find anything really related.

You're making things out to be more difficult than they have to be.

Yes most probably
I feel like I wasted 7 hours already today trying to change the nav bar and I keep starting over because things get really messed up lol, like editing a small css removed style not only in nav but elsewhere and it took me a while to figure out why so I deleted and started over and eventually gave up

 

[Naatan]

I agree that it can be a huge pain to figure out what template to edit. This is one of the reasons I made the XenDebug addon, simply watching the template_create code event gives me a good idea of what templates are used in a given page.

Another problem is that the style editor only seems to be connected to half of the important css properties, the other half is still hard coded, this makes for a frustrating experience editing the themes as you constantly have to switch between editing templates and editing style properties.

I think the XF template system is quite ingenious but it still has some problems that need to be worked out. For one thing the css needs to fully utilize the style properties.

Also, I feel that the predefined colors in the default theme really need to be calibrated differently, as currently it is impossible to simply change some colors and come up with a nice theme without compromising much of your original vision due to the way the usage of color properties is biased towards the default theme.

I'd love to see a community project where much of these issues are addressed in a universal starting theme everyone could use. Unfortunately I don't really have the time for it myself.

 

[DBA]

The advantage is being able to make it look like I want it to look. Having the freedom to place things where you want.
https://github.com/twitter/bootstrap/
I am only using the twitter bootstrap as an example because it works across most devices and OS's and I love the look of all the elements and styles.


Design flexibility to put things where I want.
What If I want to move my navbar to the sidebar instead? or have a forum with 2 columns of threads instead of one?
Or place the reply comment form into the sidebar?

And how does the twitter bootstrap accomplish this?

For example in Xenforo to replace the tab navigation bar with a custom solution, I have to edit half a dozen files or more and put code into Extra.css, this makes no sense.
I should just be able to modify one file like navigation_bar.php/html

You can, it's the navigation template, remove it's contents and you can start fresh.

Three files make up the navigation.

• navigation
• navigation_visitor_tab
• navigation.css

 

[jt2011]

To modify the navigation all you need to do is modify page_container to include an alternative template to the navigation template, or navigation by replacing all the HTML. You can then create your own css template and include it in extra.css, add the code directly to extra.css, or replace navigation.css.

Thanks for this BTW, it was extremely helpful, I've managed now to replace not only the nav bar but completely change the style of the site and everything still works, just need to tidy up now.

Muchas Gracias!

You can, it's the navigation template, remove it's contents and you can start fresh.

Thanks buddy!

One little thing by Forsaken turned on the light in my head and now I think i have a better handle on the templating. It's still a pain with all the files but much easier to understand now.

If all goes well I might release a new template for xen in a week or so

 

[Forsaken]

The advantage is being able to make it look like I want it to look. Having the freedom to place things where you want.

https://github.com/twitter/bootstrap/

I am only using the twitter bootstrap as an example because it works across most devices and OS's and I love the look of all the elements and styles.





Design flexibility to put things where I want.

What If I want to move my navbar to the sidebar instead? or have a forum with 2 columns of threads instead of one?

Or place the reply comment form into the sidebar?

Bootstrap wouldn't give you anymore freedom really, you would still be stuck with the same HTML templates, and you would have to re-create all of the CSS, or use bootstrap separately on XenForo.

I haven't really looked into it, but I'm not sure how you would go about making XenForo more responsive to other devices. Something to the degree of a forum platform would be extremely difficult to do due to the sheer amount of elements and informations. You also have to support any changes done on the user (Administrators) and maybe 1% of the members of this forum understand responsive design (Most do not even understand CSS or HTML well).

Is there clear documentation somewhere about doing this sort of thing?



The only one I can find is this and it is not very detailed. For example it does not explain what a named template is, does it mean a file in a folder somewhere or a new template that you create in the xen admin?

http://xenforo.com/help/html-templates/

It would be great if there was a tutorial or more detailed explanation with maybe some examples for each part.

A step by step guide to creating a xen template from scratch or modifying the default would be a tremendous help not only to myself but the community, i think.

I searched for "xenforo template tutorial" but can't find anything really related.


Yes most probably

I feel like I wasted 7 hours already today trying to change the nav bar and I keep starting over because things get really messed up lol, like editing a small css removed style not only in nav but elsewhere and it took me a while to figure out why so I deleted and started over and eventually gave up

There isn't really any official documentation or tutorials for designing, as everyone has a different approach. I try to minimalize template edits, or the ones I do I try to keep very basic and easy to modify (Which is why I end much of the things I use to my style framework).

A named template is when you create a new template, and give it an unique name. You would then just replace the conditional (I would <xen:comment> out the original code for reference just in case) and use your own template.

I think I mentioned it in another post, but I've begun writing tutorials specific to my style framework, some of which will partially cover XenForo. Most of my framework is just additional CSS for the style properties, so that I have greater control over things like the navigation, nodes and messages.

The navigation is probably the most difficult portion of the site to modify, due to how it is built. It is also the most extensible, as there is a lot you can do with it. Again, to really do anything with XenForo you really need to take the time to learn how to work with it. Shelley, another designer here hated the navigation, but after she took my advice and played with it more she realized just how much she was able to do with it.

I agree that it can be a huge pain to figure out what template to edit. This is one of the reasons I made the XenDebug addon, simply watching the template_create code event gives me a good idea of what templates are used in a given page.



Another problem is that the style editor only seems to be connected to half of the important css properties, the other half is still hard coded, this makes for a frustrating experience editing the themes as you constantly have to switch between editing templates and editing style properties.



I think the XF template system is quite ingenious but it still has some problems that need to be worked out. For one thing the css needs to fully utilize the style properties.



Also, I feel that the predefined colors in the default theme really need to be calibrated differently, as currently it is impossible to simply change some colors and come up with a nice theme without compromising much of your original vision due to the way the usage of color properties is biased towards the default theme.



I'd love to see a community project where much of these issues are addressed in a universal starting theme everyone could use. Unfortunately I don't really have the time for it myself.

To learn what template is which, all you really need to do is look at the source code and look at the #content class (#content.forum_list for example). Then you would just open up the template. For portions of a page you can either open up the page template, and it'll have it included, or you just need to guess. The naming of templates is very logical (sidebar_visitor_panel and the like), and it just requires learning how they named things.

You actually do not need to use style properties, those are there for ease of use for non-savvy people (I use them in my designs so as to keep things future proof, as well as make it easier for customers and clients to change things themselves). Kier also suggests that people go directly into extra.css if they're capable of CSS, as you can do things quicker than dealing with the style properties (Other than the building block/general ones, as those carry over for the most part). Before I did my framework, I did everything in extra.css, and still do some changes there.

If they were to add style properties for everything people would end up being confused. XenForo covered the majority of things that would be changed, and left out the more advanced stuff as it is expected of designers to use extra.css for greater control.

I haven't had much difficulty with using color palettes efficiently unless it was a dark palette (Where there are very few light colors). My complaint about the color palette is that there are too many colors and that most designs will not use that many. For myself, I generally just copy my primary colors to my secondary palette, and just re-use what I need too. The key to making your design work overall with XenForo is to properly modify the general, and building block style properties as they are the most commonly used portions of code. So far, I have had no difficulty staying true to my designs (My mockups generally look ~95-98% similar to my end product).

If I have time I'll probably write guides for default XenForo, however I'm spread pretty thin with Xenique, my own custom projects, and customer work.

 

[Naatan]

To learn what template is which, all you really need to do is look at the source code and look at the #content class (#content.forum_list for example). Then you would just open up the template. For portions of a page you can either open up the page template, and it'll have it included, or you just need to guess. The naming of templates is very logical (sidebar_visitor_panel and the like), and it just requires learning how they named things.

I'm well aware of how to locate templates, but that doesn't change the fact that it can be tedious at times.

You actually do not need to use style properties, those are there for ease of use for non-savvy people (I use them in my designs so as to keep things future proof, as well as make it easier for customers and clients to change things themselves). Kier also suggests that people go directly into extra.css if they're capable of CSS, as you can do things quicker than dealing with the style properties (Other than the building block/general ones, as those carry over for the most part). Before I did my framework, I did everything in extra.css, and still do some changes there.

If they were to add style properties for everything people would end up being confused. XenForo covered the majority of things that would be changed, and left out the more advanced stuff as it is expected of designers to use extra.css for greater control.

I wasn't suggesting they use style properties for everything, but stuff like color codes should definitely always use style properties. There are parts of the css that simply should be powered by style properties but currently aren't.

 

[jt2011]

@foresaken
thank you for the clarifications and insights, it clears a lot up.
I have been searching the forums and google for more help but the documentation is severly lacking in areas and this is what led to my frustrations with the system.
It really is so foreign when coming from a simpler system like phpBB but with the great community here and with help from folks like yourself, I'm starting to grasp how it works.

Regarding the twitter bootstrap, it is simply a UI template kit.
Using it makes developing sites much faster from start to finish, at least thats what I find since you don't have to sit there and code everything for the UI.
You just copy and paste from the examples. Let's say you want to do a fancy top navbar, well you look at the example in the github download and copy the code; paste it into your page do your changes like adding username variable or login check and you've for yourself a working menu and it took all of 2minutes.
Of course once the code is all finished, then you can start moving stuff around, tweaking colors and adding custom graphics, etc.

I have a few questions for anyone who can answer.

1.
Does whatever is in Extras.css, replace the existing css in a style/template, so the extras.css is sent to the user and not whatever it replaced in the style/template?
Or does it use both but the Extras.css gets loaded after and replaces whatever it wants from the style/template?
Or some other method?

The less being sent to the client the better. I have some users on dial-up!

2.
How do you move a thread to a different forum?
I cannot for the life of me find a button to do this, anywhere.


Admin Feature Request!
In regards to the admin interface, I think it would really help if the template names could have a brief blurb under them that explained what each template did. Like a short note about what the template is for or does. And while we are it at, why not add a link to the parent or children templates associated with it. So we can quickly jump around in the template list. Scrolling 494 templates is not fun. Could also add alphabetical quick jump links.

 

[Gabby]

@OP. The styling system is the best feature of XF imo. I've tried every single forum out there, including VB and by far XF has it hand's down. I don't know all the code and never want to but from a lay person's POV, the ease of XF will continue to shine for a long long time. Perhaps an experience coder may see some things but the average buyer and admin is not a coder I believe and doesn't have a whole lot of experience. We basically want a BANDA BING BANDA BOOM, click and go, Get-R-Done type of system, not an overly complicated mess.

You know it took me over a year to feel confortable with VB's ACP because there was simply too much. I ended up having to go to a special host just for technical support because their forums were so unusual.

And let's not forget how darn fugly VB4 looks. Who puts out a forum with mismatched oversized navi buttons and a cut off header? I mean, what where they thinking? I was so shocked to see how unfinished it looked for a company with so much forum experience.