[2.0][bloctheme] ModernStyle v1.0.3

[Bloc]

ModernStyle is a theme for SMF 2.0 with simplified layout and colors, the CSS is rewritten and focus have been on making it suit both desktop/laptops and mobile devices.

features

• Responsive CSS
• Alternative layouts - blog|gallery|downloads(with more to come), selected on category level
• Google fonts for modern styling
• 3 variants - light, blue, dark
• Full-screen attachment preview(images), attachments sorted on images/non-images
• Selectable aspects of images(for consistency, only on gallery layout)
• Full width option, for portals. Specific optimizations for TinyPortal v1.1
• Option to simplify main menu (blog|gallery|downloads on main menu, the other parts under a "menu" item)

demo
SMF 2.0.x http://demos.bjornhkristiansen.com/index.php?theme=3
SMF 2.0.x + TP v1.1 http://demos.bjornhkristiansen.com/smf20tp/index.php?theme=3

download
http://demos.bjornhkristiansen.com/index.php?topic=3.0

screenshots


UPDATE:
v1.0.3
- now with download type added to layout types.

[Ken.]

It's looking great Bloc!
I'm looking forward to the download and loading it to my live site. 

[Bloc]

Should be good now - forgot guest permissions!

[JBlaze]

Awesome work, Bloc!

[Biology Forums]

Congratulations Bloc

[cee山]

Nice work Bloc Thanks for share

1Error : Gallery Topic :

Code Select Expand

<span class="floatleft" style="margin-right: 1em;">Topic Title</span>
< class="floatleft righttext">
<div>

[Bloc]

Yes, noticed it too, CeeMoo..that tag there should be <span class".... . Corrected for the next update.

Thanks for the feedback!

[radu81]

Very different from what we are used to see on a forum, nice work, congrats!
==edit ==
I just saw the integration with TP  congrats again

[Biology Forums]

This is one incredible looking theme.

[Antechinus]

TBH the looks don't interest me (very "modern" and "mobile-oriented" ) but the code behind it is interesting.

[Bloc]

TBH the looks don't interest me (very "modern" and "mobile-oriented" ) but the code behind it is interesting.

I know - its kinda boring seen one bit at a time, its the whole that really makes it worthwhile, probably. I am trying some new variants now, since the base is so simple it encourages variations.

What code parts do you find interesting?

[Antechinus]

The different layouts for different category types, along with the simplified markup and classes. Mind you I haven't actually looked at the code much yet, but I can see there's some good ideas in it. No doubt there are more that I haven't noticed yet.

I have thought of taking the codebase and seeing what I could do with custom styling, to see how versatile it is.

(I realise mobile-oriented is important these days, but since I never browse on a phone myself anything which is styled to be good on phones pretty much looks like a blank page on my 1920x1200)

[Biology Forums]

It doesn't have to be that way though

[Antechinus]

Hmm. Just grabbed TP 1.2 to have a look at how this thing runs with TP. So TP is still using a table for layout? Really? In 2016? Guys, guys, guys.

I had TP 0.9.8 running without tables years ago. Blocster, you need to get onto those crusty old portal templates next. All sorts of stuff you can do with those.

ETA: Strewth. It has inline styles for Africa, and markup in Sources. Welcome to 1990.

[lurkalot]

Hmm. Just grabbed TP 1.2 to have a look at how this thing runs with TP. So TP is still using a table for layout? Really? In 2016? Guys, guys, guys.

The next release of TP won't have tables. It's having a long overdue revamp in that department.

If you fancy helping us test it, give us a shout.

[Biology Forums]

I don't think there's anything wrong with tables.

[Kindred]

Tables should only be used for DATA that needs to appear in a tabular form. they should never be used for positioning/layout.
Not with a modern site.

[Bloc]

Tables should only be used for DATA that needs to appear in a tabular form. they should never be used for positioning/layout.
Not with a modern site.

True, tables should not be used for layout. But for a long time it was the most reliant layout tool across browsers. Now there are more solid CSS set of styles to choose from and for which even IE/Edge respects.

The real deal-breaker is whether you can set yourself apart from the need to support old browsers. I have no such needs lol.

Hmm. Just grabbed TP 1.2 to have a look at how this thing runs with TP. So TP is still using a table for layout? Really? In 2016? Guys, guys, guys.

I had TP 0.9.8 running without tables years ago. Blocster, you need to get onto those crusty old portal templates next. All sorts of stuff you can do with those.

ETA: Strewth. It has inline styles for Africa, and markup in Sources. Welcome to 1990.

In my defense I see so much more than *should* be done with TP, not just the css and templates that I guess that put me off a bit ....well, theres new forces at work now with the css/template part - like lurkalot describes. Looking promising too.

[Kindred]

oh, I agree -- tables used to be the best way to do nice layouts (which is why everyone used them)
and I agree that we should stop using them now...   people need to get a modern browser.

[Antechinus]

Hmm. Just grabbed TP 1.2 to have a look at how this thing runs with TP. So TP is still using a table for layout? Really? In 2016? Guys, guys, guys.

I had TP 0.9.8 running without tables years ago. Blocster, you need to get onto those crusty old portal templates next. All sorts of stuff you can do with those.

ETA: Strewth. It has inline styles for Africa, and markup in Sources. Welcome to 1990.

In my defense I see so much more than *should* be done with TP, not just the css and templates that I guess that put me off a bit ....

Serves you right for writing the code in the first place. Your sins coming back to haunt you and all that.

well, theres new forces at work now with the css/template part - like lurkalot describes. Looking promising too.

Cool.

[Antechinus]

The next release of TP won't have tables. It's having a long overdue revamp in that department.

Good move. Hey suggestion: move the markup for the panel upshrinks out of Sources and into one of the templates. Much more versatile for custom layouts.

Come to think of it, block upshrinks too. This was one of the advantages of the old 0.9.8 setup. I was able to make it touchscreen and phone friendly without needing to hack Sources, simply by adding some portal templates to custom themes and tweaking them.

[Bloc]

The next release of TP won't have tables. It's having a long overdue revamp in that department.

Good move. Hey suggestion: move the markup for the panel upshrinks out of Sources and into one of the templates. Much more versatile for custom layouts.

Come to think of it, block upshrinks too. This was one of the advantages of the old 0.9.8 setup. I was able to make it touchscreen and phone friendly without needing to hack Sources, simply by adding some portal templates to custom themes and tweaking them.

Actually..you can change the upshrinks for blocks and panels by changing the templates. It means replacing the calls and provide new js for the new calls, but look at my TP templates in ModernStyle for clues - if you like to try that.

[Antechinus]

Yeah I'm sure by rewriting enough stuff you could do that, but it'd still be handy if it had them in the templates to start with.

[Antes]

We don't need table elements anymore we can use CSS to handle it which also helps greatly with responsiveness. You can take a peek at ezPortal or PortaMX (GitHub version).

[Biology Forums]

I still don't see the problem with table layouts. They are as versatile as dividers in block form. Also, with pseudo elements, things can be hidden, rearranged, etc.

[Antechinus]

@Antes: we weren't talking about tables any more. And I'm well aware we don't need them.

I had TP 0.9.8 running without tables years ago.

@Shuban: no, tables are not as versatile. They're not too bad, but not as flexible as some other options. The other problem with them is that they are bad for people on screen readers, unless you are only using them for purely tabular data (ie: one item only per cell). Trying to sort out table-based layout for a gui on a screen reader can be a real PITA, because none of it makes sense that way.

[Biology Forums]

Fair enough... thanks for the input

[Bloc]

Using display: table/table-cell goes along way in providing a similar table-like experience as real rables - but with all the benefits of being able to change it when needed.

Although you can get even table cells to line up vertically by setting display: block on them. AFAIK they will be a bit unpredictable...and in any case, as Antechinus mentions, its not semantically correct for screen readers anyway.

[Antechinus]

Didn't know you could get td's to stack vertically that way. Hadn't ever thought of trying it. I can see it being "unpredictable".

I have used absolute positioning on them before, and that can be handy for some things. For example, I've used it to haul td's out of portal templates and stick them where I want them.

[Bloc]

It is..but proof of concept: http://jsfiddle.net/vczd5wox/1/

[Antechinus]

By the way, a little trick I thought of yesterday. Could be fun to use in a theme variant sometime.

http://www.elkarte.net/community/index.php?topic=3448.0

[Antechinus]

It is..but proof of concept: http://jsfiddle.net/vczd5wox/1/

Interesting. I'll play around with it later, just to see what disasters I can create.

[Bloc]

By the way, a little trick I thought of yesterday. Could be fun to use in a theme variant sometime.

http://www.elkarte.net/community/index.php?topic=3448.0

Yes, def. But would not the fixed top-padding limit things when you adjust the width of the browser? If the theme is fluid width of course.

[Bloc]

..to quite another point(as I am working with styling with the bbc_table styling in ModernStyle), would it be too sumptuous to make any first row in a table inside a post automatically "headers"?

I am styling all bbc_tables zebrastriped, and using "tr:nth-child(1) td" to style the very first row a typical header style instead. But if the table only has one row, I take it away again by using "tr: only-child", so the one-row table do not have any header styles. But I am unsure if forcing headers are wise - even if it looks very cool lol.

[Biology Forums]

Hey Bloc, you should offset the board anchor links by -50px or so on boardindex. On mobile, for example, clicking the anchor pushes you beyond the starting point due to the trailing header.

[Antechinus]

By the way, a little trick I thought of yesterday. Could be fun to use in a theme variant sometime.

http://www.elkarte.net/community/index.php?topic=3448.0

Yes, def. But would not the fixed top-padding limit things when you adjust the width of the browser? If the theme is fluid width of course.

So you can use media queries to change the padding.

..to quite another point(as I am working with styling with the bbc_table styling in ModernStyle), would it be too sumptuous to make any first row in a table inside a post automatically "headers"?

I am styling all bbc_tables zebrastriped, and using "tr:nth-child(1) td" to style the very first row a typical header style instead. But if the table only has one row, I take it away again by using "tr: only-child", so the one-row table do not have any header styles. But I am unsure if forcing headers are wise - even if it looks very cool lol.

Is it actually header content as such (albeit in a td rather than a th) or just standard cell data styled to look like a header? If the former, then sure. If it's just standard cell data then header styling seems a bit odd to me.

[Bloc]

Well, thats the thing..its not explicit header data, because afaik the bbc table  tag don't have a "header" part..or do they? So everything is normal data-cells. But by styling it such, it might encourage users to actually use the first td's for headers.

Maybe I should make it a theme setting whether it does this styling or not.

Hey Bloc, you should offset the board anchor links by -50px or so on boardindex. On mobile, for example, clicking the anchor pushes you beyond the starting point due to the trailing header.

Thanks, looking into it now.

[Antechinus]

Oh ok, I missed the bit where you said it was for the bbc tag. I was just thinking of general tables. I suppose you could always mod the tag to use th's as well, but that's probably overkill.

[Bloc]

Nah, I don't want to mod them. But I think I will add a theme-option for it, so people can choose. Normal BBC tables are not styled normally, but it would make a great change to actually have a nice styled table out of it. Attached is a screenshot.

[Biology Forums]

How often are tables used in posts though. I wouldn't invest energy into it, tbh.

[Bloc]

I know - but its already done lol.

Yes, how often..because when I wanted to use them in the past I found myself *not* using them since I had to provide any styling myself - the whole point of nicely formatted table was simply not there . At least this way you don't have to: just start using them, add data, done.

Same with bbc image tag, I added a max-width to it so that it never goes out of the post, unless other content push it of course.

[Antechinus]

You might consider adding a max-height too. Can be useful for keeping very tall and narrow images under control, occasionally. But good idea to add limits to the standard image tag.

[Bloc]

Modernstyle v1.0.4

- Fixed issue with missing span in gallery Display.template
- Added option to increase the height from top on large logos. Fixed using a custom logo.
- Themeblock for TP fixed.
- Added new variants: "grey", "haze" and "forest"
- Changes in styles for gallery/blog boards
- added missing(!) bbc quote/code styles.
- added bbc_img style with max-width to stop overflowing images
- added style to bbc_table for better table presentation
- Admin menu collapsed on default on mobile view
- category list hidden on mobile view
- added more media queries. Mobile devices get the 1-column/buttons-instead-of-links design, but if their width increase(like tablets) the grids still use multiple columns. Below a certain width on both mobile and desktop the columns collapse to 1 column.

Variants Demo
[grey] [haze] [forest]   [light] [dark]

Pictures


Update/Download
Download the ModernStyle104_20.zip from the link below and overwrite the files - or upload the files/zip for a new installation within admin / Themes & Settings.

http://demos.bjornhkristiansen.com/index.php?topic=3.0

[Kindred]

hmmm.....

When shrinking down to narrow, I notice that the menu goes form the minimal word menu to the full menu, but using icons...   and blog/gallery no longer have a spot in the menu.
Also, memberlist, personal messages and moderate all use an "M" icon instead of an image...   Logout uses an "L"

There is no "new post" option when I click the menu gallery or blog link.  Actually, most of the linktree seems to be missing as well

When I go to the gallery via the menu link, it shows a preview of the attachment...
When I click through the linktree to the same location - the preview does not show... it shows an image which reads "BLOG"

[Bloc]

Many of these are deliberate choices.

I am will check the pure errors, but right now its not my main focus. With a whopping 23 downloads of the theme its not exactly inspiring to spend more time on it. I guess people don't really have a need for it. Lesson to be learned here I guess...

[Biology Forums]

Give it time, Bloc.

[Antechinus]

Well, it's hidden in the Theme Previews board, not available on the Theme Site, so chances are hardly anyone will ever see it.

Anyway, the only reason for pigging around with SMF theme coding is because you feel like doing it.

[Biology Forums]

Sadly, also putting a price on things makes it more valuable in people's eyes

[Antechinus]

Damned right. I'd never use any of that poxy free software.

[Bloc]

You are probably right, both of you. But 3000 views here and 30-40 downloads on my site speaks for itself.

Oh well, it was the interest of working with SMF themes that led me to it so I guess I have myself to blame if time spent != interest showed. I *could* offer a watered-down version which the SMF themesite accepts - if only to see if any more interest is to be had then - but my growing suspicion is that this isn't actually about that either, its more than current SMF forum users/admins actually *prefer* its ageing looks and only choose SMF because of it. Making SMF more blog-like or social-media-like will probably alienate them even further...

I should probably do the opposite - make Curve-based, blocky and spreadsheet-like themes that existing SMF users are happy with lol. But wheres the fun in that...

[Antes]

You are hopeless Bloc. Those rules were here for a long time (maybe more than 6 years?), yet you come forward and think you gonna be treated differently. Comply with the rules or distribute your themes via another place.

[Bloc]

Quite right, Antes. Though it was a fun experience, but I guess all is now said and done.

Oh, and if you would be so kind as to delete this topic - or at least lock it - since those options are not available to me. Theres another preview topic of the same theme - please do the same to that.