ShelfLife - [responsive][2.0.x][free]

[Bloc]

ShelfLife is a responsive SMF theme that do not use drop-down menus. They have been replaced with push-only drop-line menus, to make it easier for both touch and non-touch devices alike. Much of the CSS have been simplified and HTML5 / CSS3 have been used to full extent.

- Testet on IE11+, Chrome 40+, Safari 5.1+, Opera 31 and Firefox 40+ , note that earlier versions of the browsers may not render it 100% accurate.

[margarett]

Very, very nice

[Ken.]

Great theme Bloc! It's good to see you making new themes.   

I really like this ShelfLife theme, all the choices for bg, css, board icons, ect make it a very desirable theme. Currently it's running on my xampp, but you've inspired me to make a new online test bed to give it a run there.

[Ken.]

Picking up a few errors:

Code Select Expand

http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: boardicons1
File: C:/XAMPP/htdocs/Themes/default/emailInactiveUsers.template.php (set_settings sub template - eval?)
Line: 550
   
http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: module_boardindex_text
File: C:/XAMPP/htdocs/Themes/ShelfLife_100/Settings.template.php (settings sub template - eval?)
Line: 169

[Biology Forums]

This is gorgeous. I will see if it fits in my Homework Clinic website. The only thing I don't like is the linktree. Bloc, I think you should start using FontAwesome into your themes.

[Biology Forums]

Another question, Bloc:

Will this be easy to adapt to 2.1 when it becomes public?

[Bloc]

This is gorgeous. I will see if it fits in my Homework Clinic website. The only thing I don't like is the linktree. Bloc, I think you should start using FontAwesome into your themes.

Its using webfonts already: IcoMoon, where I have used their online editor to only include the glyps I need, and not the entire set. It also allows me to use several sources in the font, including Fontawesome.

Yeah, the linktree needs some work.

Another question, Bloc:

Will this be easy to adapt to 2.1 when it becomes public?

I am already working on a version for 2.1 beta, so it should be effortless to update the theme.

[Bloc]

Picking up a few errors:

Code Select Expand

http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: boardicons1
File: C:/XAMPP/htdocs/Themes/default/emailInactiveUsers.template.php (set_settings sub template - eval?)
Line: 550
   
http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: module_boardindex_text
File: C:/XAMPP/htdocs/Themes/ShelfLife_100/Settings.template.php (settings sub template - eval?)
Line: 169

Thanks, Ken. These errors should be gone in the next release.

[Biology Forums]

I didn't notice that you were using IcoMoon - very cool.

I can humbly say this is the best free theme available for SMF. Looking forward to testing and using it.

[Bloc]

I didn't notice that you were using IcoMoon - very cool.

I can humbly say this is the best free theme available for SMF. Looking forward to testing and using it.

Thank you.

[Bloc]

A bit late..but here is a run-down of features in ShelfLife, most of which resides in "current theme settings":

- HTML5 / CSS3 based
- collapsable forum categories(in addition to the normal collapsing this one only hides them. Saved for members)
- Preset board-icons for every board, new ones can be uploaded and will be auto-detected by the theme.(into "images/boardicons" on the format PNG)
- Responsive CSS. Forum width will only stretch to about 1200px. You cannot set the width, this is make sure it looks good in all devices.
- No dropdown menus, for the same reason as above.
- background preset images. Its possible to upload more on the format "backbg123.jpg" into "images/theme". Once it is it will be auto-detected.
- same for the top background, which can also be turned off. format is "topbg123.jpg" and goes in same folder.
- hide the header(with main menus) when inside admin/moderate screens.
- inside topics the extra info about the poster is shown when clicking the avatar
- Possible to include extra copyrights in an array(inside index.template.php, in the template_init function)
- index.css is using a more compact style for the styles, to easier to read.(minimized version will be supplied soon) 
- using IcoMoon webfont for many icons.
- Google webfont for catbg style.

[Bloc]

New release: v1.0.1

- several fixes and changes added.
- Support for SimplePortal added.*

*SimplePortal have two settings that were changed/removed to "current theme settings" instead, to make the responsive part easier. These are:

- left panel width and right panel width. You also have the option of making the theme
- full-width above 1200px, since the extra sidebars are added, and to totally
- hide panels when below 680px(assumed most mobile devices start). Otherwise the new width settings will make the panels go above and below the content.

- to download: https://github.com/Bloc67/ShelfLife/releases

[Biology Forums]

Hey Bloc, if I setup a right column portal, it will automatically go to the bottom using a mobile device?

[Bloc]

Yes, (I am still pondering if I should target more specifically) right now any device below 680px in width will see them go below.

My dilemma is that some mobiles have larger resolutions, so I might be forced to also test for pixel-density, which is generally higher on mobiles. Meaning a 5 inches mobile screen with 1200 pixels in width have a higher value for that, than 1200 pixels on 13 inches screen. The actual space is smaller, so sidepanels will make it look crowded and harder to read.The same resolution will make the 5 inches sharper in image quality, thats all.

Mind you, its only for SimplePortal, so far.

[lifeguard81]

Wow Bloc!

This theme is realy nice!

[busterone]

Very nice theme Bloc. 

[Antechinus]

Bloc, don't you dare start doing interesting things again. You might get me interested too.

[Bloc]

Hehe Its fun though, throwing everything around...I started with a total blank CSS file and the goal to rewrite a lot of templates. So currently I have a index.css which do NOT need admin.css/moderate.css(they are blank lol) and still just  42k.

Compare that to 2.0's default theme 56k + 9k for admin..or the 2.1 default staggering 76k + 13k for admin..and another 9k for the responsive part! Thats a total of 98k just for the CSS...over 2 times more than I have for ShelfLife. I still manage to get a complete theme just by using more classes and lot less id's.  AND i did not include any special CSS framework - which some seem to think lmao - but I did create a few classes to help with it. Inspired by frameworks, not including them, that keeps the sizes down.

Now, CSS alone isn't the whole story of course..I also try to use native js, small snippets instead of adding more plugins to the mountain of a library thats called JQuery(but in 2.1 I have no choice, which is another reason I am not the least thrilled to code for it), and I have started doing common parts..like my Common.template which renders boards(called from both Boardindex and Messageindex) and list topics(from Messageindex, unread and replies templates). These things make it easier to change alot faster and not have to worry about inconcistencies. Still have long way there though, I like more common things.

I also got rid of oh-so-unexessary double-up GenericMenu thing. i mean..dropdown or sidebar, who cares? One menu is enough, and re-using that on quickmenus and quickbuttons makes it lot less to keep tabs upon.

Admin part I did not add many "admin" styles at all..instead I changed slightly the already defined styles so thy are bit tighter in there. When you change for example titlebg it will reverberate to admin too..but font-size etc. will still be better suited for admin. Especially if you like to add a webfont and 56px in size on normal titlebars.

[Antechinus]

Sounds good. I might take a look at it over the weekend.

ETA: GPL? Isn't that incompatible with SMF's license? Why not something more liberal?

ETA2: Hmm. bwcell33 for a class name? Why not just call it attachment? Much clearer to anyone who wants to wade into the code. Tricksy little code names that don't obviously mean anything are one of my pet hates.

[Bloc]

GPL2 because I like people that re-use the code, to also offer it for free, not sell it. It should be compatible since it is a theme in the first place..but others may know more about that.

bwcell33..yeah, from the days of  "BlocWeb" themes I might change it to some better, but at least its quite unique names and only used for creating grids. So "grid" might be a better one.(unless/until some mod get the crazy idea to use that too ) ..or maybe just "gridcell". That might work.

I forgot to mention: the js I added are kept in theme.js. Some are inline in templates too but try to avoid it now, makes for better code if not inline.

[Antechinus]

Yeah I saw your list of cell codes after posting that. I can see the sense in the overall idea. I just like code naming to be as clear as possible right from the start. It make things easier on my brain.

TBH I'm also not keen on class names like "dark_notice" etc because they become meaningless as soon as someone changes the presentation. If somebody decides they want it light (like some bloke from Norway, for example) you suddenly have a class name which is just going to be confusing rather than helpfully descriptive. Same goes for things like floatleft and floatright, which I think were a mistake in 2.0.x.  I try to avoid things like that, and prefer to use a name that says what it does in essence, rather than how it happens to look at the time. I think this is a good overall principle to stick to.

Anyway it's certainly lean CSS. I can see what you're trying to do and generally I like it. I'm kinda curious how something with more extravagant use of CSS for styling would weigh in on the same basic codebase.

BTW, personal preference here but I think having the next/previous topic links directly beneath the page index is just plain evil gui layout. People will instinctively expect them to be next/previous pages, and TBH the lack of such links is one of the most primitive and annoying things about 2.0.x. It's also impossible to fix without a mod, AFAIK.

[Bloc]

Naming is one thing - naturally I made names that feel "right" to me, it might not be that for others. I think that it is the basic premise, that of not using too much specific names, that really is to learn from it. Complex styling, sure, but re-use the styles as much as possible, thats my motto. Theres a reason why Wordpress themes are so abundant, its only a very limited set of classes in the default theme(well, it was, not sure now) so those that want complex, can make that - but for others its easy to jump in. Never been that in SMF lol.

On another note, I'll really stepped out on my next theme..I doubt much CSS will be left ..or maybe not. But it certainly will break with my themes so far, and be kind of "out there".

[Kindred]

GPL is a pain in the butt and is - overall - one of the worst OS licenses out there, IMO...

I'm not sure about v2 -- I know that v3 has issues with compatibility though... even with BSD

the biggest problem with GPL is that it considers itself "viral" and almost anything it touches must also become GPL...

[Bloc]

Which for me is just fine. SMF is BSD, the theme is GPL2, any theme based on it or forked, will also need to be GPL2 or some equivalent. Don't see the problem here tbh.

[Antechinus]

On another note, I'll really stepped out on my next theme..I doubt much CSS will be left ..or maybe not. But it certainly will break with my themes so far, and be kind of "out there".

:popcorn:

[Ken.]

On another note, I'll really stepped out on my next theme..I doubt much CSS will be left ..or maybe not. But it certainly will break with my themes so far, and be kind of "out there".

:popcorn:

Butter! 

[stmaxx]

Naming is one thing - naturally I made names that feel "right" to me, it might not be that for others. I think that it is the basic premise, that of not using too much specific names, that really is to learn from it. Complex styling, sure, but re-use the styles as much as possible, thats my motto. Theres a reason why Wordpress themes are so abundant, its only a very limited set of classes in the default theme(well, it was, not sure now) so those that want complex, can make that - but for others its easy to jump in. Never been that in SMF lol.

On another note, I'll really stepped out on my next theme..I doubt much CSS will be left ..or maybe not. But it certainly will break with my themes so far, and be kind of "out there".

I myself agree with this, and not that Bloc needs a signature in his themes/work, but this tells me right off that this was done by one of best, if not the best. working with ones own style, is part of the art and purpose of doing! IMHO
re-using CSS and HTML code you make is also a good thing!

Maxx

[ilookpair]

Thanks!! i love this theme 

[GO LIVE]

Nice and clean, Love it

I noticed no updates since Aug 2015
Have the bugs been worked out?
Do you still plan to support SMF 2.1?

[Bloc]

No, for now I will not do any 2.1 themes. There are still things being worked at in the 2.1 beta and some of choices made for themes there is not something I encourage. Maybe in the future when 2.1 is stable.(and I have no choice than to use whats there lol)

Shelf-life for 2.0 have been dormant for some time, but I might re-visit it using the CSS in ModernStyle theme.

[whoey]

Nice work with this! Will there be any further updates with this theme?

I've installed it to have a play around as we are planning on moving away from the core theme + mobile theme + tapatalk we currently have to one responsive catchall theme.

Logo wouldn't change via theme settings even though it had the url (http://mysite.tld/logo.png) but overwriting the theme provided "shelflife" logo.png did it.

Seems to work with EZportal as well, but we are running a bunch of other mods I haven't added or checked yet.

[whoey]

noticed I was not getting avatars on posts in desktop mode except in profiles

Display.template.php line 255:

Code Select Expand

<span onclick="showExtra(\'avvy_extra'.$message['id'].'\');" class="roundavatar_full" style="cursor: pointer;"><img src="', $message['member']['avatar']['href'], '" alt="" /></span>';
theme default was

Code Select Expand

', $message['member']['avatar']['url'], ' which came up blank, where as

Code Select Expand

', $message['member']['avatar']['href'], ' works...

[whoey]

Also reply/quote buttons/links missing from all at once/one at a time PM modes, only have buttons for conversation mode.

[Bloc]

The PM bugs are corrected in the new version which has been added to the SMF themesite, awaiting approval.
A demo can be had at http://www.bjornhkristiansen.com/demo/index.php?demo=4

[whoey]

I've been modding and fixing/adding a number of things that are missing from the theme. Sadly I haven't been tracking most of it.

[Bloc]

Thats ok. We'll see what comes up when I will check it.

[Bloc]

The theme is now available at SMF theme site:
http://custom.simplemachines.org/themes/index.php?lemma=2852

[Ken.]

Got it! 

[whoey]

To start I'd like to say thanks for your hard work, the rest of this may sound like criticism, but it's actually meant as feedback to make this theme even better.

So installed the new posted v2.0.3 version on a test setup to compare with the (now heavily modified plus mods) v1.01 I was working with before.

I see you've put in dropdown menus now. While that might be an improved experience for desktops it really makes the mobile experience even more horrible. (just try navigating around the admin section, the menus squash up and are all on top of each other making it pointless to even try) Not that the old step by step menus system works well on a mobile device without a lot of @media styling overrides, actually that goes for a lot more than just the menus. A mobile menu would take this theme to a whole new level, after all responsiveness is the whole point of this theme is it not?

Another major thing for me is the missing alternating background in posts... IIRC it looks like most of the code is there, but it's just not being called up or rendered correctly. That would make it all much easier to read. On a mobile device it's really a mess as most of the time you end up with an avatar taking 1/3 of the screen width, and then the actual post is below a large 2/3 blank area, making for a lot of scrolling (and user complaints!). On my modified version I shrank avatars and put it all on the same row in two columns instead of the over under default.

Hope this is useful info and doesn't sound like a rant... I can appreciate what went into it so far...

[Bloc]

Its def. WIP so any errors have to be worked out. I'll look over the issues.

EDIT:the menu system used in Alpha centauri is what I aim to use in Shelflife, but it will be sometime before its ready. And true, the old style with dropline menu in ShelfLife wasn't  much bettter in this theme either, not for mobile use.