News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

The story of a custom theme/mod project.

Started by Simple Site Designs, December 05, 2012, 06:54:15 PM

Previous topic - Next topic

Simple Site Designs

I was not sure where to post this so please move it if there is a more appropriate location :)

First off I want to say a big thank you to both the SMF team and this community, your dedication and support has made this project a pleasure to work on. Cheers!

TL;DR - you can see the results here: http://procreate.si/forums/

This all started about 3 months ago when my client came to me and said:

QuoteWe are sick of getsatisfaction, the interface is horrid and we want a more community focused forum for our users. We would like you to code up a re-skin of something like phpbb for us. But the main thing is, it has to look awesome!

So I said sure thing, it'll take a couple of weeks... and I begun the process of finding the best forum framework to a) provide the features they needed and/or the ability to build them in and b) be easy to theme. A key thing here is that this client is a design powerhouse, everything they do looks and feels great, so basic theme changing was not going to cut it, it needed to be editable down to it's very core.

I had never seen SMF before now - but, from the moment I googled it, it appealed to me and the more I played with it the more I felt it was the system for the job. The flat file structure and functional programming made it pretty easy to find modules that needed changing and add new ones, the fact that mods are generally expected to make core code changes also worked with my approach - it was decided - and SMF was installed on my dev server, and the client sent me the UI designs - All I can say is WOW! This is not a two week project at all, I'm not going to make any money off this job, but it's going to be a joy to build.

The first thing that came to mind when looking at the designs was compatibility - this was a complex design, it had massive layers of alpha and effects that jQuery was not going to be able to manage alone - so we talked... and made a massive call - there would not be any regard given to compatibility, the forums must look great, and if supporting anything other than the latest browsers will degrade that, then we won't support them. This site is HTML5 & CSS3 dependant and resource hungry - if you don't have a modern browser/device, don't bother :)

Another core requirement was retina support (double pixel density displays), given most users were going to be on iPad's and Apple have some pretty high standards for developer sites, this was reasonable enough, but I built it with both, so it only uses hi-def graphics if the browser/device supported them and normal size ones if not - that way we can save some bandwidth and improve speed on standard screens, yet still have it look super crisp on next gen ones.

The work began...

The only way to do this mod was to create a new SMF theme and build it from the ground up. This was done while referring to the default theme files for clues on what needed to be included. There also needed to be support for things like saying "thanks" for a post (and the number of thanks a user gets controlling how many "stars" they have). Topics needed to have a +1 button to up-vote ideas. We needed facebook, google, openid and standard login options, in-line file attachment/image display, long quotes needed to collapse... the list goes on and on.

Some things were done with mods available here, a lot needed me to mod those mods, and some needed me to build it in - but with almost everything, SMF had a way to do, and that makes me happy :)

In the end, this two week project took closer to three months - but that's software dev for you.

Yesterday, the new forums for Savage Interactive's iPad application "Procreate" (http://procreate.si) went live, and I'm pretty proud of the result. Please go and check it out and if you have any questions/comments, post them here - I'd be interested in your feedback.

Also, if you have an iPad and like to paint/draw, I can't stress enough how awesome this app is, check it out.

The forums are available at http://procreate.si/forums/ and I have attached a few screen-shots to this post.

Thanks for reading,
Josh



Deaks

TBH I have read this posts a few times now and I feel this is best place, I am happy to read you love the software, and I do have to say that is one of the best themes ive seen for SMF, and I do hope that you will consider making some high quality free themes for the theme site.

If you are interested to se the future of SMF then please have a look at our github:

https://github.com/SimpleMachines/SMF2.1/

And if you can see any changes that will help please do say :)
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Simple Site Designs

Thanks, I can't take any credit for the design, that was done by the pixel magician at Si who provided me the layered PSD's to cut and code. Would love to make more themes for the community, but they would need to be simpler than this one - over 500 hours work and it breaks so many SMF design guides it's scary ;)

Colin

*Fits better in Showcase.

Theme looks awesome.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

xrunner

Wow - really nice theme. Hope to see more work like that.

Deaks

Quote from: Colin on December 05, 2012, 08:27:31 PM
*Fits better in Showcase.

Theme looks awesome.

Incorrect, there are guidelines for showcase and this topic doesnt meet them.
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Deaks

Quote from: Simple Site Designs on December 05, 2012, 08:23:26 PM
Thanks, I can't take any credit for the design, that was done by the pixel magician at Si who provided me the layered PSD's to cut and code. Would love to make more themes for the community, but they would need to be simpler than this one - over 500 hours work and it breaks so many SMF design guides it's scary ;)

You made it possible you get credit, but yeh simpler be good :) and I look forward to seeing some.
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Simple Site Designs

Quote from: Bryan "Runic" Deakin on December 05, 2012, 08:30:36 PM
Incorrect, there are guidelines for showcase and this topic doesnt meet them.

Didn't even see the showcase board - would it be worth creating another post in there that links back here, or is that a bit spammy :)

Deaks

definatley post there but please make sure you follow the guidelines for taht section.

Issue with this topic is it truthfully fits in a couple of boards.
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Simple Site Designs

Quote from: Bryan "Runic" Deakin on December 05, 2012, 08:37:29 PM
definatley post there but please make sure you follow the guidelines for taht section.

Done, let me know if I managed to still break the rules.

Quote from: xrunner on December 05, 2012, 08:27:59 PM
Wow - really nice theme. Hope to see more work like that.

Cheers!

mashby

One of the keywords in this board is feedback and it sure meets that! The Showcase board is another place and this certainly would be good there, too. And I'll jump back to the word feedback. You worked SMF into the framework of the visual design of procreate.si. And you're feedback is great, here. Kudos to you and the team that makes SMF possible. :)
Always be a little kinder than necessary.
- James M. Barrie

Simple Site Designs

Quote from: mashby on December 05, 2012, 09:04:57 PM
You worked SMF into the framework of the visual design of procreate.si.

SMF was very flexible and patient with me and it complained very little - even with the thorough shake up I gave it  ;D

The Craw

That is one absolutely killer theme! Well done on the site. It's probably one of the best looking forums I've ever seen.


Mick.

Absolutely awesome.  Very cool man!   Im sure it took months to finish it. Right on!

Simple Site Designs

Cheers Mick!

About two and a half months work, and we still have a lot to do - personal messaging for one.

emanuele

Hey!
Nice to see it public! O:)

Congratulations again for the wonderful result!


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

lurkalot

Great looking theme.  Just one heads up though.   

If you view it in IE9 the board titles are not clickable, but the board description panel is.  In Firefox, the board title and description panel are both clickable as they should be.

Just thought I'd mention it.

Simple Site Designs

Thanks lurkalot,

For some reason IE9 is showing the text through the anchor that spans over it, it is only click-able where there isn't text behind it - make no sense... but that's why the decision was made very early, to not spend any time catering to IE oddities :D

If someone knows an easy fix for this I'd be happy to implement it - but otherwise it's just for supported browsers (latest FF, or Webkit [chrome, safari etc])

Thanks :)

Trekkie101

Very nice theme and on the iPad it handles like a dream. Well done.

Advertisement: