Best Mobile Themes for SMF 2.1+

[JesusIsGodAlmighty.Life]

I'm at the moment downloading the 5 themes that exist,  Badem,  BootstrapLight,  Hobbit,  Lunarfall,  Wide A Responsive Theme including the standard theme. Going to try them all on my mobile - but I would really like to see or hear about some of the best mobile themes or encourage the Themers out there to go for it.

Mobility is very important in our days for many people including myself, if there can be made some very good Themes for SMF to use on mobiles - that would be an absolut winner overall for the platform.

I sadly don't have the know how myself - but it seems there are some great posibilities in SMF looking at the older themes and the variation there seem to be found in SMF.

Something also to think about is that icons might need to be a little bigger on mobiles as screens are smaller.

I already have some ideas overall, I'll see what I can do with what is there for now. But its looking good, if its going to go forward on the the mobility. Things to think about is space, you don't have much space on a mobile, so you wanna use it all and... Like many times you see forum themes with a huge box at the side or top that is just mostly empty filling up the screen. This is wastful on a mobile - space is has high value on a phone and it should be used visely.

Would anyone maybe be willing to make a lookalike from the Crunchbang theme? Pictures included and from my test page from past testing. FluxBB is dead, but they had these 2 nice old school minimalist Themes and I loved both of them. And then of cause it needs to be mobile ready as well.

I'm thinking it must be possible to make a look a like of that, with whatever goodies is included in SMF - they seem to still be of the same style of forum and not to much graphic nonsense either!

Anyway, that is all for now - just using and trying it out. SMF does feel like a text editor somewhat, not a bad thing at all, just interesting feeling you get when writing and having all those icons above like a text editor.

Thanks for all - and back to installing the Themes and trying them out. Tried 2 so far.

Dearly Regards
- Darkijah

[JesusIsGodAlmighty.Life]

Here are some more pictures of the themes if anyone would be interested. No idea where to start myself with such things. Just the ideas.

But keep those mobile themes coming - much appriciated I'm sure there is something I can start out with and use.

I wonder how the editor look on the mobile as well... hmmm.

- Darkijah

[JesusIsGodAlmighty.Life]

I think I might already have a lot of the colors from me trying to theme Flarum with CSS.

This was my try with Flarum moonths ago to make it look like the Crunchbang theme, simple and nice when I thought it was the way and that I would give it a go. But my skills even with just CSS are not that great and it takes me forever trying things out one by one seeing what it does.

Here are some of the CSS I used for it... how do I do that here, lets see. *ahh the # button!*

By the way I think #ffffff #2e3436 was used for the general text white and background some kind of grey.

Code Select Expand

body {background-color: #2e3436; color:#bfbfbf;}

p {color: #bfbfbf;}

h1,h2,h3,h4,h5,h6 {color:#ffffff;}

/*
ff00f6<-- pink
ffea00 <-- yellow
bfbfbf <-- text
2e3436 and menu bar lines, background
191c1e <-- menu bar highlight color,
3b4245 <-- ramme
#ff9100 <--Orange
75858a <-- sidenav
3b4245 <-- Farve til beskederne, streg rundt om beskeden - blå.

*/

.Button:hover,
.Button:focus,
.Button.focus {
background-color:#000000;
color:#ffffff
}

.Button {
color:#bfbfbf;
background:#191c1e;
border: 1px solid #2e3436;
}



hr {
border-top:2px solid #3b4245
}

mark {
background:#ffea00 ;
color:#ff00f6
}


fieldset {
border:1px solid #2e3436
}

.sideNav .Dropdown--select .Dropdown-menu>li>a {
  color:#bfbfbf
}
.sideNav .Dropdown--select .Dropdown-menu>li>a:hover {
  background:none;
  color:#ffffff;
}
.sideNav .Dropdown--select .Dropdown-menu>li.active>a {
  background:none;
  color:#ffffff;
}


@media print {
*,
*:before,
*:after {
  background:transparent !important;
  color:#ff00f6 !important;
  box-shadow:none !important;
  text-shadow:none !important
}
a,
a:visited {
  text-decoration:underline
}
a[href]:after {
  content:" (" attr(href) ")"
}
abbr[title]:after {
  content:" (" attr(title) ")"
}
pre,
blockquote {
  border:1px solid #ff00f6 ;
  page-break-inside:avoid
}
}


#home-link {color:#d8d8d8}
/* bfbfbf d8d8d8*/



::selection {
  color:#bfbfbf;
  background: #191c1e;
}

.DiscussionListItem {color:ff9100; border: 1px solid #3b4245;}

.DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title {
color:#ffffff
}

.FormControl {color:#bfbfbf ; background-color:#191c1e; border: 1px solid #2e3436; font-weight:bold;}


.FormControl:focus,
.FormControl.focus {
background-color:#bfbfbf ;
color:#2e3436;
border: 1px solid #bfbfbf ;
font-weight:bold;
outline:none
}

/* ------- */
.modal-open {
overflow:hidden
}
.modal-backdrop {
position:fixed;
background-color:rgba(155,155,155,0.9);
opacity:0;
}
.modal-backdrop.in {
opacity:0.5
}
.Modal-content {
background-color:#292f30;
}
.Modal-body {
background-color:#2e3436;
color:#bfbfbf
}
.Modal-body .FormControl {
background-color:#272822;
color:#f8f8f2
}

.Modal-footer {
color:#ba00ff
}
.Modal-loading {
background:rgba(0,0,255,0.9);
opacity:0;
}
.Modal-loading.active {
opacity:1;
}

/*ff0000 ff940d e5ff00 00ff00 25c7ef 0000ff ba00ff */

.TextEditor-controls {
  border-top:1px solid #76715e
}


.Composer-controls {background-color:#191c1e;}

.Composer {background-color:#272822; color:#25c7ef }


.Composer:not(.minimized):before {
  content:" ";
  background:rgba(0,0,50,1);
  border-bottom:1px solid #c2d900;
  opacity:0
}

.Composer.active,
.Composer.fullScreen {
  background:#272822;
  Color:#ff0000
}

.TextEditor textarea {
color:#ba00ff ;
}


.TextEditor textarea, .TextEditor textarea:focus { color: #ffea00 ; }

The code is absolutly messy by that was my try with that.

[Antechinus]

Making SMF look like that wouldn't be particularly difficult. It looks like a fairly basic theme. I had a go at making a responsive theme myself not that long ago. Standard looks but non-standard functionality. People seemed to think it works well: https://custom.simplemachines.org/themes/index.php?lemma=2941

You can even get things reasonably good (but not as good) on absolutely standard SMF markup. The dark theme linked in my sig would be quite usable on mobile if smf.org included a viewport meta tag.

[JesusIsGodAlmighty.Life]

Making SMF look like that wouldn't be particularly difficult. It looks like a fairly basic theme. I had a go at making a responsive theme myself not that long ago. Standard looks but non-standard functionality. People seemed to think it works well: https://custom.simplemachines.org/themes/index.php?lemma=2941

You can even get things reasonably good (but not as good) on absolutely standard SMF markup. The dark theme linked in my sig would be quite usable on mobile if smf.org included a viewport meta tag.

Me and coding don't go hand in hand, anyway but it is clearly shown by the Themes that a lot of things are possible to do. I looked at your black theme pictures - it looks very nice, would be interesting to see how it worked on mobile. Can it be installed to the Newest beta edition? You tried it on mobile? Anyway, I could just try it out myself. But yea, something of that nature - looks very pleasing to my eyes. And with a Black webpage, the forum might as well fit the rest of the page Black and Orange at least on one page I have. I need to start a new one as well in Danish which most likely will be somewhat different colors. But my main website is Black and Orange. Using the Orange to show people where there is something active, white for noneactive and black as background. Works great I think. Just still need to figure out something with a Forum that fits.
If FluxBB had not died and had become mobile able - I would surely have jumped on that wagon but... It's pretty much death. Not to many whistles and all, and very minimal - I liked that

But it might be possible to get SMF into a state I can be satisfied with, time will tell. Mobility is at the top of importance, all my website I'm trying to make Mobile happy.

Anyway, I've not digged into the help files on what you can do on the surface on SimpleMachinesForum, Might be able to easily edit the colors and do some things here and there - I don't know. But that would be cool.

Dearly Regards
- Darkijah

[Antechinus]

That theme is actually a dark blue rather than black, although changing it to monochrome would be very simple. It was made for 2.0.x and hasn't been adapted for 2.1 yet. However, the same look could be adapted to 2.1 without a huge amount of drama.

I haven't tried it on mobile myself, and I don't know if anyone else has. I made it because someone really wanted a dark theme to use on smf.org, which meant making something that would run in the user's browser. As it turns out, I like it so much that it's become my default on this site (I'm using it now). I also made a slight variation of it for Elkarte.

On smf.org the catch is that there is no viewport meta tag in the markup, which means mobiles won't know they are supposed to display it a normal scale, so they'll probably do the dreaded "zoom out until everything is tiny" stunt they love to pull. But if given the appropriate meta tag it should behave pretty well, although it would still be somewhat limited due to being all CSS, with absolutely no markup changes (again, due to having to run in the user's browser without touching actual SMF site code).

My 2c: try a range of responsive themes from the Theme Site here. They're free, and they're easy to install, so no worries. If you find one that pretty much does the business, but you want the eye candy tweaked, or a few bits and pieces moved around, someone will be able to sort that for you.

[lurkalot]

I made a dark variant of the 2.1 theme, but will probably have to update it again when RC3 comes out.  http://lts4.byethost7.com/testsite7/index.php?theme=3

[forumovod]

Something also to think about is that icons might need to be a little bigger on mobiles as screens are smaller.

I wanted to say that too.
Why are there such small icons and fonts in the adaptive theme SMF 2.1?

[JesusIsGodAlmighty.Life]

That theme is actually a dark blue rather than black, although changing it to monochrome would be very simple. It was made for 2.0.x and hasn't been adapted for 2.1 yet. However, the same look could be adapted to 2.1 without a huge amount of drama.

I haven't tried it on mobile myself, and I don't know if anyone else has. I made it because someone really wanted a dark theme to use on smf.org, which meant making something that would run in the user's browser. As it turns out, I like it so much that it's become my default on this site (I'm using it now). I also made a slight variation of it for Elkarte.

On smf.org the catch is that there is no viewport meta tag in the markup, which means mobiles won't know they are supposed to display it a normal scale, so they'll probably do the dreaded "zoom out until everything is tiny" stunt they love to pull. But if given the appropriate meta tag it should behave pretty well, although it would still be somewhat limited due to being all CSS, with absolutely no markup changes (again, due to having to run in the user's browser without touching actual SMF site code).

My 2c: try a range of responsive themes from the Theme Site here. They're free, and they're easy to install, so no worries. If you find one that pretty much does the business, but you want the eye candy tweaked, or a few bits and pieces moved around, someone will be able to sort that for you.

I noticed that people where talking about not being that many Dark themes - that's sad as it is at least something I want for my one site. The other might be okay with some white. Of cause there should be Black themes to a forum, kinda a thing that some people really likes and wants. Like photoshop works amazing with its black theme although many years since I ever used it. But it was very nice touch to the application to go black. Crunchbang linux was another wonderful gem that used dark background and white letters and such. Was very nice, both there system and the forum style. I downloaded the file it seems it is only CSS, so it would not install - I guess I need to put the files some place in the server installation - although did not look further into it but I will at some point and try it out.

But the Crunchbang Theme on FluxBB just did it for me in the past, absolutly amazing, keeping it simpel and letting it be in the background of it all while one can focus on using it. I use colors on my website, one specific one to point out to users that it can be clicked and white for non clicking. And dark background, it seems to work pretty good. I like that things have functionality to help the user

You can changed the Theme on this site??? I have yet to find the feature and still on the white :/ - still a newb trying to find my way around. Do they have your Theme installed by default or can one install it???

Elkarte??? I guess after a search - this one https://www.elkarte.net

On smf.org the catch is that there is no viewport meta tag in the markup, which means mobiles won't know they are supposed to display it a normal scale, so they'll probably do the dreaded "zoom out until everything is tiny" stunt they love to pull. But if given the appropriate meta tag it should behave pretty well, although it would still be somewhat limited due to being all CSS, with absolutely no markup changes (again, due to having to run in the user's browser without touching actual SMF site code).

My 2c: try a range of responsive themes from the Theme Site here. They're free, and they're easy to install, so no worries. If you find one that pretty much does the business, but you want the eye candy tweaked, or a few bits and pieces moved around, someone will be able to sort that for you.

Ya need to read about the meta things, it seems it can help a lot, I would think the Beta version have this activated as they are going mobile which although is a little late, but better late then never I hope to see some awesume good usability themes for mobile in the future and when I take a deeper look around. And yea, zoom out making everything small does not work on the mobile - like this is not acceptable in our days anymore.

Sounds like the same thing I was doing to flarum, that you did - by using outside CSS to form how it looked and did the feminine side of things while not touching the masculine part of it.

Great, I'll do that and see if I can find something really likeable. Ahh, so the thing you made with CSS is something one needs to activated browser wise on the forum page itself?

Dearly Regards
- Darkijah

[Antechinus]

You can changed the Theme on this site??? I have yet to find the feature and still on the white :/ - still a newb trying to find my way around. Do they have your Theme installed by default or can one install it???

It works by running inside a browser add-on. Read the readme file (I knew people wouldn't read it ).

The code from either file can be dropped into a browser add-on, and run as an override for browsing on smf.org.

------------------------------------------------------
Recommended add-ons:
------------------------------------------------------

Stylus - Project home page: https://add0n.com/stylus.html
Stylus for Chrome (https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)
Stylus for Firefox (https://addons.mozilla.org/firefox/addon/styl-us/)
Stylus for Opera(https://addons.opera.com/extensions/details/stylus/): https://add0n.com/stylus.html

Stylem (for Pale Moon only): https://addons.palemoon.org/addon/stylem/

[JesusIsGodAlmighty.Life]

It works by running inside a browser add-on. Read the readme file (I knew people wouldn't read it ).

Actually had the file opened to have a quick look, just did not read it really. So much to do, so I gave up and looked to other things. Much to do. But yea, my bad by not reading it yet. Is there any way to change the theme standard on this forum by the way?

I'm running SeaMonkey, should work with some firefox stuff to make it work. Would be neat to try it out and get some beautyful darker look.

Dearly Regards
- Darkijah

[JesusIsGodAlmighty.Life]

I made a dark variant of the 2.1 theme, but will probably have to update it again when RC3 comes out.  http://lts4.byethost7.com/testsite7/index.php?theme=3

Looks very interesting as well, very nice!
Have to try that out as well for sure.
Something of that kind of nature I'm looking for.

I guess the curve theme you are talking about is the standard that goes with SMF - as far as I can gather.

- Dearly regards
Darkijah

[lurkalot]

I made a dark variant of the 2.1 theme, but will probably have to update it again when RC3 comes out.  http://lts4.byethost7.com/testsite7/index.php?theme=3

Looks very interesting as well, very nice!
Have to try that out as well for sure.
Something of that kind of nature I'm looking for.

I guess the curve theme you are talking about is the standard that goes with SMF - as far as I can gather.

- Dearly regards
Darkijah

Thanks. Yes it's the stock default theme that comes with SMF 2.1 with just some colour changes via css only. 

[JesusIsGodAlmighty.Life]

LOL Facebook has banned your link http://lts4.byethost7.com/testsite7/index.php?theme=3 *not sure what the nofollow is about in red - if that means others can't see the link?*

Sorry in Danish, but they pretty much did not accepting me sending the link to a friend on facebook...
Typical nonsense of foolishness of facebook which is only getting worse and worse which it has for years.

What do you have that is so terrible that Facebook would block you? Censorship everywhere on Facebook, terrible platform.

Apparently Facebook thinks the site is dangerous - like there normal ongoing insanity.

Dearly Regards
- Darkijah

[lurkalot]

LOL Facebook has banned your link http://lts4.byethost7.com/testsite7/index.php?theme=3 *not sure what the nofollow is about in red - if that means others can't see the link?*

Sorry in Danish, but they pretty much did not accepting me sending the link to a friend on facebook...
Typical nonsense of foolishness of facebook which is only getting worse and worse which it has for years.

What do you have that is so terrible that Facebook would block you? Censorship everywhere on Facebook, terrible platform.

Apparently Facebook thinks the site is dangerous - like there normal ongoing insanity.

Dearly Regards
- Darkijah

Yes I have that test site on a insecure server, that's probably why.  It doesn't have a cert installed so is running as http instead of https.

[Kindred]

I'm in the process of porting a dark (and responsive) 2.0.x theme look and feel to 2.1

https://test2.turtleshellprod.com

All done with CSS changes so far

[Antes]

Lunarfall requires some work to probably work with RC3+ I didn't touch that theme for some time. I suggest you to not test that theme unless you are sure that you can sync changes between Curve2 & Lunarfall itself.

[JesusIsGodAlmighty.Life]

lurkalot where do I find the down for you black theme? I kinda can't seem to find it - I might be blind and sleepy. Been awake for some time but trying to hang in there as long as I can. So I can flip my sleeping pattern around. Tend to break all the time into being awake in the night.

Dearly Regards
- Darkijah

[JesusIsGodAlmighty.Life]

I'm in the process of porting a dark (and responsive) 2.0.x theme look and feel to 2.1

https://test2.turtleshellprod.com

All done with CSS changes so far

I would personally bump up some of the colors in lightness a little for some of the text, hard for me to read some of it on my screen.

Lunarfall requires some work to probably work with RC3+ I didn't touch that theme for some time. I suggest you to not test that theme unless you are sure that you can sync changes between Curve2 & Lunarfall itself.

If I recall Lunarfall was one of my personally favorits that I found, although only 7-8 themes or so on my RC2 which I've dumped and installed 2.0.17 stable now. I found out that I could not update the RC for the stable, so... Not really a point for newbie me to go on further on the RC version.

So for now I'm testing 2.0.17 themes and for mobility. I'm learning at least. Anyway thanks for all the messages and time and info from you guys.

Unnecessary double posts merged - Iris.

[JesusIsGodAlmighty.Life]

Great I got it working on Chrome had both difficulty with Seamonkey and opera - but it as usual worked on spy program Google Chrome.
Although those 2 big up and down arrows at the left seems to be in the way and to big. Maybe put them down in the left corner for less of an interfering with things and a little smaller. Beside that, finally some softness on the eyes with the black, or very dark blue... I really don't notice the blueness, just looks more grey to me

In any case, I wondered how to get it in the standard theme as I could not find your words on it - but I guess maybe just copy paste it into the index. Not sure. So many many many files in the themes folders... And like this overlay of yours is like nearly 2000 lines.  That's a huge amount! Can't even keep my own website CSS in order and that is way smaller. Anyway, need to clean that up as well, still have a lot of messy things in that as I started out doing stupid and copied a huge amount of fixed CSS which was very very stupid.

Anyway thanks for the work on the themes, looks nice and most likely something that takes hours and hours and hours to make.