Tsunami [theme]

[Bloc]

Tsunami is a modern theme inspired by some recent projects I was working on, utilizing the idea of harnessing CSS grid for the many tabular or table-like templates in SMF(or SMF forks). My primary goal has been to create a working boilerplate for future themes. Its responsive (not only towards mobile devices, but also to a lesser degree wide-screens) and have many images replaced by typefonts or svg's.

Featurewise its not that much different than default...though for forum administrators there is a box in "current theme settings" where you can add your own modified styles. They will then carry over when the theme is updated.
Below is the status of current versions,  also shown inside current theme settings in the theme, giving you a visual update of the development.

Demo: https://bhksite.info
Github: https://github.com/blocthemes

Current versions

     

Further plans include:
- more common subtemplates
- same theme developed for SMF 2.1, ElkArte and possibly Wedge
- more custom user options
- removing more images in favor of svg/typefont
- color variations

Will post updates in this topic as they emerge.

[Bigguy]

Screenshots are very nice. Good work. I don't see a demo at the link though.

[d3vcho]

You should click the "SMF 2.0 FORUMS" link to see it.

[Biology Forums]

Will install tonight! Writing for reference only.

Thanks Bloc

[Bloc]

Spotted one mistake on my part: seems the version image inside the theme is a bit outdated Will be fixed in next minor version though.

...which beckons th question of having some sort of auto-updating of the theme...but afaik this isn't possible within SMF. You know, the way for example Wordpress updates their themes.

TIP: Anyone with a bit knowledge could use Git and pull straight from the github repo. Thats how I have the demo-site at bhksite.info setup. Does require access to the webserver of course but combined with adding your own changes in the CSS within the theme itself, you'll have a nice semi-automated updating system.

[Antechinus]

Looks interesting. I'll load it on local later.

[Bigguy]

You should click the "SMF 2.0 FORUMS" link to see it.

I see it now, very nice.

[Antechinus]

Well that's an interesting result. Installed the 2.0.x version on local. No CSS. Outputs straight HTML only.

ETA: Hmmm. Ok, initial problem was that the zip download from github (may its name be cursed forever) extracts with an extra folder, so the files are one level too far down to be functional as extracted.

So, shift said files one level up. Cool. Now it says "Unable to load the 'main_above' template.".

Will keep digging...

ETA again: Also, the theme_info.xml file has no content. Completely empty. Zero bytes of info. Then I notice that all PHP files are also zero bytes. No content. Empty. No wonder it doesn't work.

Something is badly wrong with the github download.

[Bloc]

Try using 7-zip. I can download it just fine and all files opens up as they should.

True, Github zipping does create a extra folder so you can't just use the downloaded zip and upload it, rather you must extract it and either upload as pure files/folder into Themes...or zip it up again one level less. But there so many benefits with using Github that I expect those who wants to use the theme, also can handle this.

[Antechinus]

Ah. Works now. Looks like going via 7zip is essential. Might pay to make a note of it.

(IOW, unzipping via SMF admin creates a stack of files with all zero byte counts, while unzipping via 7zip doesn't screw them).

[Biology Forums]

Not sure about everyone else, but these SVG blocks look incredible:



You always learn something new, I had no idea you could do that

[Antechinus]

Well they look like rectangles with text in them, which is not particularly incredible in itself. I'll agree they're a nifty bit of coding though.

[Bloc]

Ah. Works now. Looks like going via 7zip is essential. Might pay to make a note of it.

(IOW, unzipping via SMF admin creates a stack of files with all zero byte counts, while unzipping via 7zip doesn't screw them).

Strange. I wonder if that happens on SMF2.1..will check when I start on it.

Not sure about everyone else, but these SVG blocks look incredible:



You always learn something new, I had no idea you could do that

Yep. Out of necessity, because I needed some way of updating the showing of version number dynamically and whats better than a small text-based svg? Kind of surprised it worked myself actually hehe. Then again, using svg - and aslo actually writing them by hand - is a valueable learning exercise, at least for simpler things. It can include images too, but I found it hard to actually work inside a IMG tag(or in SMF a [ img ]). In HTML it works fine.

[gecitli]

very nice, especially your coding style is great.

[muffinabyss]

Looks really good on my iPhone SE (2.0 demo on your site). Probably the best theme I've seen for 2.1 so far too

[-Rock Lee-]

Oh pretty good indeed, great job @Bloc!


Regards!

[Antechinus]

I've had a bit of a play with the 2.0 version. I like the overall look and feel. Not really keen on the home page's large screen layout though (easy to customise anyway). Feels a bit chopped up to me. Sorts itself nicely on narrower screens though. Main menu handling is excellent on narrow screens. Not so keen on the drop styling on a large window (content tends to feel a bit lost, IMO). Also not keen on the current admin/profile/etc drops. Those are just awkward at the moment, IMHO.

Having the top level links switch to a footer bar when the screen narrows is an interesting idea, once you get your head around where they have suddenly vanished to, but I'm not sure if it's just clever or actually good. It's inconsistent with the submenus (meaning #adm_submenus items) but OTOH having it available all the time should be handy. The mixture of click for top level and hover for second and third levels doesn't feel right to me though. I'd be inclined to make it consistent all the way down (but then you know my feeling on click vs hover as we have been here before).

Oh, and IMO the quickbuttons still being in the (really dumb) 2.0 location should be changed to the (IMO much better) 2.1 location below the post content. It's better in terms of usability, and you're upending the whole thing anyway, so might as well make the UI consistent across both versions.

(And please kill all instances of that horrible ie6_header abomination I was forced to use at the time in 2.0.x templating. That was a sin for which I will never be forgiven.)

[Antechinus]

Hey question: in index.template.php you're using if($mobil) to switch menus, but it doesn't appear to be defined anywhere. How does that work?

[Biology Forums]

Of topic, I too use an is_mobile variable throughout my responsive theme, although I try to minimize it as much as possible. Is that how the big players do it too when making a responsive theme?

[Antechinus]

It's one way of doing it. What has me stumped at the moment is that he has the variable mentioned in two places in index.template.php:

Code Select Expand

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu($mobil = false)
{
global $context, $settings, $options, $scripturl, $txt;

if($mobil)

But, it's not mentioned anywhere else, so I can't see how it is defined so that it can be usable.