[WIP/Public beta] Apocalypse theme

[Gwenwyfar]

Oh, hadn't seen this topic before. Theme is looking pretty good. I specially liked the poster info and member list part 

Going to add JS for the scroll bars? I'm thinking of making a dark theme for my forum next too, and that is the only part I still need to look better into, they always look terrible on dark themes... FF refuses to let us style those bars and now when they finally decided to allow that they're stuck on trying to get someone to make that. Maybe in a few years...

Welcome to the dark side then 
:checked support is pretty decent, basically only ie8 doesn't support it as far as I know. And even for people that use IE, they should at least upgrade the browser, which they seem to be doing more each day

Didn't know display: none support was so bad, always thought of it as one of the most basic stuff (and it should be). Might reconsider using positioning to hide things on some exceptions (still don't like the idea though, sounds like an ugly hack for something that should be simple and well supported )

[Antechinus]

Can't see how it's much different. If you use display: none; or positioning to hide something, you're still going with a CSS solution that hides the markup you've already outputted to the browser. Both work. Positioning has a11y advantages for some situations. Display: none; is better for others. Fer instance, if converting your menu to icons on smaller screens it's best to not hide the text with display: none; because blind people can't see icons. The traditional way of dealing with things like that is a large negative text-indent. That way they can still read the text but nobody can see it.

Had thought about the scroll bars a bit. What I've been doing for non-styleable form elements is using opacity to knock the glare off on the dark background. 0.7, changing to 1 on hover or focus, works pretty well. Still visible (but you can go for the label anyway) and gives good visual indication of focus. Useless for scrollbars though.

And the other day I did find a way to style select options on hover in FF. Didn't like that eye-burning electric blue, so came up with the idea of using box-shadow, which seems to be the only thing that works. If applied with no blur radius and a vertical offset that matches the height of the select option, an inset box-shadow paints over the default FF blue and turns it any colour you want.

[Antechinus]

Just been looking at jQ plug-ins for styling scrollbars. These two seem to be the best of the bunch, AFAICT without thorough cross-platform testing: http://plugins.jquery.com/custom-scrollbar/ and http://baijs.nl/tinyscrollbar/.

Some of the others seem to have too many issues for general roll-out. I'd be wary of using a plug-in that caused problems with something as basic and important as scrollbars, and I'm not at all keen on going for masses of vendor-prefixed CSS either (in the case of Webkit). At the moment I'm inclined to just stick with the basic parent element opacity tweak for any in-theme scrollbars that are permanently displayed. That's bulletproof on any browser or OS, and requires very little code.

[Antechinus]

Threw in some extra custom help descriptions because I had been thinking that some people, especially those new to forum administration, might get a tad bamboozled by some of the custom functions. These are linked from the Admin > Theme Settings page, and only display to admins. They're basically tutorials on how to keep your arse out of the fire when using any of this theme's trickery. They may reduce the number of questions and problems, and can easily be extended if questions I hadn't thought of occur frequently.

Then that looked so good that I thought the standard SMF help page above it looked like pox by comparison, so I rationalised the styling there so it all matched.

Oh yeah and the main menu has icons permanently now. I decided I liked them after all, once I got them changed to something cooler than the first attempt.

[live627]

http://plugins.jquery.com/custom-scrollbar/ ended up in SMF 2.1 for the scroll bar in the alerts popup.

[Antechinus]

Ok, well I suppose if it's good enough to bork things in 2.1 Alpha, it's good enough to bork things in my theme. I might play with it, if I get time, when I get bored with playing with everything else in this monster.

Anyway, after thinking about the main menu on phones I figured what the hell, just use the same trick I already used on the responsive sidebar menu. So here it is on the main menu too. It kicks in on a 480, with anything bigger just getting the standard menu. 320 also gets a slight trim to drop menu width, and well as hidden overflow on the droppy links if they need it.

I think this is a better option than changing the menu to a row of nameless icons, which requires just as much CSS anyway and is likely to break to another line if extra buttons are installed.

[Gwenwyfar]

Yeah. It its more about how you're making it work than the final result, just makes more sense to me to use display: none, and how it looks when reading the code.

Hmm, I like that opacity trick, will try it as well I had already made many custom buttons but those are not always necessary or very convenient to make.

Those select boxes are so pesky. Maybe they just forgot to disable box-shadow, you can't even add padding on the darn thing 

What I've done with the help links (well, I did it for half the places, and break my head a little due to doing it at the beginning of my PHP learning, trying to put variables inside variables bracket things, still don't know what they're called) was to make them a hover and not a clickable link, that shows up some text. Probably doesn't work well for mobile, but then again, if you're trying to do admin's stuff and read the tooltips for that on the mobile version... Not really much loss in not working. Still need to finish it though, and maybe make a mod for it later, if someone hasn't already and I didn't see it 

[Antechinus]

Hey I just had a shocking realisation. I think this beast is just about ready for a public beta. I'll go over it later today after installing it on a vanilla 2.0.9, just to make sure. If nothing blows up, it'll be out on the kerb for a bit of tyre-kicking.

Laterz.

[busterone]

kewl, I look forward to this one myself. I have been watching with (im)patient  expectation.   

[margarett]

Kewl!

[Antechinus]

Ok, here it is: Apocalypse TK1.

Why TK1? See Settings.english.php:

Code Select Expand

<?php
// Version: 2.0; Settings

global $settings;

$txt['theme_thumbnail_href'] = $settings['images_url'] . '/thumbnail.png';

$txt['theme_description'] = '<span class="double_height largetext">Apocalypse TK1:</span><br />
Named "Apocalypse" because of its devastating effect on the 2.0.x front end codebase,<br />
namely the mass murdering of heaps of really gruesome zombie code, this version is TK1<br />
because it\'s not good enough for an RC yet, but it\'s good enough for some tyre kicking.<br />
Author: Antechinus';
?>

Ok, it works on vanilla 2.0.x. There are some caveats.

The first is that the page index styling is a bit broken, since I worked it out for my modified page index (to be packaged as a mod soon) and the CSS really needs a bit of tweaking to run with the default page index. It all works without generating errors, but at the moment the ... dots and the current page number are out of place. Nothing major, and I know about it already.

Second is that at the moment this theme has no RTL support, and has had minimal cross-browser testing. If you're using Gecko-based desktop it'll be smooth as silk, but right now I can't guarantee the same on any possible combo. For example, I expect some of the elements that use fixed positioning won't be so good on iPhone, and may need changing to absolute (which index.template.php allows for since it calls body id by browser).

Third caveat is mods. Portal sidebars will play havoc with the responsive breakpoints. The theme is best set to 90% without sidebars. Also, any mod that forces the loading of jQuery may conflict with this theme, requiring an edit to either the mod or to index.template.php.

Fourth is that it'll look like crap until you get a decent banner loaded, for which I make no apologies. This is the eye candy theme, so load some banners. I've attached a pack of banners that I have been using for testing the banner rotation, which incidentally is a great way to liven up your test site when you spend a lot of time coding the bugger. These are all cropped from stuff I got from http://www.socwall.com/.

The font for the forum name and site slogan on my test site is Fiolex Mephisto, which suits this theme well. It's a free one. Grab it here if you want it: http://www.dafont.com/fiolex-mephisto.font

Fifth caveat is a big one: if there is something you don't like about the looks of the theme, or any of its bits, I don't care. Really. I'm on a roll here and having a good time. I already have a mental map of what needs doing to clean up both CSS and eye candy. I will not be paying any attention whatsoever to suggestions about aesthetics. You are welcome to think it looks like crap, and say so, but it won't make any difference to how I proceed.



That's the heavy stuff done with. Now, what I am interested in is feedback on functionality, particularly on phones and tablets. I already know the thing is killer on desktop, and I know how it can be made more n00b-proof for general release. However, I never browse on phone or tablet myself. I'm old school like that, so try the thing out and see how it goes. I can change menus, etc very easily, and enjoy doing it, and the same goes for layout details on small screens. It's off to a good start. Now it needs testing. Go for it.

Note that at the moment the theme is set up to use Superclick menus, which should be best on touchscreen. If you want to try it with hover menus, you can comment out the call for Superclick and un-comment the call for Superfish in the head section of index.template.php. Either will work just fine. Both of these systems have click-outside-to-close, with Superclick staying open until closed, and Superfish closing either on outside click or after 1 second (or when you hover over another droppy). This click-to-close only works as far up as body children, not on the body tag itself. It was done this way for compatibility with iOS, which doesn't recognise body clicks.

Anyway, theme and banner pack there. V V V

Redundant attachment removed. See this post for latest version.

[busterone]

Nice. I am playing around with it already on my test site. So far I have just one question. I have no idea where to place the banners. The theme help explains the news box and banner rotation, but doesn't say where to put the banners to get rotation.  It may be obvious, but I don't see it.

never mind. It was obvious and I was overlooking it. Need more coffee. 

[Antechinus]

Bugger. And I thought I explained it clearly.

[Chalky]

I love this theme!!!!!

First off, Windows 7 HP with Firefox 34.0.5, the scrolling is very slow with almost a whole second delay between nudging the mouse wheel and the screen actually scrolling.  The theme's scroll buttons don't scroll it any faster, it's a bit of a waiting game.  I've checked it on Chrome and it scrolls normally there.

Now on my iPhone 6 4.7" running iOS8, there's some interesting stuff going on.  I really like the responsive menu that kicks in on portrait mode but as you can see (pic 1) the submenu items get a bit mushed up.  Down at the bottom of that page (pic 2) the "sign out" button covers the "unread posts since last visit".

Pic 3 shows the index page when the phone is rotated to landscape.  I don't know whether the banner is supposed to go tiny but I don't consider that an issue.  The menu looks good.  However, scolling down the index page (pic 4) you can see the on/off board buttons cover the text quite badly.

I am playing with this on my live forum so it will get normal use across my devices and I'll let you know how it goes.  It is a really wonderful theme 

[kat]

OO! It's Chalky!

[Antechinus]

Ok cool.

The Firefox scrolling thing sounds like yet another repeat of a bug that keeps cropping up in Firefox from time to time, this being that depending on the version it may or may not handle fixed content well. It's a really effing stupid thing to have cropping up, since they have known about it for literally years and by now it should be one of the first things they test. Releasing a browser that won't handle fixed content is just idiotic.

I don't have that version of FF installed but can get it to see what's up. I'm running Pale Moon 25.10 in the 64 bit version, which is based on Firefox, and my scrolling is fine.

Some interesting (Chinese style) stuff going on with the iPhone there. It's obvious that iStuff is breaking the Superclick menus, since there is no way all submenu content should be visible at the same time. That's interesting because Birch apparently did test them on iStuff, although he may have used different CSS to mine. It'll be fixable, but at the moment I'm not sure how.*

If iStuff these days has good built-in handling of pure CSS drops, it may be as simple as switching off Superclick on iStuff. You could try commenting out the Superclick function and seeing what happens (see Line 122 of index.template.php).

The banner going tiny on landscape is different. The forum name and site slogan should be absolute positioned, which means they shouldn't push anything around. It looks like one of them (can't tell which from the screenshot) is behaving as if it has static positioning. That'll be an easy fix anyway. I used fancy CSS to test the idea of throwing the site name and slogan on top of the main banner, so you could use them to make a custom site banner without any gfx skillz. That could easily be changed to scale them to any size and put them somewhere else, but it indicates that iStuff's handling of absolute may be a bit dodgey.

The board index icons thing is a simple breakpoint issue. Looks like the res on your phone would be 667 in normal pixels, given Retina's 2:1 density ratio, so that's just outside the 640 that I used for the break point. No problem. All you have to do is scoot down to Line 4317 of index.css and tweak the break point. Try 43 or 44 em and see which works. 43 seems to work on my desktop.

*Have another idea too.

[Antechinus]

Do'h. Haven't had coffee yet. The banner thing is simple. At that res the slogan isn't absolute. It's floated. It's a simple float clearing problem. Once I have coffee I can fix that one very easily.

ETA: Oh and I got my z-index stacking wrong on the menus and top bar. Will sort that too. Another easy one.

The bit at the bottom shouldn't be hard to fix either. Probably another float to clear or something. And you might want a bit of extra width on the menu buttons too.

More ETA: Actually since the fixed up/down buttons at the left seem to have the wrapper border bleeding through I might scoot them to the top bar on iPhone landscape. That way they wouldn't move between orientations on the same device, which is probably better.

I also notice the collapse.gif isn't displaying, which I may be because iStuff doesn't support gif (I know Android doesn't). I was going to change it to a png anyway, but had forgotten. OTOH that image may just have gone wonky when the theme zip was extracted. I'll post another copy of it in a minute. Or you can extract on desktop and then overwrite that image.

[busterone]

I made a few minor adjustments for my own preference on the test forum, then I took it live on the main site a little while ago. I absolutely love this theme.  I rarely use mobile either, so I am counting on a few of the members that do to check it out and report back.

[Antechinus]

Cool. If you want advice on the depths of the CSS dungeon, just ask. It can all be tweaked of course. It's basically built on the old Prince of Darkness, so it can even be tweaked to look exactly like the default 2.0.x theme (if anyone really wanted to) and it wouldn't even be all that difficult.

Are you getting any scrolling issues?

[Antechinus]

Here's the collapse/expand icons again, just in case anyone else gets corruption problems on extraction. These all just go in the main images folder.