ElkArte Community

Extending Elk => Custom Themes => Topic started by: Ant59 on April 30, 2014, 09:32:46 am

Title: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on April 30, 2014, 09:32:46 am
Just thought I'd post this here if anyone was interested.

I'm currently moving my gaming and technology community away from IPB. Having spent a few days with SMF 2.1 trying to help fix bugs and whatnot, I learnt about Elkarte and so decided to make the move over to here.

I'm working on porting my site's theme to Elkarte using modern web technologies such as jQuery and Foundation. The finished product will be a completely responsive, mobile-first forum using Elkarte's underlying system. It will likely bear little resemblance to the Elkarte default theme, nor use any Elkarte CSS/JS.

http://beta.xydre.com/xydre_testing/

I may end up making deeper modifications, but for now at least, I'm trying to keep all my changes restricted to theme files.
Title: Re: [WIP] Modern responsive theme for my community
Post by: kucing on April 30, 2014, 12:16:43 pm
Woah.. like it. Will you make it available publicly?
Title: Re: [WIP] Modern responsive theme for my community
Post by: Spuds on April 30, 2014, 01:58:32 pm
Welcome to the site  :D

Sounds like you have a fun project ahead of yourself, please keep us informed as you go along as we love to hear about how ElkArte is being used/implemented.

If (as) you find any bugs be sure to let us know either here or on the github tracker so they can be addressed.  Also if you find things that would simply make it easier to customize, missing hooks, functions, etc let us know that as well so we can look to implement the changes in the core.
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on April 30, 2014, 03:18:35 pm
Quote from: kucing – Woah.. like it. Will you make it available publicly?

I would like to :) I'll see what I can do in the future.

Quote from: Spuds – Welcome to the site  :D

Sounds like you have a fun project ahead of yourself, please keep us informed as you go along as we love to hear about how ElkArte is being used/implemented.

If (as) you find any bugs be sure to let us know either here or on the github tracker so they can be addressed.  Also if you find things that would simply make it easier to customize, missing hooks, functions, etc let us know that as well so we can look to implement the changes in the core.

Thank you :) It's been great so far. I'll certainly make sure to report any bugs or submit PRs if I fix anything.

I have already noticed one or two things where HTML is being generated in subroutine files rather than allowing the template to generate it's own from data. I'm keeping a list :)
Title: Re: [WIP] Modern responsive theme for my community
Post by: emanuele on April 30, 2014, 04:07:07 pm
Welcome around! :D

Looks like a very nice theme!

Bug fix are a great thing! :D (But remember that I'm the only one allowed to create bugs. :P)
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on May 01, 2014, 05:03:08 am
I've pushed the working branch for the theme to GitHub on my Elkarte repo.

https://github.com/Ant59/Elkarte/tree/xydre-theme

Quote from: emanuele – Welcome around! :D

Looks like a very nice theme!

Bug fix are a great thing! :D (But remember that I'm the only one allowed to create bugs. :P)

Thank you :)

Haha!
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on May 02, 2014, 11:47:08 am
Board index now complete except for board icons.

Still got some work to do one the header and menus, but that might involve some clean-up of the menu system to allow themes to better leverage positioning of individual buttons.
Title: Re: [WIP] Modern responsive theme for my community
Post by: meetdilip on May 10, 2014, 10:49:50 pm
Awesome !!!
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on May 28, 2014, 09:45:00 am
Sorry for the slow progress and absence as of late. Lots of stuff keeping me busy.

However, I have managed to make some more progress with the theme and I'm pushing really hard now to get this to a usable state.

I've merged in the RC1 release from the upstream to my working repo. The theme works perfectly and should 1.0-ready on release.
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on May 28, 2014, 10:52:05 am
This is the current message index. Just some finishing touches to add.

(http://i.imgur.com/uH5Cbq5.png)
Title: Re: [WIP] Modern responsive theme for my community
Post by: Spuds on May 28, 2014, 09:41:55 pm
Very nice work !!  Congratulations!
Title: Re: [WIP] Modern responsive theme for my community
Post by: emanuele on May 29, 2014, 03:29:54 am
Cool!
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on June 03, 2014, 05:28:33 am
Just wanted to share a preview of the administration centre.

Login screen
(http://i.imgur.com/4jMSOtk.png)

Admin home
(http://i.imgur.com/8Wxi2f5.png)

Sticky top-bar, bottom of admin home
(http://i.imgur.com/evnEijf.png)
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on June 03, 2014, 10:21:53 am
Profile page
(http://i.imgur.com/XBTaShr.png?1)
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on June 03, 2014, 10:59:47 am
Topic
(http://i.imgur.com/ESaICDL.png)
Title: Re: [WIP] Modern responsive theme for my community
Post by: emanuele on June 03, 2014, 11:53:54 am
/me loves that topic view! nods
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on June 18, 2014, 07:18:26 am
I need help with Git!

I'm a complete noob when it comes to version control. I was wondering if any of the devs here could help me find a way to share this theme on GitHub, where I can also merge-in changes to the default theme from the Elkarte repo?

I want to be able to make sure the Xydre theme keeps up with any additions and changes in the main repo, but I have absolutely no idea how to achieve it.
Title: Re: [WIP] Modern responsive theme for my community
Post by: emanuele on June 18, 2014, 09:28:26 am
hmm...
Keep in-synch the theme may me a bit tricky even with github, at least in the "conventional" way.

Now I'm a bit in a hurry, I'll come back later...
Title: Re: [WIP] Modern responsive theme for my community
Post by: Ant59 on June 18, 2014, 11:15:21 am
Quote from: emanuele – hmm...
Keep in-synch the theme may me a bit tricky even with github, at least in the "conventional" way.

Now I'm a bit in a hurry, I'll come back later...

I guess there's always the manual option of just side-by-side comparison with the RC1 release, then push to it's own repo.

Just wanted to make it a bit easier to merge-in changes that are required for new features in the core.
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on June 19, 2014, 11:47:13 am
I manually compared every file from the deault theme and merged-in appropriate updates and changes. Repackaged the Xydre theme into a proper 3rd party theme folder and removed all the files that were identical to default.

Theme viewable at http://beta.xydre.com

I'll be pushing the theme to it's own repo on GitHub as soon as I can work out a licence to suit it :)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: emanuele on June 19, 2014, 04:12:32 pm
Heck, sorry, I lost track of that... :-[

If you want to keep your theme in-synch with the default, the only way I can think of is to use a branch.
Let me explain it a bit more in details.
Small warning I'm doing other 3/4 things and I may mess one of them, and it may be this one, dunno yet. lol

Git has branches. Branches are... you can think at them like copies of the entire code that can "live" independently (mostly).
So, "master" is the branch that usually holds the same code and the "central" repository.
If you create another branch, let's say "Xydre", there you can do your edits and commit (the smaller the commit the easier to merge later) the default theme the way you want.
Every time the central repo is updated, then you can:
Then, when you want to pack the release, you can just add your theme-info.xml and create the zip with the files in the Xydre branch.
The problem doing it this way is that it will not be easy to find out which files you actually have to pack, because in the Xydre branch you will have all the templates, and not only those you are modifying.
This is the messy part.

Just to be sure, if you want to compare manually, there are software like WinMerge that can do most of the work for you. :)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on June 20, 2014, 04:39:41 pm
Thanks for the great post emanuele :)

I was originally working on it as a branch, but as you say, it leaves me having to manually pick the correct files to package. I think it's probably just as easy for me to maintain the theme as a separate entity and compare the files with the default on version changes.

I used a fantastic application from the Debian repo called Meld. It's essentially the same as WinMerge.
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: emanuele on June 20, 2014, 06:11:32 pm
/me takes note.
I'm using Diffuse and/or KDiff3, but I don't really like any of them... :-\
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Jorin on June 27, 2014, 02:07:57 am
Quote from: ant59 – Theme viewable at http://beta.xydre.com

Looks amazing! Great job!  :o  :)

Although I don't like the avatar section in a thread, I think it's somehow too big. Not so compressed and compact like the design in other sections. And I don't like the numbers of the pages a thread has in board index. Also too big. The stats page of a user seems to have some problems on the IE I have to use here at my office. But thats maybe only a problem of my browser here. Oh, and the sub boards and page numbers of a thread on forum index seems too big also. But that can sure be all fixed in your css file?

But all the rest is really fantastic! Please release it so I can use it!  ;)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: meetdilip on June 29, 2014, 12:05:49 am
I would grab this theme the first thing. I love bluish shades.
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: CrimeS on July 14, 2014, 03:21:31 pm
Very simple and lovely theme! Great job!
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on July 14, 2014, 03:57:37 pm
Quote from: Jorin – Looks amazing! Great job!  :o  :)

Although I don't like the avatar section in a thread, I think it's somehow too big. Not so compressed and compact like the design in other sections. And I don't like the numbers of the pages a thread has in board index. Also too big. The stats page of a user seems to have some problems on the IE I have to use here at my office. But thats maybe only a problem of my browser here. Oh, and the sub boards and page numbers of a thread on forum index seems too big also. But that can sure be all fixed in your css file?

Thanks! :) Yeah, the topic section isn't quite finished yet. That has a fair bit of work left to do, since I want the avatar and username to move to be above the post for mobile screens, so I'll probably play around with the sizes and style when I do that.

Quote from: meetdilip – I would grab this theme the first thing. I love bluish shades.

It's very easy to change the colour scheme too, since the CSS is compiled using SASS, so it's just a case of changing the $primary-color and $secondary-color variables, and SASS sorts out all the shades for you :)

Quote from: CrimeS – Very simple and lovely theme! Great job!

Thanks!

I'll continue my work on the theme as soon as I've finished the implementation of HybridAuth. I need people to be able to login with social accounts as a priority over design at the moment.
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: forumsearch0r on July 19, 2014, 10:31:58 am
Great work! :)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: P2P on September 12, 2014, 05:28:49 am
Not compatible with version 1.0 :(
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on September 12, 2014, 05:31:23 am
Quote from: P2P – Not compatible with version 1.0 :(


Not compatible with anything at the moment, sorry! Real life (medical) stuff caught up with me, so I'm on a bit of a hiatus from the project. I hope to be back soon to complete this theme and the HybridAuth plugin :)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: P2P on September 12, 2014, 05:37:49 am
Ok, Thanks for the information  :)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: emanuele on September 12, 2014, 10:00:37 am
Take care and all the best ant59!
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Allan on September 12, 2014, 10:07:55 am
Wish you all the best @ant59
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on November 11, 2014, 10:09:17 am
I've been back to working on this lately :) Here's a peak at the tidied post area

(http://i.imgur.com/9Ny75Um.png)

Still missing a few glyphs on the toolbar. I'm using an icon font instead of GIFs.
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Adrek on November 11, 2014, 11:00:35 am
This theme is just amazing :) Great job ant59 :)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on November 11, 2014, 11:09:55 am
Quote from: phantom – This theme is just amazing :) Great job ant59 :)

Thanks! :D

Here's the poll editing setup when starting a new topic with a poll. It's also responsive, so if you reduce the screen width, those fieldsets will slide down one on top the other instead of getting crushed side-by-side.

(http://i.imgur.com/MbEPATL.png)

(http://i.imgur.com/CvH7z2H.png)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: emanuele on November 11, 2014, 11:30:15 am
Pretty neat! :D
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Spuds on November 11, 2014, 09:13:55 pm
That is looking awesome !!
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: meetdilip on November 14, 2014, 08:19:07 am
Let us make this the default theme :serious:
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on November 17, 2014, 02:27:02 pm
I like icon fonts :D I do not like topic icons though :P

(https://i.imgur.com/Yy77iQE.png)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: emanuele on November 17, 2014, 03:55:59 pm
Quote from: ant59 – I do not like topic icons though :P
I wouldn't be that against removing them... O:-)
Well, let me see if first I can "extract" them in a sort of module as well. ;D
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on November 17, 2014, 04:01:43 pm
I came to the conclusion that they added almost no functionality, they're just vanity. Pinning, locking, participation, new posts, etc... are all handled by font icons on my theme now :)

Quote from: emanuele – Well, let me see if first I can "extract" them in a sort of module as well. ;D
Good idea :P
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: meetdilip on November 17, 2014, 08:29:28 pm
Is it ready @ant59 ? Would love to give it a try..
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Ant59 on November 18, 2014, 10:05:37 am
Quote from: meetdilip – Is it ready @ant59 ? Would love to give it a try..

Not likely for distribution any time soon. I'll be running it on www.xydre.com for now to work out the kinks and make use of it on my community.

I don't mind explaining how I've done things, but I won't likely be releasing the source any time soon :)
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: meetdilip on November 18, 2014, 09:03:37 pm
Oh ! Ok.
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: TomW on March 17, 2015, 02:14:12 pm
Nice theme !   Any chance that it will be made available soon ?
Title: Re: [WIP] Xydre - Modern fully-responsive theme for Elkarte
Post by: Obamatron on June 04, 2015, 02:39:56 am
Loving the look of this theme.