[WIP/Public beta] Apocalypse theme

[Bloc]

I just received a PM from someone wanting to know when this theme will be finished. They even offered to pay for it.

Its always like that. Most times its a misunderstanding of the drive involved. Its def. not money, since you won't get rich by writing SMF software lol.

Ok, so if it gets released it will be free. No need to pay for it. However, the problem is that over the past half a century or so I have had other interests apart from coding, and after spending several years heavily immersed in SMF coding I am currently rather over it, and have rediscovered another interest that does not involve sitting on my arse in front of a computer. This other interest is currently taking all my focus, meaning no coding is being done.

Do tell more. On my end I am still heavily immersed, well, as far as I just change SMF the way I want lol....but also been loosing weight and taken an good interest in my own health and well-being. It seems to have given me an impetus to code, strangely enough. Something about harmony there I guess.

So, at the moment the answer to "When will this be finished?" is that standard SMF answer that drives people up the wall: "When it's ready".

In the meantime, if anyone wants to know how any aspect of it was coded, just go ahead and ask. It was always intended to be used as a sort of tutorial anyway, to show what was possible.

I think you created an expectation here - it happens lol - rather than just a tutorial.

[Antechinus]

Yeah if I get out and do other stuff for a while, it may get me inclined to code sometimes. We'll see.

[Antechinus]

So after getting out and doing other things for a while, I find myself feeling like doing a spot of coding. Nothing too strenuous or manic, but anyway. Dragged out this beast again to see what fleas were on it. Found plenty more. Have sprayed some already but thought of something else today.

I got thinking about the random news lines box. Since I have auto image scaling just about everywhere else, I figured it should be here too. With the way it's set up on this theme there's a good chance that someone might want to use it as a sort of slideshow (ie: "sort of" because it would swap images on page load, not continuously) so best if big images in it don't cause havoc on smaller screens.

Ok, so that was easy. Just added a bit of CSS for the relevant box. Then I made the mistake of taking a look in admin, where you create the news items. That was a pig's breakfast if you save an item with a big banner. Things go all sorts of ugly. So throw out some old stuff and throw in some new stuff. No more uglies. This means yet another template added to the theme, but what the heck. Anyway it's done now. See pic.

Have also knocked off the new sprite for the quickbuttons and quickmod icons. That now runs horizontally, with the icons as background on a pseudo element inside the anchor, so the icons will stay centered vertically next to the text if someone changes font size in their browser. Works a treat. Haz nicer icons too.

The other thing was the editor was looking a bit rough, so I had a crack at that. It's a fair bit better now. Mostly CSS tweaks, but also did a bit more mutation on GenericControls.template.php (it was already in the theme anyway) and obviously had to make some new icons for the buttons (including moving gif for the marquee button). The presentation for the buttons uses the existing ID's for each button to call the appropriate border-radius for each end of each button group. This is handy because it means anyone can set it up to look right with whatever buttons they have displayed, just by changing a couple of id's in the CSS if they need to.

The old divider gif has gone, being replaced by a span (with a class, of course) which can be styled any old way in the CSS file. BTW, the default smileys on this page use opacity trix to make them less eye-burning against the dark theme when you have a whole row of them. They're 0.7 by default, and change to 1 on hover.

Did a few other things but can't remember what they were offhand. The main thing holding it up now is getting the custom page index stuffz sorted into a kosher mod package, which is going to be a bit of a mongrel. I'll knock that off early in the new year.

[kat]

2.1 compatible?

[Antechinus]

No. Not yet anyway. I know what dev cycles are like. Give me something stable to work with, then I'll think about theming it.

[kat]

Wise man.

[Antechinus]

Just for the hell of it I threw in a responsive icon menu for nutters who use forums on phones. No idea why. Obviously this means you can also have icons with the button text on desktop if you like (although I prefer the cleaner look without them).

This is just sprited icons that I whipped up in PS for fun. Might change them. Not keen on Font Awesome myself, since I recall (from Elk dev cycle) it can break things if someone has a non-standard font-size set in their browser. The icons are sized at 32x32 but scaled to 16x16 on a standard display, which means they'll still look good on a high density display. Just in case anyone was wondering.

Pic down there V V V

[Night09]

Just for the hell of it I threw in a responsive icon menu for nutters who use forums on phones. No idea why. Obviously this means you can also have icons with the button text on desktop if you like (although I prefer the cleaner look without them).

It looks nice but I have one question, does it take into account screen rotation as a few things ive used on my phone(not much mind) works best if the phone is sideways.

[Antechinus]

Dunno. Wotcha mean? The media queries are taken off screen width, not orientation, so it shouldn't matter which way the phone is. If you have some specific cases I should be aware of feel free to mention them.

[Night09]

Should be fine then, I just know a few sites ive been on dont allow you to turn sideways for a wider view.

[Antechinus]

Ok, so I've been frolicking in my coding playground again. After grumbling about how I had no real motivation to write responsive CSS, I went ahead and did it anyway.

Seemed a bit silly not to, since I'd already written the markup that would do it. Was kinda fun once I got into it. It's mostly sorted now for a range of break points (1024, 800, 640, 480 and 320) but there's a little bit of cleaning up to do. I'm still not quite satisfied with the message index, for instance. It's basically there but needs some tweaking. Most pages are pretty damned good now, although some of the default tables (from GenericList.php and the main Calendar) just won't fit on smaller screens without horizontal scrolling. They're just going to stay like that since they're not accessed that often anyway, if you want to do it on a 320 screen you're just nuts and can suffer.

Range of pix attached. I did change the icons on the responsive main menu bar, since the first stab at it with more Fugue icons didn't really fit the theme. I found some other nice ones with a CC license, so after a bit of Photoshop styling they look like they'll do the trick.

Sidebar menu option (admin, profile, etc)  is now responsive too. It's normal above 800 screen width, then automatically switches to a concealed flyout/overlay with a button to toggle it. This works very well down to a 320 screen, and the bottom of the flyout is sorted so that even if the last link is a parent for a large second level, all links will still be visible. Quite honestly I'm inclined to think that set up this way, it may be a better option than the drop menu system.

I really am going to finish this thing, just for the hell of it. Really. Problem is that I'm a detail freak and tend to want to basically write a fork instead of just making a theme. You get that.

Anyway, pix. Throw fruit. Throw money. Throw skanky knickers. Whatever.

[tranhiep_116]

Beautiful theme 

[busterone]

For someone who haz no motivation to code, it is coming along great. 

[Antechinus]

Ok, so have done a bit more. I've decided I'm starting to have too much fun here and seriously need to draw a line in the sand on features, otherwise the thing might turn into a theme park thinly disguised as a theme.

Anywayz, I was looking at the recent posts above the categories, and thinking that it'd be very simple to make a setting to display them there, or back down in the info centre where some people might be used to them. Looked at it, and it doesn't need much in the way of CSS, so will probably do it.

This then led to thinking about repositioning the news. Since I'd already tweaked the news section to handle large images, in case anyone wanted to use it as a sort of ersatz slideshow, it occurred to me that a simple change in conditionals and markup in index.template.php, and an additional custom setting in Settings.template.php, would open up a whole new world of silly behaviour with the news.

Apart from the setting itself, which is a piece of cake but hasn't been done yet on local, the idea is already implemented. What it does is call the content of the random news lines, which is just bog standard SMF PHP that is already in the template anyway. This turns the news section into a banner switcher for the header, with a random banner change every time you change page. All you do is just stack up as many news items as you like, with each one being the direct URL for an image. Piece of cake.

I'll sort the settings and conditionals so there won't be any conflicts. If the banner switcher is on, standard news box will be off. If the standard news box is on, banner switcher will be off and the header will fall back to the default banner that's usually set on the theme settings page anyway.

Anyway moar pix.

[margarett]

Very nice

[kat]

mmm.... dark yumminess...

[Antechinus]

Tis yummy. I enjoy playing with it on local host.

Anyway, I decided yesterday was feature lock day. It had to happen. I've decided to keep this one as pure theme, without relying on any mods. TBH this is because I've put so much work into the theme that at the moment I cbf'd coding extra mods. That means going through the files and putting the page index templating and js back to something that will handle the default spew from Sources, which is not a big job.

The only other thing that could have caused problems was browser detection, but the default 2.0.x Load.php array does include $context for iPhone and iPad. These are likely to be the biggest problems due to poor support for fixed positioning. Hopefully, at worst they'll need the top user bar changed from fixed to absolute.

The lack of IE>8 detection in the standard array shouldn't matter. I'll remove all the IE-version-specific coding from my templates, so that when the array detects IE the browser will be fed code that agrees with recent IE versions anyway. We seem to have entered an era when the biggest PITA is not going to be IE.

Current to-do list looks like this:

Code Select Expand

1/ Revert page index generation, markup and javascript back to 2.0.x default.

2/ Fix theme to run from standard 2.0.x Load.php browser array.

3/ Maybe revamp some wrapper div id's to make more sense.

4/ Message index still needs minor tidying up.

5/ Ditto for moderation centre.

6/ Polls should be more responsive.

7/ News items page needs some markup rewritten.

8/ Custom settings for banner rotation trix.

9/ Add static news box when banner rotation enabled.

10/ Consider slideout/pushdown/icon/whatever menus for various places.

11/ WAI-ARIA roles for menus, etc, to improve a11y and annoy the Customize team.

12/ Eye candy for login forms, including "wall" for maintenance mode.

/* ----------------------------------------------- */

/* Minor stuff to fill in time while beta testing. */

1/ Sort out fallbacks for CSS3 gradients (flat colour only).

2/ Sort RTL CSS.

3/ Check all icons, and change as many gifs, as feasible, to png.

4/ Check for more instances of membergroup in templates, for custom classes.

9/ is one I decided on yesterday. Since the news items will be able to be mutated into a banner switcher, I'll add an extra textarea to the theme settings page. This will enable the display of a single, static news item/announcement in the normal news box if the default SMF news is being used to switch banners. This is easy to do, and seems like a handy backup, so I figured it was worth doing.

10/ is something I'll figure out when I get feedback from people who actually browse on real phones. I can adjust menus for various places if it makes the gui significantly more convenient to use.

11/ is something I'll do because it's easy for me, it's good practice, and people with disabilities do use phones for browsing in the real world. This will break validation, but not functionality or eye candy, since 2.0.x is marked up as Transitional and I have to keep that. I am not rewriting every template in 2.0.x to valid HTML5. The broken validation will annoy the Purple Peeps and give them something to grumble about, which will make them feel important and give the rest of us some giggles.

12/ is another one I decided on yesterday, after helping out with this support request. After thinking about it a bit, the login page for maintenance mode could easily be done as a "wall" in front of the entire forum and this seems to make sense. Same would happen if guest browsing was disabled on a private forum. Since the login form will then be the first thing people see, it could do with a bit more eye candy than it has by default. This is an eye candy kinda theme, after all. I'll also throw in another textarea in admin>theme settings to allow for a customised greeting on the login page. If the forum is going to be walled off, having a customised greeting would be a good thing, IMO.

Get that lot sorted and it should be a workable theme.

[Antechinus]

So then I got thinking about variants, as you do.

With most of this theme being CSS, and most of that being monochrome, doing some colour variants would be very easy. The only bits that would need changing are link colours, some headings, and a few borders. These can be handled by very few declarations, so the variant css files would only be a couple of kb each. That led me to another way of looking at handling variant css.

Usually you would include a call for the variant css files in the head section of index.template.php. However, if the variant css files are going to be tiny then it's arguably not worth making them separate. The time taken for the extra http request on every page load starts to look silly compared to the time to download the miniscule file.

The other way of doing it would be to include the variant css at the end of index.css, and use the variant call in <head> to set a class on the body tag, and possibly on some other parent tags further down the tree (just to make selectors for variants more efficient). This would mean you could have all the css lumped in together, and use the extra class in the declarations to change your colours when a variant was selected.

Advantages are fewer files and fewer http requests. Disadvantages are a bigger file initially (by about 6% in the case of this theme) and less efficient css selectors. I'm still not sure which way would be best if using tiny variants.

[Antechinus]

Ok, got all the news box/banner rotator shenanigans sorted. All running now with proper conditionals and theme strings for Africa.

I was a tad concerned about the custom stuff making sense to some people, so I had the idea of defining a custom class of settings for the Current Theme page. These are only called in this theme's Settings.template.php, so won't pop up and confuse anyone if they are using this theme while adminning another theme. In that case, they'll just see a standard settings page.

On this theme the custom class of setting is called "ant_blurb", and creates a new class of dt with the same name. This dt contains a strong tag with the class "blurb_heading" and a span with the class "blurb_text". I can then throw these into any settings list anywhere and style them right up.

Code Select Expand

foreach ($context['settings'] as $setting)
{
// Is this a separator?
if (empty($setting))
{
echo '
</dl>
<hr class="hrcolor" />
<dl class="settings ant_list">';
}

// A nicely formatted blurb?
elseif ($setting['type'] == 'ant_blurb')
{
echo '
<dt class="ant_blurb">';

if (isset($setting['blurb_heading']))
echo '
<strong class="blurb_heading">', $setting['blurb_heading'], '</strong>';

if (isset($setting['description']))
echo '
<span class="blurb_text">', $setting['description'], '</span>';

echo '
</dt>';
}

// A checkbox?
elseif ($setting['type'] == 'checkbox')
{
echo '
<dt>

The blurbs take up a bit too much space on small screens, so on 480 or less they drop to a couple of lines in height, with auto overflow and vertical resize. Pic attached of the page on desktop. Will get tiny screen shots later.

Also got the new responsive markup and css done for the news items page. Previews now stack underneath the textareas on small screens to keep it all more manageable. No pic of that. Forgot to get one before I turned the local host off. Pix of that some other time.

[Antechinus]

Meh. So woke up this morning, grabbed a coffee, and started contemplating stuff. Having the nifty new blurbs manually resizable on phone was a bit bodgey. I could see phone nutters not liking it. So, after grumbling the other day about non-semantic use of checkboxes to make pure CSS toggles I have now gone to the Dark Side. Yes, this may mean Fortytwo is smarter than I am.

I was a tad worried about support for dodgey old browsers, or dodgey new ones, but I figure it's only an explanatory blurb so it's not critical functionality. I found some workarounds to help with this. Apparently an empty onclick will sort out glitches on iStuff.

To get around problems that can occur in other browser/OS combos (ie: older Android) I didn't use display: none; to hide the checkbox. Instead, I used relative positioning on the parent dt and absolute positioning on the checkbox, with a negative z-index. This gets it nicely out of sight with minimal fuss.

The transition on click animates max-height, padding-top, and opacity on the blurb, much the same as the responsive sidebar menu I made earlier. The main difference is that these pure CSS toggles will not work in IE8, but I reckon I can live with that.

Pix show the Admin > Current Theme page (with nifty new semantix-buggering toggles) and the Admin > News page (with banner rotation enabled) on a 320 wide screen.