Advertisement:

Author Topic: The story of a custom theme/mod project.  (Read 35963 times)

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
The story of a custom theme/mod project.
« on: December 05, 2012, 06:54:15 PM »
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:

Quote
We 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


« Last Edit: December 05, 2012, 07:20:41 PM by Simple Site Designs »

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,021
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: The story of a custom theme/mod project.
« Reply #1 on: December 05, 2012, 08:10:23 PM »
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 :)

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #2 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 ;)

Offline Colin

  • Lead Developer
  • SMF Hero
  • *
  • Posts: 7,765
  • Gender: Male
  • SMF Developer
    • colinschoen on GitHub
Re: The story of a custom theme/mod project.
« Reply #3 on: December 05, 2012, 08:27:31 PM »
*Fits better in Showcase.

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

Colin

Offline xrunner

  • Sophist Member
  • *****
  • Posts: 1,019
  • Gender: Male
  • Karma +584/-1
Re: The story of a custom theme/mod project.
« Reply #4 on: December 05, 2012, 08:27:59 PM »
Wow - really nice theme. Hope to see more work like that.

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,021
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: The story of a custom theme/mod project.
« Reply #5 on: December 05, 2012, 08:30:36 PM »
*Fits better in Showcase.

Theme looks awesome.

Incorrect, there are guidelines for showcase and this topic doesnt meet them.

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,021
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: The story of a custom theme/mod project.
« Reply #6 on: December 05, 2012, 08:31:56 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.

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #7 on: December 05, 2012, 08:35:23 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 :)

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,021
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: The story of a custom theme/mod project.
« Reply #8 on: December 05, 2012, 08:37:29 PM »
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.

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #9 on: December 05, 2012, 09:00:22 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.

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

Cheers!

Offline mashby

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,394
  • Gender: Male
  • badass beer hound
    • Choppix
Re: The story of a custom theme/mod project.
« Reply #10 on: December 05, 2012, 09:04:57 PM »
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

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #11 on: December 05, 2012, 09:13:30 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

  • Guest
Re: The story of a custom theme/mod project.
« Reply #12 on: December 06, 2012, 01:24:46 AM »
That is one absolutely killer theme! Well done on the site. It's probably one of the best looking forums I've ever seen.

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #13 on: December 06, 2012, 02:50:32 AM »
Thanks heaps!

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,673
  • Gender: Male
  • Premium SMF Themes
    • idesign360 on Facebook
    • @idesign360 on Twitter
Re: The story of a custom theme/mod project.
« Reply #14 on: December 06, 2012, 03:00:06 AM »
Absolutely awesome.  Very cool man!   Im sure it took months to finish it. Right on!

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #15 on: December 06, 2012, 03:02:55 AM »
Cheers Mick!

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

Offline emanuele

  • SMF Super Hero
  • *******
  • Posts: 14,156
  • Gender: Male
  • THERE'S JUST ME
Re: The story of a custom theme/mod project.
« Reply #16 on: December 06, 2012, 04:18:26 AM »
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.

Offline lurkalot

  • Sr. Member
  • ****
  • Posts: 978
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: The story of a custom theme/mod project.
« Reply #17 on: December 06, 2012, 04:43:31 AM »
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.

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #18 on: December 06, 2012, 05:20:50 AM »
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 :)

Offline Trekkie101

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,157
  • Gender: Male
  • Ad Astra!
    • https://www.facebook.com/DLRPRoundup on Facebook
    • @dlrproundup on Twitter
    • DLRP Roundup
Re: The story of a custom theme/mod project.
« Reply #19 on: December 06, 2012, 11:26:01 AM »
Very nice theme and on the iPad it handles like a dream. Well done.

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #20 on: December 06, 2012, 03:41:53 PM »
Thanks Trekkie.

If you have an iPad retina display you should be seeing it in all its glory :)

Offline TomW

  • Jr. Member
  • **
  • Posts: 293
  • Gender: Male
Re: The story of a custom theme/mod project.
« Reply #21 on: December 12, 2012, 01:58:13 PM »
Very nice work !  I noticed that some images are attached in posts.  Did you create an app to upload attachments for iOS ?  Or do they use something like Photobucket ?

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #22 on: December 12, 2012, 03:28:50 PM »
Thanks Tom, no special apps. I did do a lot of work making a stylish upload screen but ability in iOS is limited to the latest version (supports uploads).

Offline 4Kstore

  • SMF Hero
  • ******
  • Posts: 4,298
  • Gender: Male
    • agustintari on Facebook
    • @agustintarifa on Twitter
    • SSIMPLE TEAM PAGE
Re: The story of a custom theme/mod project.
« Reply #23 on: December 13, 2012, 02:49:20 AM »
the perfect theme exists  congratulations forma your great Job
¡¡NEW MOD: Sparkles User Names!!!

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #24 on: December 13, 2012, 03:51:08 AM »
Thanks 4K!

Offline vpn

  • Semi-Newbie
  • *
  • Posts: 15
    • VPNTutorials on Facebook
    • VPN Tutorials
Re: The story of a custom theme/mod project.
« Reply #25 on: February 16, 2013, 08:41:59 AM »
One of the best forum theme that I have seen!

I hope you did not modified too many core codes as it would be very hard to apply updates in the future.
VPN Tutorials [nofollow]
VPN Support Forums [nofollow]

Offline Matthew K.

  • SMF Super Hero
  • *******
  • Posts: 12,430
  • Gender: Male
    • matthew.kerle on Facebook
    • @matthew_kerle on Twitter
Re: The story of a custom theme/mod project.
« Reply #26 on: February 16, 2013, 08:57:56 AM »
I don't know how I overlooked this topic for so long. Absolutely beautiful. Amazing job!

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #27 on: February 16, 2013, 05:31:06 PM »
Thanks for your kind words!

@vpn So far no problem, updates have applied without any trouble.

Offline knightofdoom

  • Semi-Newbie
  • *
  • Posts: 49
    • Designers Sri Lanka
Re: The story of a custom theme/mod project.
« Reply #28 on: February 24, 2013, 10:37:50 AM »
cool theme...
Glory is fleeting, but obscurity is forever.
Web Designer Sri Lanka

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,646
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: The story of a custom theme/mod project.
« Reply #29 on: February 24, 2013, 02:34:36 PM »
We should feature this as a "You can do this with SMF". Awesome!
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Chalky

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 3,360
  • Gender: Female
  • If in doubt, give me beer...
    • ChalkCat
Re: The story of a custom theme/mod project.
« Reply #30 on: February 24, 2013, 02:46:05 PM »
It is truly truly beautiful!

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #31 on: February 28, 2013, 10:02:43 PM »
Thanks for your kind words guys! I'm just in the process of adding some great new functionality so the Procreate forums will be even better!

Offline Simple Site Designs

  • Jr. Member
  • **
  • Posts: 100
  • Gender: Male
    • Simple Site Designs
Re: The story of a custom theme/mod project.
« Reply #32 on: April 16, 2013, 01:10:01 AM »
Just a little update.

A lot of progress has been made on this project and some of the new features include:

  • Much better lightbox support with correct screen size limiting and full view options.
  • Post tagging ability for mods, allowing them ability to flag posts with pre-defined statuses (like "solved", "planned" etc etc)
  • Auto-grow option for reply/post box.
  • Plus heaps more....

Thanks again to everyone in the community who has helped me along the way!

Offline Oldiesmann

  • Developer
  • SMF Super Hero
  • *
  • Posts: 24,814
  • Gender: Male
  • Ask me about the function DB :)
    • oldiesmann on Facebook
    • Oldiesmann on GitHub
    • http://www.linkedin.com/in/michaeleshom on LinkedIn
    • @oldiesmann on Twitter
    • Archie Comics Fan Forum
Re: The story of a custom theme/mod project.
« Reply #33 on: April 17, 2013, 10:18:03 PM »
Not sure how I missed this topic the first time around, but glad to see SMF gave you the flexibility you needed, and the forum looks awesome!

The forum looks awesome, though I don't have any iDeviceTM to see it with :)
Michael Eshom
Webmaster / SMF Lead Developer
oldiesmann@simplemachines.org