XenForo skin in progress

My first stab at skinning XF! (disclaimer: programmer; designing this out of necessity)



The template system is confusing as hell, compared to something like Twig (or any sane templating language) that I've grown accustomed to. I still wish there was a proper way to version template changes on the filesystem, but the webdav stuff made editing doable at least.

A quick

Code:

sudo apt-get install davfs2
sudo mount.davfs http://hostname/admindav.php/Public_Templates templates -o "rw" -o "uid=username" -o "gid=username" -o "file_mode=0777"

and the entire template tree for all styles is sync'd to your filesystem. Errors silently fail and updates seem to take forever, but it does work!

I was able to merge in my existing bootstrap-based style I have into the forum. I still have lots of details to fix, but I'm pretty happy with the progress so far.

Has anyone else tried implementing a front-end framework into XenForo? My major gripe with XF has been the theme, but if you can replace it entirely without it looking too much like XF that's a pretty big win in my books.

Let me know what you guys think.

 

Hard to judge from just a single picture. What is the "Forum Intent" at the top?

What exactly is confusing you? What else do you find better in twig, which is missing or different in XF?

Btw, (shameless plug here again) our plans include using twig for our templating engine. It has to be one of the best PHP templating systems out there and we definitely don't want to invent that wheel again.

Scott

 

More about the actual site at http://forumintent.com

Confusing: the syntax is a mix of custom tags, {} expressions, helpers being split across tags/"helpers", and then callbacks. Twig has a lot more predictable and sane syntax, and more separation between data and HTML generation. Whenever something needs to be changed, need to figure out if it's a tag or a helper, what the parameters are, which helpers they internally call, if any, all while mixing pseudo-HTLM into your markup. I like the clearer separation that most template languages provide.

Now, I've gotten through it relatively quickly, but I can't see how this is even remotely friendly for developers who aren't used to it. Same problems vBulletin has always suffered from. I must say that on the CSS front, it's much better than vBulletin. However, it's still not close to modern web UI so I've sripped out what I can in favor of bootstrap equivalents.

Here's a better pic of the style -

 

The thread I did start posing some questions on how to do things went completely ignored. I followed up with the mount code above, but again, no replies even.

vBulletin had the same problem like I said. For vBulletin I ended up developing a tool that allowed you to develop (locally) against the filesystem without ever needing to use the plugin or style interfaces. That way you can actually version what you're working on with modern tools. It's also one of the reasons why there are so few developers or designers that can do it full time. The tooling is not there, or at least not officially.

Contrast that with Wordpress, where it's stupidly easy to get into, even without a template language which is supposed to help, nor hinder contribution,

</rant>

Regardless, after doing a little bit of the legwork here, I wonder how many people would be interested in a bootstrap, or (insert css framework here) base theme that's easy to customize.

 

I've just about given up on hoping a popular piece of Forum Software (especially with Kier involved - great at structure, just not UI) will ever have any semblance of UI Design within its administration panel, or any sort of advanced front or backend development tools.

All I want is the ability to use SASS and other preprocessors. I want a WordPress-like Template system that can let me look at actual files. Not this horrible in-browser code view.

It is fine to have features (color changes, basic style changes) available in the admin panel for Site owners who don't need or have the knowledge to customize at a deeper level but to handcuff anyone who does is not the way to go about it in my opinion.

*jumps off soapbox*

 

Twig + Less or Sass would be nice.

Twig: for people who do templates often, it's not another language to learn and it's very consistent and easy to learn.
CSS Precompiler: allows variables and basic programmability in CSS with easy variables to change that apply to the whole system. Wrap that in a GUI and you're done.

Neither of those tools prevent a decent GUI to help admins, but the base system should be done on the filesystem. It seems that this would easily cater to both parties. Right now, both are struggling...

This is a basic result of what I'm talking about - http://pikock.github.io/bootstrap-magic/app/index.html#!/editor (yet, it's free)

 

Thanks for the insight Adrian.

Scott

 

I've finished the style (for now) - you can see it live at
http://community.forumintent.com/

Notable changes

• new front page with left sidebar as forum tree, main content area with recent posts + featured posts
• forum view has forum tree as well, with forum highlighted
• all secondary navs converted to left sidebar where possible
• contributors in thread in right sidebar (and a few other contextual widgets)
  
• lots of things gutted

There's tons of stuff to tweak still, especially for the lower resolutions. For now, I'm using Bootstrap's responsive stuff, but I need to tear apart more stock templates to really utilize that.

 

Nice and clean Adrian. I like the direction. But, my first thoughts were, "Gee, it has a Wordpress.org feel." I think it is just the beige/ brown colors that reminded me of Wordpress.org at first glance. Other than that, it will be very interesting to see how far you can go with building in Bootstrap. We are also contemplating going with Bootstrap or Foundation. Which would you prefer personally?

Scott

 

The trick is to give professional designers the tools they need to do their job as efficiently as possible and a platform to let them go to town, even down to individual UI element design (which is where I think the other vendors make a huge mistake).

And!.....at the same time, give the less knowledgeable designers/novices those same tools, but also actually help them learn to design better. In other words, we won't aim to cater to less knowledgeable designer noobs at all, but make a system that will help those novices dive into the world of design and learn proper design while having fun doing it. That is my vision. We have the basic premise....

Give a man a fish, he can eat for a day, teach the man to fish, he can eat for a lifetime!

Other vendors tend to just give their customers fish.

Now, our challenges come from the variety of ways there are to do "design". Finding the right one for our design system, which will make the "masses" of professional designers as happy as possible, and still be able to give novices the opportunity to learn design, is going to be one fun challenge. We'll surely see arguments as to what proper design is, from the number of columns in a grid for a responsive design to what CSS compiler to use (or to have one at all) to what basic UI framework is the best. We are actually still working on how to basically not lock anyone into any of that kind of design stuff for the front-end too and leave it solely up to the application developers and their designers. That is one of our, if not the biggest, challenges indeed. To answer the question, how far to integrate the platform's design system into any application's design system If we decide to make the decisions for app designers, we could help them do their jobs faster, but then we'd also lock them into something they might not like to use. It's the common issue with software trying to be a platform today. Very tricky stuff indeed.

Scott

 

Thanks Scott. I guess it has that bloggish feel, and I'm sure many WP sites do use Bootstrap anyway. I have no experience with Foundation at all... and to be honest, I really shouldn't be doing any design work at all.

This one was a labour of love. But, I don't think I'd want to sell the style (maintenance hell), or do many other styles. The theming system is still a bit of a mess. I might get to the point with tooling where it's viable, but for now it is too frustrating.

I made a little more progress on that front actually. I set up a new directory, let's call it "project", as well as a top level "templates" directory (webdav access to public templates). With that,

1) Track project directory contents in git, it contains library, styles, and templates directories.

2) Symlink the the library/X and styles/X directories into XF, so the real version can be versioned and exist in XF at the same time.

3) I set up some scripts to help try template changes. This was the fun part.

a) one to diff default style + custom style
b) one to parse that output into a flat list of filenames
c) one to copy any of those changed files back to my templates directory

So, the primary use case is a one liner to copy all custom templates from XF's webdav templates into my project's templates. It makes it pretty easy to track changes that way.

However, that's really backwards from the files, and I'd prefer to edit the private copy and have it sync back. But, the webdav stuff is buggy and confusing enough without another layer of indirection there. I just couldn't bring myself to it.

I realized that when there's an error, the write fails, with a notable delay. And when there isn't an error, the write succeeds, but it takes several seconds to actually take effect. It makes debugging very confusing and slow. Supposedly it writes errors to internal_data/ but I can't find it anywhere.

So aside from the horrible, yet barely functional editing experience, deployment is another story. Do you guys know of any command-line based product and style import/exporters? That would allow me to automate the deployment process, which right now is very convoluted.

Cheers

 

Sumtin awesome fishies abut this tail. The autor forgots to tells us we needs a dory tu be fishin outa. Me not being too fast at du ors tooks me 5 dunkins with fishes in me boots I needs a boot. Da floatin typ. Twice't I was near up to me gunnals (crochity area for nun nor easters)

Den we needed to take on hookers, we ya shuda heard da wifes belly achin. Don cha hookers be baitin me hubbies wilst out ta see.

Up yer mast boys, have a greek day.