News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[WIP/Public beta] Apocalypse theme

Started by Antechinus, June 25, 2014, 02:51:19 AM

Previous topic - Next topic

Antechinus

Ok, as threatened in other threads, here's the latest monster from my laboratory. :)




17/1/2015:

A beta version of this theme is available here: Apocalypse TK2.

Bugfix patches for that version can be found here:

TK2_patch_1

and here: TK2_patch_2

and here: TK2_patch_3.

Please ensure that you install all patches, in the correct order.




This was coded purely for my own enjoyment, with no regard for anyone else's. At the moment there is no online demo. The thing is running on my local host though, and all pictures show real, functioning code (no mockups). Since I coded a fair amount of front end stuff for SMF 2.1 Alpha and Elkarte Alpha, I'm applying some of the good bits to a 2.0x theme.

There is still more work to do, and it will probably be several weeks before the theme is up to a standard I would regard as ready for general release. This to-do stuff includes things like general code cleanup, finalising responsive CSS and RTL CSS, and deciding on the total range of features and variants.

Among other things, this theme is intended to be a demonstration of what you can do with CSS. What you see in the screenshots was all done on the same markup that I will be using for my "cleaned up 2.0.x default" templates. In other words, you can get the exact same look as the original 2.0.x default theme just by changing the CSS. No template hacking will be required.

This theme also uses almost no images. On the board index shots the only images visible are the avatar, the social media icons, the search icon in the search box, the upshrink icons, other small icons (on/off, info centre, etc) and the main banner.

The banner itself is a basic rectangular image. The curved framing around it is all done with CSS, as are the curved category headers, the drop menus, the top user bar, the carbon fibre body background pattern, user area in posts, memberlist, and just about anything else you can think of.

Naturally the banner will automatically scale with screen resolution, and is responsive right down to phone sizes. It is set via the default admin URL input, so no coding experience is required to change banners. The text on the banner is actually the default forum title and the default site slogan (used as a subtitle in the example shots), also set via admin input. These bits of text are repositioned so that they are part of the same banner link that fills the whole header. Clicking anywhere will redirect you to the home page.

Other features are:

1/ Comes with my infamous memberlist mod built in. This has been recoded to use cleaner markup and call more standard SMF classes, for ease of customisation (yes, I will be updating the mod too).

2/ Top user bar is fixed in position and can be accessed for anywhere on any page. Can be collapsed when not needed.

3/ Avatar in top bar is linked to your profile, and PM text is linked to your inbox (log in form shows up there for guests).

4/ Social media icons in the top bar, of course. These will be able to be enabled/disabled, and linked to your pages, from custom admin inputs.

5/ Oh and I threw in the centred menu. Same basic code as the old mod I made. Seems to suit this theme, and will stay centred regardless of screen width or number of buttons.

6/ Main menu still calls the standard array of buttons, but Profile and Messages buttons have been hidden via CSS. I thought they were unnecessary clutter, what with the top bar always being accessible. This can be easily changed, according to personal preference.

7/ Unread posts, unread replies, moderation notices and maintenance mode warning are now positioned below the main menu. This is both accessible and clean, which is a change.

8/ News fader has gone (it's a slow and jumpy old thing anyway). This theme only uses the random news lines. These are collapsible via standard SMF toggle.

9/ Recent posts is now above the board index instead of in the info centre. This is a more useful location, especially for guests. Again, this is easily collapsible.

10/ Go up and go down links are now fixed to the left side of the screen on any page, which to my mind is far more functional than the default SMF system.

11/ Ignore post javascript and markup has been recoded to add more swappable containers. This allows cleaning up the display of ignored posts so they are far less obtrusive.

12/ Custom highlighting for text in posts is enabled via CSS, which is a lot easier on the eyes when using a dark theme.

13/ User area has been recoded so that, in your own posts, instead of just seeing the basic link to your inbox that everybody else gets, you actually get notification of any new PM's.

14/ Quick reply icon has been integrated into a repositioned quickbuttons list, so it now looks and works just like the other buttons. Also, since it is between the Quote and Edit buttons, it should greatly reduce the chances of staff editing posts when they only meant to quote them (had that happen more than once).

15/ Oh and I added flyouts to the old sidebar menu, so they can now present the same content as the newer drop menu system.

16/ On the more techy side, body tag ID is set via browser, and body class is set via action or sub-action, to allow greater scope for theming and cross-browser support.

17/ The new.gif is not necessary. This theme it uses CSS to create the new posts icon. This just calls $txt['new'], meaning this aspect of the theme will support any language that SMF has language files for.

18/ And while I think of images, this theme comes with automatic scaling of images in posts, attachments and signatures, including scaling of avatars for any area.


I think that's about it for now (might have forgotten something). Anyway, it's a theme. There you go.

Pix follow. :)

margarett

Dang that looks good :)
* margarett is a fan of dark themes
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Antechinus

Yeah I like it too. It just sorta happened once I started messing around. Never intended to actually make a new theme. :D

ARG01

Excellent work    Antechinus.  ;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

kat

[party-pooper]

One of the biggest support requests, that we get, is "How do I change the logo?"

With this theme, I'd guess the response will be "****** you!"? ;)

Damned groovy theme, though, your Royal Antiness... :)

Bloc

Wow. :) You really come togheter to present an alternative theme. Me like. :D As mentioned to you elsewhere I like those CSS border effects, and the flyouts will be very interesting. Menus that are splitted up, also sounds like the way to go.

Other interesting and IMHO useful details:

  • Recent posts on top. Very interesting, so much I based a theme idea on it lol.
  • the move of unread/runread etc. notices to the menu. great idea, not sure if its used in Elkarte? But anyhoo
  • no more news fader. Also logical, as you I opted for the random news(though the fader in mine really can do both) , it just makes sense to allow themes to do what they like with it and random new is less "in yer face" too.
  • The move of quick-reply icon to the menu. This one I like, it seems always a bit in the way having that one inside the post.

Looking forward to see it in real action and I am sure there's an audience out there willing to try something new and fresh.(if not holding a gun to their headadmin-section might help :P )

Deaks

I see this theme and this song comes to mind:

https://www.youtube.com/watch?v=S88rkpPu8_g

Also looks quite similar to blocs earlier themes
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Antechinus

Yeah well I kinda liked some of Bloc's earlier themes (didn't we all). This one does have a slightly Helios feel to it in places, but being slightly reminiscent of ancient Blocness aint such a terrible thing. I like things lush and curvy. :D

I'm mostly just rebelling against the flat design craze, rather than trying to recapture anything else. Plus I just wanted to see what could be done with CSS, and once I started seeing it take shape I just had to keep going.

Anyway, have made some more progress. A couple of things needed sorting IMO, so I had a bit of a go at them. One is the way SMF handles attachments. Just having them stack down the page isn't so good, especially when there are a lot of thumbnails. Takes way too much height and wastes a lot of width.

So, I came up with a way of getting them to behave nicely. This is just minor markup tweaks to Display.template.php (basically, just put a div around each attachment) and suitable CSS to handle the looks.

The blocks are set wide enough to handle any reasonable file name and file details. This is better than letting them find their own width depending on content. It is much nicer to scan when they are regularly sized. The height is fluid but the trick here is to not use floats. Floats will make things get badly jumbled up when the block heights don't match.

What I did was use display: inline-block; and vertical-align: bottom; on the wrapper divs. This allows the file name and details to stay aligned along each row, while the images and thumbnails (if any) just make a suitable space above each row. I took some shots of the results, using a deliberately mixed up pile of attachments for maximum carnage. It behaves very well.

Another difference compared to the default SMF system is that although this still runs the same javascript, large images no longer open in a new window. This is because they never exceed the width of the available space. They are, like avatars and other images elsewhere in the theme, automatically scaled to fit via CSS.

If you do want to see a large image full size you can still open the link in a new tab, but 9 times out of 10 people will just want something that fits on their screen.

Colin

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Antechinus

Ok, so on to the next thing: the new-fangled footer sections that are all the rage these days.

As with most things, it's always a good idea to check out what other people have done before mutating it to suit yourself. Having done that, I think I've come up with a good solution that is also pretty light on code.

Obviously it needs some suitable markup added to the footer area, which in this case is simply another ul. I decided to markup up four <li> columns as I thought this was a reasonable maximum on desktop/tablet. These are not floated either, because floats aren't a good way of handling this bit. The <li>'s are set to display: table-cell; with no width declared. This means they just adjust their width to suit content, like regular table cells do.

The advantage here is that you are not bound to displaying a certain number of them. If one is not enabled the remaining ones just sort themselves out, without you having to do anything about it. It makes for a very flexible system.

Screenshots below show it in practice. This is just pasted code straight to the template at the moment, but will have admin textareas for the finished theme. If a textarea is empty, a PHP conditional will prevent the display of that column. If there is anything saved in the textarea, the corresponding column will automatically display (this is another good idea I nicked from that Norwegian bloke :D).

Regarding the input for the textareas, I had an idea which may make things easier for beginners, since typing up custom HTML is a bit of a nuisance. All they have to do is create a new topic (can be hidden and/or temporary) and use that to format the content via the standard SMF editors (either WYSIWYG or BBC). Once it is posted, a simple right click > view source will bring up the HTML output.

The post content itself will always be inside div class="inner", so a quick Edit>Find on the page for that will find it straight away. This div can then be copied in its entirety and pasted straight into the admin textarea for the relevant column. The footer CSS already has a small tweak added to strip some unwanted styles from div class="inner", so it will all work nicely. This includes fully functional presentation of standard quotes, and BBC lists, and auto scaling of images, since in terms of markup and CSS the forum just thinks it's another post. :)

The only stipulation here is that to maintain validation and prevent possible glitches, the post id has to be manually stripped from the div's opening tag, leaving just the class. That should be quite easy to handle, even for beginners, if a bit of a readme and a couple of demo shots are provided.

Bloc

Quote from: Antechinus on June 27, 2014, 02:49:33 AM
Yeah well I kinda liked some of Bloc's earlier themes (didn't we all). This one does have a slightly Helios feel to it in places, but being slightly reminiscent of ancient Blocness aint such a terrible thing. I like things lush and curvy. :D

I'm mostly just rebelling against the flat design craze, rather than trying to recapture anything else. Plus I just wanted to see what could be done with CSS, and once I started seeing it take shape I just had to keep going.

Anyway, have made some more progress. A couple of things needed sorting IMO, so I had a bit of a go at them. One is the way SMF handles attachments. Just having them stack down the page isn't so good, especially when there are a lot of thumbnails. Takes way too much height and wastes a lot of width.

So, I came up with a way of getting them to behave nicely. This is just minor markup tweaks to Display.template.php (basically, just put a div around each attachment) and suitable CSS to handle the looks.

The blocks are set wide enough to handle any reasonable file name and file details. This is better than letting them find their own width depending on content. It is much nicer to scan when they are regularly sized. The height is fluid but the trick here is to not use floats. Floats will make things get badly jumbled up when the block heights don't match.

What I did was use display: inline-block; and vertical-align: bottom; on the wrapper divs. This allows the file name and details to stay aligned along each row, while the images and thumbnails (if any) just make a suitable space above each row. I took some shots of the results, using a deliberately mixed up pile of attachments for maximum carnage. It behaves very well.

Another difference compared to the default SMF system is that although this still runs the same javascript, large images no longer open in a new window. This is because they never exceed the width of the available space. They are, like avatars and other images elsewhere in the theme, automatically scaled to fit via CSS.

If you do want to see a large image full size you can still open the link in a new tab, but 9 times out of 10 people will just want something that fits on their screen.
Very nice. I use floats for this - making the thumbs equal width etc. - but using display: inline-block is interesting, especially since you can still have the inline experience when seeing the large ones. And agreed, most times you just want to see the big image fill the available width. The original should be in a new windows anyway.

Bloc

Quote from: Antechinus on June 27, 2014, 03:19:15 AM
Ok, so on to the next thing: the new-fangled footer sections that are all the rage these days.

As with most things, it's always a good idea to check out what other people have done before mutating it to suit yourself. Having done that, I think I've come up with a good solution that is also pretty light on code.

Obviously it needs some suitable markup added to the footer area, which in this case is simply another ul. I decided to markup up four <li> columns as I thought this was a reasonable maximum on desktop/tablet. These are not floated either, because floats aren't a good way of handling this bit. The <li>'s are set to display: table-cell; with no width declared. This means they just adjust their width to suit content, like regular table cells do.

The advantage here is that you are not bound to displaying a certain number of them. If one is not enabled the remaining ones just sort themselves out, without you having to do anything about it. It makes for a very flexible system.

Screenshots below show it in practice. This is just pasted code straight to the template at the moment, but will have admin textareas for the finished theme. If a textarea is empty, a PHP conditional will prevent the display of that column. If there is anything saved in the textarea, the corresponding column will automatically display (this is another good idea I nicked from that Norwegian bloke :D).

Regarding the input for the textareas, I had an idea which may make things easier for beginners, since typing up custom HTML is a bit of a nuisance. All they have to do is create a new topic (can be hidden and/or temporary) and use that to format the content via the standard SMF editors (either WYSIWYG or BBC). Once it is posted, a simple right click > view source will bring up the HTML output.

The post content itself will always be inside div class="inner", so a quick Edit>Find on the page for that will find it straight away. This div can then be copied in its entirety and pasted straight into the admin textarea for the relevant column. The footer CSS already has a small tweak added to strip some unwanted styles from div class="inner", so it will all work nicely. This includes fully functional presentation of standard quotes, and BBC lists, and auto scaling of images, since in terms of markup and CSS the forum just thinks it's another post. :)

The only stipulation here is that to maintain validation and prevent possible glitches, the post id has to be manually stripped from the div's opening tag, leaving just the class. That should be quite easy to handle, even for beginners, if a bit of a readme and a couple of demo shots are provided.

We're onto almost portal/block territory here, I bet this will be very useful for those that don't care to add an actual portal mod. :P :) A theme can do lots of things, with little intrusion on the script elsewhere. :)

Antechinus

Quote from: Colby67 on June 27, 2014, 04:38:16 AMVery nice. I use floats for this - making the thumbs equal width etc. - but using display: inline-block is interesting, especially since you can still have the inline experience when seeing the large ones. And agreed, most times you just want to see the big image fill the available width. The original should be in a new windows anyway.

I tried floats first, of course, but the catch is they rely on all div heights being equal. This means they break layout badly if you have a mix of ordinary files (PHP, .txt, etc) and image thumbnails, unless you make all divs excessively high for ordinary files, or unless you create extra PHP to split images from other files (which I suppose would be feasible too). Even if you did split images from other files, you could still get layout problems when expanding a thumbnail on click. I just went for the easy, no-fuss option. Call me lazy. :D

BTW, this also has potential for multi column drop menus, among other things. Nice and stable even if section heights vary.

Antechinus

Oh BTW...

Quote from: Colby67 on June 25, 2014, 04:33:15 PM

  • the move of unread/runread etc. notices to the menu. great idea, not sure if its used in Elkarte? But anyhoo

No, this one isn't in Elk. It's something I just thought of the other day, but I wouldn't be surprised if the Elks nicked it. It seems to make sense. :D


Quote
  • The move of quick-reply icon to the menu. This one I like, it seems always a bit in the way having that one inside the post.

That one is in Elk. ;) I think it's in 2.1 Alpha too (can't remember offhand). I used the same trick here: absolute position the relevant onclick image and give it lotsa padding to cover the text, then hidden overflow on the <li> to keep things tidy. Scales with font size, since image padding is set in em, so fine for a11y. Easy to do, and effective.


QuoteLooking forward to see it in real action and I am sure there's an audience out there willing to try something new and fresh.(if not holding a gun to their headadmin-section might help :P )

If you want a look at any files give me a yell. Things are still in flux of course, but it's basically on target. I might see if the SP crew want to try it as an optional theme at SP.

CrimeS

Very nice colour composition. Love those dark with brown colours.

Good job.

kat


Bloc

Quote from: Antechinus on June 27, 2014, 04:50:33 AM
Quote from: Colby67 on June 27, 2014, 04:38:16 AMVery nice. I use floats for this - making the thumbs equal width etc. - but using display: inline-block is interesting, especially since you can still have the inline experience when seeing the large ones. And agreed, most times you just want to see the big image fill the available width. The original should be in a new windows anyway.

I tried floats first, of course, but the catch is they rely on all div heights being equal. This means they break layout badly if you have a mix of ordinary files (PHP, .txt, etc) and image thumbnails, unless you make all divs excessively high for ordinary files, or unless you create extra PHP to split images from other files (which I suppose would be feasible too). Even if you did split images from other files, you could still get layout problems when expanding a thumbnail on click. I just went for the easy, no-fuss option. Call me lazy. :D

BTW, this also has potential for multi column drop menus, among other things. Nice and stable even if section heights vary.
I tried splitting images/other files..that will make for easier layout design actually..but the PHP code needs to change of course.

TBH the attachment area always felt a bit rushed, just tacked on elements without any real care for it purpose(other than being..attached :P ). For example, using one attachment image n as a header..how many times you wished you could just use that above the post?

Sure, adding it in the post manually through a IMG tag..but its not the same, and you can't just upload a new one and it would sort it itself out. All it would take code-wise to get this was a value for each (first) post about what attachment to use for it. Upload a new  image, select that one in a select list and off you go...it could even REPLACE the topic icon, which sometimes feels totally unnecessary. I eman, if you want a "mood" to be set for a topic, why not make it a separate valueand give it some love? Now its mixed up with poll/mobile/attachment(!) icons and it just feels like a half-hearted..if I add a smiley as topic icon, and add a poll, what should be shown? the smiley..or the poll icon? 

Anyway, cheers to new thinking.

Carri

Looks interesting, retro in some respects, looks like some of the old 1.1 themes out there.  Glad it will have some new css bones things under the old hood.

Antechinus

Quote from: Colby67 on June 27, 2014, 05:19:54 AMI tried splitting images/other files..that will make for easier layout design actually..but the PHP code needs to change of course.

Yeah I'm thinking about that now. The PHP changes required would be pretty trivial. OTOH it would be a bit of a trade-off. If you are only posting a few attachments, having them all together makes sense since they will probably fit on one row on desktop. If you split them into two areas, it will take up more space in the gui as well as needing more code.

If you are posting two dozen attachments of various types, then splitting them would be an advantage. Horses for courses sort of thing.


QuoteTBH the attachment area always felt a bit rushed, just tacked on elements without any real care for it purpose(other than being..attached :P ). For example, using one attachment image n as a header..how many times you wished you could just use that above the post?

Sure, adding it in the post manually through a IMG tag..but its not the same, and you can't just upload a new one and it would sort it itself out.

Well apart from the instant sorting on upload thing, it pretty much is the same as far as this theme goes, because of the auto scaling of images. Making a full-width banner for a post, that scales to any res, is really simple. In fact it's harder to make it not scale, since that the CSS is set up to scale them. :)



Quote from: Carri on June 27, 2014, 06:34:11 AM
Looks interesting, retro in some respects, looks like some of the old 1.1 themes out there.  Glad it will have some new css bones things under the old hood.

Yeah you could argue it's retro in some respects, but the typography and other aspects of the presentation are more up to date. Bit of a blend, really.

The "CSS bones" are largely the same as bog standard 2.0.x. There's not an awful lot of difference. 2.0.x is actually very flexible, in general. It's just that to use the flexibility, you have to know how to use CSS for more things than just changing colours. It's very powerful if you know how to use it. If you don't, it's also very easy to blow things to pieces.

Antechinus

And now for something completely different. :D

I have been informed, by a staff member via PM, that there has been a moderation report about this topic. Apparently someone was under the mistaken impression that the bloke in the pink mouse suit, visible in an avatar in the screenshots, was holding his erection. No, I'm not kidding. This really was reported.

To clear things up, I have attached the original image that I made the avatar from. As you will be able to clearly see, the gentleman in question is not actually holding his genitals. I trust this will settle the matter satisfactorily. :)

Advertisement: