Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Theme Previews => Topic started by: Antechinus on June 25, 2014, 02:51:19 AM

Title: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on June 25, 2014, 02:51:19 AM
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 (http://www.simplemachines.org/community/index.php?topic=524324.msg3782814#msg3782814).

Bugfix patches for that version can be found here:

TK2_patch_1 (http://www.simplemachines.org/community/index.php?topic=524324.msg3782988#msg3782988)

and here: TK2_patch_2 (http://www.simplemachines.org/community/index.php?topic=524324.msg3783789#msg3783789)

and here: TK2_patch_3 (http://www.simplemachines.org/community/index.php?topic=524324.msg3784438#msg3784438).

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. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: margarett on June 25, 2014, 04:50:48 AM
Dang that looks good :)
/me is a fan of dark themes
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 25, 2014, 05:15:09 AM
Yeah I like it too. It just sorta happened once I started messing around. Never intended to actually make a new theme. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: ARG01 on June 25, 2014, 12:55:54 PM
Excellent work    Antechinus.  ;)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on June 25, 2014, 01:07:20 PM
[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... :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on June 25, 2014, 04:33:15 PM
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:

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 )
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Deaks on June 25, 2014, 05:45:41 PM
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
Title: Re: [Preview/WIP] Apocalypse theme
Post by: 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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Colin on June 27, 2014, 03:12:12 AM
Very nice!
Title: Re: [Preview/WIP] Apocalypse theme
Post by: 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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on June 27, 2014, 04:38:16 AM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on June 27, 2014, 04:41:28 AM
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. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: 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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 05:08:21 AM
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 (http://media.simplemachinesweb.com/smf/default/images/post/thumbup.gif)

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: CrimeS on June 27, 2014, 05:11:59 AM
Very nice colour composition. Love those dark with brown colours.

Good job.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on June 27, 2014, 05:14:53 AM
Quote from: Antechinus on June 27, 2014, 02:49:33 AMI'm mostly just rebelling against the flat design craze

WoOt! :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on June 27, 2014, 05:19:54 AM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: 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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 07:49:57 AM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 08:00:59 AM
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. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Dragooon on June 27, 2014, 08:35:34 AM
QuoteThere 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.
I WANT TO SEE!
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 08:59:35 AM
I'm only planning on doing responsive to usable stage, not to perfect on every obscure page stage. However, a lot of it is easy enough to sort.

I broke half of it after rewriting some of the classes and markup. :D  Some of the bits I had previously sorted still work. An example is the profile account settings page, which just required setting dt and dd elements to full width instead of floated, with a few tweaks to paddings, etc to make the spacings good for fingers. Still needs a bit of a clean up. This was just an early bash at it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: DasVON on June 27, 2014, 09:02:44 AM
Awesome Theme ... as always  8)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: live627 on June 27, 2014, 04:12:29 PM
Quotedt and dd elements
What is the reason for using those semantically incorrect elements within forms?
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Dragooon on June 27, 2014, 04:31:10 PM
Quote from: live627 on June 27, 2014, 04:12:29 PM
Quotedt and dd elements
What is the reason for using those semantically incorrect elements within forms?
They are definition lists, technically not semantically incorrect since a list can be of form inputs.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: live627 on June 27, 2014, 04:43:45 PM
Oh, I didn't know they could be used on forms. When  I first saw them in SMF eons ago in 2.0 C2, I thought they were replacements for tables to satisfy CSS purists.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 05:06:29 PM
Something I said about semantics the other day, in a PM. :D

QuoteRe the semantics: I thought of each category as a list of boards (with all the stuff each board entails). It may not be perfect semantics, but so much bollocks gets talked about semantics, and so much time wasted on it, that my 2c is if you can make some sort of reasonable argument for your choice it's probably about as good as anyone else's.

Another way of looking at it would be a definition list, with the dt as the category header and the dd's for the boards. I wouldn't argue if someone wanted to use that.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Dragooon on June 27, 2014, 05:12:44 PM
Boards is a list so you're right about that, it's not a tabular form of data as some people suggested in the past. Not sure if it fits definition lists but I guess you can make an argument for that.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 05:29:57 PM
The way I look at it, there are only two sorts of people who care about semantics. One is code junkies, who will argue about the finer points ad infinitum. The other is people who are not code junkies, and who just want to use the software, but happen to not be able to see and therefore need to rely on a screen reader.

IMO, the only group that really counts is the latter. They're who we do semantics for. As long as the result is a page that is easy for them to navigate, the job is done to a suitable level.

Sighted users, who aren't code junkies, don't give a rat's how you mark up a page. Makes absolutely no difference to them. Them just want it to work and to look pretty.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Dragooon on June 27, 2014, 05:33:51 PM
The reason I go for semantics is because it is almost always better and easier to write the templates once you have a definite structure for different kinds of elements. That's also the primary reason I choose to go with CSS frameworks like Bootstrap because I really suck at defining such structure :P.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 05:44:13 PM
Well yeah, but you're a code junkie. :D I am too, but I realise the semantics side of it has always been highly subjective. What matters is to get a decent result, and there is often more than one way of doing it. So, I probably can't be bothered telling someone they're doing it wrong if they have some sort of reasonable argument for their choice, and if the resulting page is navigable by users who already find navigation more difficult than we do. :)

Bootstrap? Never looked at it. I've only coded SMF stuff and some fairly simple sites, so have always just written my own CSS. Problem with frameworks is bloat. I'd rather just have the code I need, which isn't that hard to do for stuff like this.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 27, 2014, 08:35:36 PM
BTW, I now have the footer columns (http://www.simplemachines.org/community/index.php?topic=524324.msg3713408#msg3713408) running with proper admin inputs, PHP conditionals, and language strings. Works just fine. :)

ETA: Ditto for the social media icons. They also have custom language strings to do the title attribute on the link. This is just for better a11y, since the icons themselves are a sprited background image, and therefore useless for screen readers.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Neekiinh0 on June 28, 2014, 08:11:50 PM
Excelent theme!
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 29, 2014, 03:57:45 AM
This thing has got me thinking about mods, for nice finishing touches. I've just written and submitted a mod to add the "proper" working links for the admin/profile/PM top level tabs on the drop menu system. This is just a straight back port of the Sources code we threw into 2.1.

Yes, I know you can do this straight in the theme :D but that relies on having a theme which offers this functionality. The mod can work with any theme, because the only template edit specifically targets href="#" in two places in GenericMenu.template.php, and that href is going to be the same even in heavily modified templates, like the one I currently have for this theme (yup, have tested it on Apocalypse and default).

That got me thinking of one of my other favourite things: next page and previous page buttons on the page index. There is a mod for this already, but I'm not keen on the implementation, because all it does is tack on "Next" and "Prev" each end of the pages lists. Again, I'm basically going to backport early 2.1 code (with a couple of minor tweaks) which will add markup/classes, and therefore comprehensive styling hooks, for every element in the pages lists. This mod will probably baffle most people, because by default it wont appear to do much. However, it will allow themers almost unlimited styling options. That means the CSS can be built into custom themes for very little extra effort, and as soon as the mod is installed the pages lists will look really spiffy. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on June 30, 2014, 06:04:52 PM
Came up with another trick, regarding the old SMF javascript that calls stuff from the themes and mods sites.

This javascript is frankly horrible. The "theme of the moment" or "package of the moment" is often something way out of date, randomly dredged from the depths of the archives. Also, even for the latest themes and packages, which may be wanted, the way it works is still gruesome. If you open a link to read the summary, then close it, you jump to the bottom of the page. This is annoying.

Then there's the wait for the javascript to load from smf.org if you happen to have a slow connection that day, and you just want to get on with some administrating. All in all, it's  PITA and more trouble than it's worth.

There was an old grumbling thread about this back here (http://www.simplemachines.org/community/index.php?topic=473631.msg3319916#msg3319916), so since I'm so far up the spout with this monster anyway I decided to implement the required changes (this theme required a custom Themes.template.php anyway so...). The old javascript is now replaced with a simple and descriptive link, that goes straight to the Mod Site or Theme Site and calls up the list of the latest submissions.

Pix attached.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: shadow82x on July 01, 2014, 12:19:06 AM
Oh man...this is going to be a great theme. Can't wait to see it in action. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 01, 2014, 10:06:30 PM
Figured out a couple of tricks while doing this thing. Getting inputs and selects to line up in forms is a bit of a nuisance, as different browsers treat them differently (yay for effing web standards!).

After messing around a bit, I came up with a simple way of getting pixel perfect results in Webkit, Gecko and Trident running on a Windows box. Haven't tried it on Mac or Linux, but it will probably still work. The basics are this (no eye candy, just the minimum):

/* This is necessary as a separate declaration */
input, button, select, textarea {
font: 87.5%/150% "Segoe UI", Helvetica, "Liberation Sans", "Nimbus Sans L", Arial, sans-serif;
}
/* Cross-browser declarations for inputs, selects and buttons */
input, .input_text, button, select, select>option {
padding: 0 4px;
min-height: 1.8em;
max-height: 1.8em;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 1em;
vertical-align: bottom;
}


The way it works is this:

1/ Even though the body text sizing will be declared on the body tag, it still needs another declaration for form elements even if you are using the same size. I put it separate to the declaration for inputs and selects because I don't want to apply all the following stuff to textareas, and it saves having to declare font for textareas later. 

2/ You don't use any vertical padding. Horizontal padding can be anything you like, but the text tends to sort itself out better if vertical is 0.

3/ The max and min heights are set to something handy (doesn't matter too much, but should be in em rather than px, so IE can resize it to match the font size).

4/ You need to declare box-sizing as border-box for all elements and for all browsers, otherwise different browsers do different things with the various bits and it's a pig's breakfast.

5/ Needs the font-size declaration again too, set to 1em. If you don't have it, Webkit and Trident will do stupid things. Don't ask me why. Browsers are weird.

6/ You have to set vertical-align to top or bottom. This keeps them all lined up, even if you change font size in the browser settings. Using baseline or middle doesn't work, and I find bottom generally works better than top.

The only catch with having to set vertical-align to top or bottom is when you have a text label leading into the input, like with the message index template jump-to. The trick with sorting that is to set position: relative; on the form (or other container), and on the label, then set top to around 0.3em on the label. Example:

#message_index_jump_to {
position: relative;
}
#message_index_jump_to label {
position: relative;
top: 0.3em;
}


Pix attached. Starting from the top they show the perennial village idiot, IE, followed by that other idiot, Safari on Windows, then Chrome, then FF/Pale Moon at standard browser setting, then again with font scaled to 200%.

ETA: Oh and while I think of it, on dark themes like this one the selects, as well as radio buttons and checkboxes, tend to be eye-burningly bright against the dark background. What I've taken to doing is setting them to 0.7 opacity, changing to 1 on focus or hover. This works very well, IMO.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on July 02, 2014, 04:23:11 AM
The CSS works pretty good, thanks :) I have added it to UrbanLife too, and it behaves nicely it seems.

About the label problem..that could work, have to try. Right now I just applied same rule to labels, and made them display:block; to make them behave. Line-height was also needed. So far so good..but I bet there are spots where this breaks lol. :D


About the js for "theme of the moment: agreed, its not working effective at all. Why it was done this way have always puzzled me..maybe a way to show off js skills hehe. :) In any case: if its to be improved I would rather suggest it was used with a RSS feed instead, just a regular feed fetching routine with PHP(which doesn't delay everything like js does), and def. cached. Maybe even just forced update..so you had to press "update" to see the latest. If the date is logged when it was last fetched, one could simply add something like "there have 4 days since you last updated Theme of the moment - its bound to be new ones! Would you like to update now?"..you get the drift: not holding anything up and also entice admins a little when they DO want to check it out.

Another bonus of making it a RSS feed is that other systems/sites could also be fetching it. I did at one time a web crawler that took the actual theme site pages and grabbed the relevant info..but its not the best way to grab the items. I want to do something about this in UrbanLife theme too, and I want to show off SMF site themes..but a crawler is most likely the ONLY way at this time. Still, with forcing update rather than auto-update it could work.(and a bit of cache time of course)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 02, 2014, 09:49:43 AM
Yeah I tried setting labels to inline-block with the same height and line height as the selects, but they still went funny when the label was right next to the select. The relative positioning trick sorts them out pretty well.

And yes it would be good to entice admins to check out mods and themes, but for this exercise I just went with the basic links. It could still be spiced up a bit. Allcaps and a marquee would be classy touches. :D

Anyway I went ahead and threw in a tableless message index, since that will be far more responsive than the old table. It uses the same basic markup and CSS as the board index, with a few different class names and some extra tweaks for the different purpose. Still thinking of styling it up some more, but will let it percolate for a bit.

I'm getting rid of the 5,973 stupid old "participation icons", and just having the one to indicate topics you have already posted in. None of that daft "oh hai we haz my hot and sticky poll gif".

And if I ever meet the person who thought it was a good idea to generate << topic pages >> markup in the depths of Sources, I'll kick them in the nuts. Anyone who thinks markup should be generated in Sources should not be allowed near a code editor. :P

I may have a crack at rewriting that to generate stuff in the template where it belongs. Should be possible to call the same basics from the db and go from there.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on July 02, 2014, 02:34:39 PM
Haha, yes I hear you :) I noticed the comments about that particular item in the template files for SMF 2.1 both now and earlier :D

In SMF2.0 I simply changed all $context['page_index'] to calling it in a PHP function: this small function located in index.template removes the uneeded stuff and puts proper CSS on the page links. Thus its dead easy to style them as you want. A little challenge because of the hardcoded markup but it works(I have to change all templates because of it..but I was doing that anyway).

Correct me if I am wrong, but SMF 2.1(or was it Elkarte) made those pagelinks into a theme specific theme setting, right? But why? Isn't it enough to just add a list + container , possibly spans around each...and then leave it up to the theme? It seems a bit far fetched to let the theme also render markup. Not that I complain haha, but a bit over the top perhaps. In any case its better than the SMF 2.0 way.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Dhayzon on July 02, 2014, 03:42:18 PM
awesome  very nice ;)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 02, 2014, 06:17:19 PM
Quote from: Colby67 on July 02, 2014, 02:34:39 PM
Haha, yes I hear you :) I noticed the comments about that particular item in the template files for SMF 2.1 both now and earlier :D

In SMF2.0 I simply changed all $context['page_index'] to calling it in a PHP function: this small function located in index.template removes the uneeded stuff and puts proper CSS on the page links. Thus its dead easy to style them as you want. A little challenge because of the hardcoded markup but it works(I have to change all templates because of it..but I was doing that anyway).

Yup, that's the sort of thing I was thinking of. Either that or I just write a mod. I'm also revamping all the templates anyway.

QuoteCorrect me if I am wrong, but SMF 2.1(or was it Elkarte) made those pagelinks into a theme specific theme setting, right? But why? Isn't it enough to just add a list + container , possibly spans around each...and then leave it up to the theme? It seems a bit far fetched to let the theme also render markup. Not that I complain haha, but a bit over the top perhaps. In any case its better than the SMF 2.0 way.

TBH I don't really know why them back end types did it the way they did for 2.1/Elk. All I know is I was grumbling about insufficient styling hooks, so went ahead and threw spans into Subs on the principle that I didn't care how it was done as long as people could style the result. The other dudes made it more complicated and moved some of it to index.template.php. I could still style it, so didn't care. :D

I was thinking about this last night though. Really it should be a list rather than just a succession of anchors, although I can live with just anchors. The current spans inside the anchors for some of the kinks aren't so crash hot though. It would be better to simply assign extra classes to those anchors. This is more flexible, and is cleaner markup. That would require rewriting the sprintf stuff slightly, but shouldn't be that big a deal.

ETA: Needs another variable called in the classes section, like this:

$base_link = '<a class="navPages%lolcatz" href="' . ($flexible_start ? $base_url : strtr($base_url, array('%' => '%%')) . ';start=%d') . '">%s</a> ';

Where teh lolcatz would be a space followed by nextprev (or whatever, if required for that link) and the actual "Previous page" text would be where it is now. At the moment all of this stuff just shoves it in where %s is in the base link:

// Show 'Prev'
if ($start >= $num_per_page)
$pageindex .= sprintf($base_link, $start - $num_per_page, '<span class="nextprev">'. $txt['previous_page']. '</span>');


So it would still want:

// Show 'Prev'
if ($start >= $num_per_page)
$pageindex .= sprintf($base_link, $start - $num_per_page, $txt['previous_page']);


Needs something else to sprintf the lolcatz into the right place.  Now with my skillz being mostly limited to front end stuffz, I might have to trundle over to Coding Discussion and start me a thread. :)

Oh and come to think of it, I'd also change the base link to add li's, and use an li wrapper around an anchor that had no href set for the expansion-onclick dots and the current page. That would be easiest for styling.

$base_link = '<li><a class="navPages" href="' . ($flexible_start ? $base_url : strtr($base_url, array('%' => '%%')) . ';start=%d') . '">%s</a></li>';

And:

// Show the ... after the first page.  (1 >...< 6 7 [8] 9 10 ... 15)
if ($start > $num_per_page * ($PageContiguous + 1))
$pageindex .= '<li><a class="navPages pages_dots"> ... </a></li>';

// Show the pages before the current one. (1 ... >6 7< [8] 9 10 ... 15)
for ($nCont = $PageContiguous; $nCont >= 1; $nCont--)
if ($start >= $num_per_page * $nCont)
{
$tmpStart = $start - $num_per_page * $nCont;
$pageindex.= sprintf($base_link, $tmpStart, $tmpStart / $num_per_page + 1);
}

// Show the current page. (1 ... 6 7 >[8]< 9 10 ... 15)
if (!$start_invalid)
$pageindex .= '<li><a class="navPages current_page">' . ($start / $num_per_page + 1) . '</a></li>';
else
$pageindex .= sprintf($base_link, $start, $start / $num_per_page + 1);


Then the templates would have:

<div class="pagesection">
<ul class="pagelinks"><li class="stupid_bloat_for_teh_extra_uglies">', $txt['pages'], '</li>', $context['page_index'], '</div>
</div>


Which would mean you could easily hide the extra text crap if you were thinking everyone would know it was a frigging page navigation list. :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 03, 2014, 10:23:06 PM
Been playing with the message index some more, just trying things out.

I've added an extra conditional to the div that holds all the last post and quick moderation stuff, to assign an extra class if either the checkboxes or icons are enabled (different class for each). This lets me get away with floating everything in there, for maximum layout flexibility, without it getting borked by the different quickmod modes (0, 1 or 2).

The icons for quickmod mode = 2 have been given a visible border and a bit of padding and margin, which should make things a bit easier to use (especially on touchscreen).

I've also done a bit of tweaking to make the notifications of unapproved topics and posts more consistent across templates and cleaner in looks. The warning icon is now set as a background image on the message index notice (upper right of the "table") and also on the topic title link. This gets stuff out of the markup and into the CSS, where it's easy to handle if you want to change it.

The board index uses the same image, inline this time, to do the notification of and link to unapproved posts/topics. This means all templates now use the same thingy to do the same job, which should be good. :)

The other thing is that I'm playing with using pseudo elements to do the last post link "icons", and am rather liking this treatment of them. A11y is no problem since the link itself still has a title attribute on it, meaning it's fine for screen readers even though the pseudos are not shown in the markup.

Topic icons and quickmod icons are still WIP and currently crap. :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 04, 2014, 09:10:22 PM
Done a bit more. I'm starting to ask myself where I stop with this. Will probably have to draw a line soon. :D

Quickmod icons are now using a sprite. I'm thinking I'll amalgamate this sprite with the one for the quickbuttons. It seems silly to have two sprites when one would do both jobs.

The other thing is that IMO the quickbuttons one needs revamping anyway. At the moment the icons go out of whack with the text if someone is using a non-standard text size in their browser settings. If the quickbuttons are changed to show the icons on a :before pseudo element instead of directly on the anchor, that pseudo can be defined to 20px wide and the same line-height as the text. If the new sprite runs horizontally instead of vertically it can have the y-axis positioning set to 50%, which means it will always stay lined up perfectly with the text. This is easy to do, so might as well do it.

I'm also thinking these pseudos should probably be given their own class. That could then be re-used all over the place, on either pseudos or spans or whatever, to sprite up a lot more icons easily. Haven't fully thought this through yet, but I think it has potential. Advantage is fewer http requests, with faster initial caching and rendering. Disadvantage is more CSS, and slightly more difficult to n00bz to change individual icons.

CSS is getting up a bit already but still comes in at 56kb minified, which is the same as the default 2.0.x unminified file. I'm going to try and hold it at that level. It's only that high due to the somewhat extravagant use of CSS in this theme. If emulating the default theme look on the same markup, the CSS would be a fair bit leaner.

Anyway, table-less topic index is now on unread posts and new replies templates too, and has been tweaked a bit more for styling. I'm kinda over bold text for sticky titles. I find it looks pretty crude at standard body text size, so have gone with a slightly larger font size for sticky titles. This looks a lot better to me, adding emphasis without looking clunky. Topic sorting options have been changed to comma-separated lowercase for the same reason: it's just easier on the eyes than the old way (also happens to fit better on a phone).

Topic titles are now in an h4 too, for better a11y (screen readers users tend to do a lot of navigation by h* tags).
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on July 04, 2014, 11:02:59 PM
I love it already!  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on July 05, 2014, 04:43:34 AM
When it wants testin', shove a copy my way. If anyone can break it... ;)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on July 05, 2014, 10:47:54 AM
LOL, I second that. When you are ready, I am game as well.   ;D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 07, 2014, 06:57:46 PM
Just a bit of a warning here. This is based on me wanting a clean foundation for future custom theming, which means I have been going through 2.0.x fixing all the stuff that bugs me about it. This theme currently has 25 customised templates (half the default theme total) because I couldn't could get the result I wanted with less than that. Quite apart from anything else, you can't get 2.0.x responsive without rewriting some templates, unless you just rely on hiding stuff all the time and call that "responsive".

This will still preserve a fair degree of mod compatibility, but it will break some of them. Personally, I don't care. I can easily write custom xml or whatever for any mod I think is worth installing, and (within reason) may be prepared to help other people out with it.

It will also rely my forthcoming page index being installed. Wont work without it. I am not going to attempt to write installation instructions for multiple themes for that one, so this theme is built with the new markup, and will need the appropriate Sources and script.js changes to function properly. This shouldn't be a problem for most people, since it wont conflict with anything except other mods which change the page index, and those can be removed if someone wants to use this theme. The advantages will be better a11y and almost unlimited styling potential.

Will probably also rely on the browser detection mod, although I'll see how that goes. If it's possible to do a good job without it, I will. The current main concerns are fixed positioned elements in iOS, which is pathetically bad at handling fixed positioning (for some reason, Apple's wonderfully innovative people seem to struggle with basic CSS2) and also the perennial IE stupidity (by default, 2.0.x doesn't realise there have been any IE releases after 8, and still tries to deal with 4).

Since some people may flip out at the prospect of a theme that replaces half the default templates (even though they will all be coded to release package standards, and quite suitable as direct replacements) I may also pull out some of the features of this beast and whip them up as individual mods.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on July 08, 2014, 09:02:06 AM
Noted. :)

TBH I am bit concerned personally about making these kind of theme projects, it seems as when I am working through templates there are so many optimizations that could be made to Sources files simultaneously...almost to the point of scratching it as a theme, and rather put it into a forked version of SMF. I just don't know, as I already been down that fork(ed) road.. :P

But thumbs up for sticking with your theme(project). :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: ARG01 on July 08, 2014, 09:47:44 AM
Quote from: Colby67 on July 08, 2014, 09:02:06 AM
Noted. :)

TBH I am bit concerned personally about making these kind of theme projects, it seems as when I am working through templates there are so many optimizations that could be made to Sources files simultaneously...almost to the point of scratching it as a theme,...

I understand this completely. Unless it's a complete custom job for a paying customer with specific desires, I have learned to keep things (as far as SMF functions go) as close to default as possible. This helps in the long run when it comes down to users desiring custom mod use and keeps support down to a minimum.

However, I do applaud what Antechinus is doing here. Very impressive.  ;)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 08, 2014, 05:42:18 PM
Oh I quite understand all of that, and yes it certainly is tempting to rewrite larger chunks of Sources too. The thing is that I don't particularly like the default SMF interface. Never have. There are so many details (I'm into detail) that could easily be changed for something that IMO is better. As I said, I don't give a rat's about mod compatibility since I can sort that anyway. What I do give a rat's about is getting a result that doesn't leave me feeling that I've wasted my time.

If I want to do something totally n00b-proof I can do that easily enough. However, I find that boring, restrictive, and unsatisfying in terms of what it can deliver. Since I'm doing this for my own pleasure, I am not inclined to turn it into something that is boring, restrictive, and unsatisfying. As a themer, I am constantly getting pissed off by wanting to do things that should be simple, but are made difficult by the default state of SMF. What I'm aiming for is something that should be mostly n00b-proof, and in some ways easier for them to handle than default 2.0.x*, but making enough breaks with default 2.0.x theme to deliver what I think it should deliver.

Once it's sorted, anyone who is freaked out by the entire thing can pull it apart and nick whatever bits they think are useful. If you just want to use the Display.template.php and the bits of CSS for that, you can. Plus, it has already made me write code for several mods that other people may find useful, and which I can easily package up (the attachments handling is one obvious example). So, it should still be a useful resource even for people who just want to play with their own stuff, and it will provide me with a solid basis for doing whatever the hell I like.

*Example: the default CSS contains declarations for things which aren't even in 2.0.x. They are leftovers from beta and RC1 and all they do in the 2.0.x index.css is break things up and confuse people. Then there's the way the same thing is often declared in different places throughout the file, which makes customisation and debugging harder. Not to mention the excessive specificity of many declarations, and often the excessive markup tied to them, both of which are bad for performance and a PITA for customisation. Only the other day I showed a bloke how to rewrite the standard .buttonlist declarations to make them far easier to customise by making them less specific.

I've also managed to eliminate some unnecessary classes and markup, which makes things easier because the same classes are now used in areas that previously required specific handling. The buttons in the moderation centre reports are now just the standard quickbuttons class, meaning no extra css is required for them. They'll just look good without any effort.

This sort of thing should be done if you want a n00b-friendly result, and will actually reduce support problems. So, not everything I'm doing is a case of "F@$k teh n00bz, I is l33t!". Quite the opposite.

Here's the beginning of the index.css file. This stuff is before any of the actual code. Everything is clearly laid out.

/* Apocalypse Theme - General Presentation */
/* --------------------------------------- */
/* This file is divided into sections, searchable via your code editor */
/* Highlight the name of the section in the list below, then search */

/* @TOP Brings you back here.
/* @BASIC HTML and body tag declarations, some other basics.
/* @LINKS Specific classes and ID's for links (up/down/skipnav, etc).
/* @FORMS Form elements - textareas, inputs, selects.
/* @HEADERS Generic header bars, used in many areas.
/* @GENERAL Common classes. Colours, divs, text classes, etc.

/* @BBC Everything from quotes to colour tags, for use in posts.
/* @AJAX Notification for quick edit (top of screen, says LOADING..).
/* @LISTS Standard lists of settings, etc.
/* @TABLES Generic tables for various areas.

/* @POLLS Polls, above the posts, and events (Display.template.php).
/* @POSTS Posts, personal messages, signatures, attachments, etc.
/* @QUICK Styles for the quick reply area.
/* @EDIT Editing of posts, polls or events (Post.template.php).
/* @TOPICS Split, merge, move, send, or report topics.

/* @WRAPPER The main wrapper, and stuff directly inside (header, etc).
/* @NEWS Random news lines, and recent posts box, above board index.
/* @BOARDS Board Index categories, and their boards.
/* @INFO The Info Centre, at the bottom of the main index page.
/* @MESSAGE The topic index and child boards (also unread/new replies).
/* @FOOTER Separate section for the footer content.

/* @DROPMENU The main forum menu, and the admin/profile/PM drop menus.
/* @SIDEBAR The sidebar menu for admin, etc (shares code with drop menu).
/* @LINKTREE Breadcrumbs, navigation list, whatever you want to call it.
/* @PAGES The page index links (1,2,3....etc) and next/previous links.
/* @BUTTONS The quickbuttons (quote, edit, etc) and buttonlist (others).

/* @LOGIN The log in pages.
/* @REGISTER The public registration pages.
/* @MAINTAIN The maintenance mode warning shown to guests.
/* @ERRORS Styling for error messages.

/* @PROFILE Profile sections (lotsa stuff).
/* @PM Styling specific to the Personal Messages section.
/* @STATS The statistics centre (not that anyone ever looks at it).

/* @CALENDAR Yup, it's the calendar stuff.
/* @HELP Help pop-up styling, and main help pages.
/* @SEARCH Search form and search results pages.
/* @MLIST The member list, including member list search page.

/* @MEDIA Responsive media queries, for print, tablets, phones, etc.

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



If a particular declaration has to reference two different areas of the file (for instance, specific header bar adjustments for when they are inside another class, like the info centre) this is noted in both places and a unique identifier is provided in the comment so that anyone can instantly jump to the other location to check for possible conflicts.

/* Classes catbg and titlebg are h3 or h4, except when */
/* specifically defined as th - see @TABLES for those */
.catbg, .titlebg {
overflow: hidden;
font-size: 1.357em;
line-height: 2em;
}
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Masterd on July 21, 2014, 12:43:32 PM
Any news on this, Ant? I'm dying for some information.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on July 24, 2014, 07:11:24 PM
Yeah. I took a bit of a break from it to catch up on some other things. I'll have another bash soon and finish it up.

Come to think of it, I have a confession to make. I don't really have much incentive to write responsive CSS. I can do it easily enough, but from my perspective it's just rather boring and irritating. Not at all exciting. I never browse on a phone myself and dislike working in postage stamp size windows. This means the responsive side of it will probably be fairly limited.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: live627 on July 25, 2014, 12:41:23 AM
QuoteI never browse on a phone myself
That makes two of us.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on July 25, 2014, 06:35:53 AM
I love it Ant!  Truly dark, truly beautiful.  I can't wait to get my hands on it  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Masterd on August 18, 2014, 06:25:05 AM
Any updates, Ant?
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on August 18, 2014, 06:06:56 PM
Yup. Been busy with other things. Will probably be just as busy for the rest of the month.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on August 19, 2014, 06:50:27 PM
K, I should probably bundle this thing up at the weekend, so people can start kicking it around and seeing what falls off. That might get me motivated to finish up the really boring bitz (RTL, responsive, support for bloody IE stupidity, if I can be bothered with that, and whatever else).

At this stage I wouldn't be handing it out to all and sundry, because TBH it's not at a stage where I want to deal with lots of n00b questions. No offence to n00bs, since we were all n00bs once, but I'll deal with you guys later. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: ARG01 on August 19, 2014, 06:59:30 PM
Is it really necessary to worry about earlier versions of IE these days? I no longer give earlier IE a second thought.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: JBlaze on August 19, 2014, 07:20:14 PM
Very nice theme. It reminds me of DzinerStudio's DarkBreak Theme (http://www.dzinerstudio.com/index.php?action=downloads;sa=view;down=137).
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on August 19, 2014, 09:54:48 PM
Quote from: SimpMode on August 19, 2014, 06:59:30 PM
Is it really necessary to worry about earlier versions of IE these days? I no longer give earlier IE a second thought.

Given that lots of people (myself included) have absolutely no interest in W8 and are sticking with W7, and given that for some weird reason lots of Windows users use IE, and given that the hgihest version of IE that will run on W7 is IE9, and given that IE9's CSS3 support is really pretty damned primitive.......


...unfortunately, to some degree, probably yes. Unless I just give them all the finger and tell them to write their own fallbacks, which I admit is very, very tempting.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: ARG01 on August 19, 2014, 11:37:20 PM
Quote...and given that the hgihest version of IE that will run on W7 is IE9, and given that IE9's CSS3 support is really pretty damned primitive...

I don't understand this? I run W7 and am using IE 11 without issue.  ???
Title: Re: [Preview/WIP] Apocalypse theme
Post by: live627 on August 20, 2014, 12:42:42 AM
meee toooo
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on August 20, 2014, 01:17:13 AM
Oh cool. Last I checked IE10 and up were only for W8 (I hardly ever pay attention to anything IE). Ok, so I just write W3C compliant code, and if anyone is on IE9 or less it's their problem.

TBH my desktop is still IE9. I should probably upgrade it. Then again, since I don't give a rat's arse about IE, I may not even bother. :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: live627 on August 20, 2014, 01:44:17 AM
but you should. Windows depends on IE like its nobody's business.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on August 20, 2014, 01:47:51 AM
But it doesn't depend on IE11. It's still receiving patches anyway, even with IE9.

ETA: Basically, as long as IEwhatever is standards-compliant, and as long as my OS is being patched for exploits, I don't care what IE is doing. No need to ever look at it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Masterd on September 28, 2014, 04:36:56 PM
So, what's the progress so far?
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on September 28, 2014, 05:18:55 PM
I'm gonna try and break it, during the week.

If I can't break it, Ant might just release it on an unwitting public... ;)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on September 28, 2014, 06:53:50 PM
There hasn't been any progress, for two reasons. First, I have been busy with other creative interests that don't involve coding. Second, I sometimes find it a bit difficult to get enthused about putting a lot of work into a theme I'll probably never have the opportunity to use, since I don't run a forum myself at the moment.

Anyway, I have been feeling like doing some more on it lately, so have been taking another look at it to get my head around the codebase again. I've re-thought a couple of aspects to make them more practical for general use too. The aim is to get test copies out to a few people this week, so I can get feedback on what else needs doing.

ETA: I made a to-do list a while back.

Quote/* Apocalypse theme - stuff to do */
/* ------------------------------ */

1/ Write page index mod (ESSENTIAL). NB: May pay to put all markup in Sources.

2/ Write membergroup colour mod (nice).

3/ Sort out IE/Safari fallbacks for CSS3 gradients - flat colour only!

4/ New sprite for quickbuttons, etc.

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

5/ A few odd icons, for better looks (replace gif with png).

6/ Check splitting topics some more (for javascript and page index).

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

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

8/ Sort RTL CSS.

9/ Sort responsive CSS (the grim stuff).

/6 is sorted already, but then I've thought of a couple more things. :P 1/ and 9/ are the major considerations at this point. 8/ is a no-brainer once /9 is sorted.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: ARG01 on September 28, 2014, 08:36:51 PM
Quote from: Antechinus on September 28, 2014, 06:53:50 PM
...Second, I sometimes find it a bit difficult to get enthused about putting a lot of work into a theme I'll probably never have the opportunity to use, since I don't run a forum myself at the moment.

I am right there with you at the moment.  I have two forums but both are pretty much dead and close to the chopping block. ;D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on September 28, 2014, 09:00:32 PM
Yeah the basic point of (non-paid) theming, as I see it, is to create an interface that I'd like to use.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on October 01, 2014, 06:01:06 PM
Ok, been thinking about how to do this. The page index markup is customised, which means Sources edits, which means a mod. There are two ways I can do this.

The first is the "normal" way, in which template and CSS changes are applied to default and all other themes. That's ok, but is more code to write since it needs template edits for all themes and it needs acceptable CSS for all themes. Some of that would have to be done manually after mod installation if custom themes were installed, since it's likely the CSS suitable for default would look like crap on many custom themes. That means more work for admins, many of who are not coders.

There's a second way I can do it, and I'm thinking this is the way to go. What I would do is write a second page index function in Subs.php (and some edits in other Sources files, like MessageIndex.php) to generate the custom markup for this beast of a theme. The advantages are:

1/ there is less code to write overall, since no template edits are required in the xml (they are already sorted in this theme's templates, and are not applicable to other themes) and no CSS is required for other themes.

2/ since no styling is going to be included in the mod, and markup for existing themes won't be touched, that means nothing will break on themes that are already installed.

3/ even if one of the existing mods that changes function constructPageIndex is installed for use on other themes, this mod won't conflict with it.

4/ if another themer wants to use the page index markup from this theme in a custom theme of their own (because they want the better semantics and styling possibilities) as long as this mod is installed they will be able to do that just by making the required changes in their own templates, even if their own templates use no other code from this theme. They don't even need to make the changes in all templates that call the page index. They can pick and choose. For instance, only style up Display.template.php if they are including that anyway, and ignore the others.

All things considered, I think this is the best approach. It's unconventional to have a mod which deliberately does not install on the default theme and on previously installed custom themes, but in this case I think there are good arguments for it. I'll try to get it written and tested tonight. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on October 01, 2014, 07:42:25 PM
Sounds good to me  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: ARG01 on October 01, 2014, 07:50:48 PM
I agree as well.  ;)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on October 02, 2014, 06:04:49 PM
Sounds fantastic to me. As an admin with limited coding abilities, I love the second idea much better.  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on October 02, 2014, 07:36:46 PM
Then you'll also totally love how some mods will refuse to install on this theme without manual edits, because some of the templates are so heavily customised. :D

/me haz to be evil sometimes
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on October 05, 2014, 12:36:49 AM
Template edits are no big deal to me.  Writing code from scratch or modifying existing code from scratch is a different matter altogether though.  ;D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: acepnoor on October 11, 2014, 02:25:40 PM
its look so cool great...I really like a dark themes  8)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on November 21, 2014, 04:13:26 PM
I just received a PM from someone wanting to know when this theme will be finished. They even offered to pay for it.

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.

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: ARG01 on November 21, 2014, 06:05:17 PM
Quote...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...

I think we are related.  ;D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Bloc on November 21, 2014, 06:26:14 PM
Quote from: Antechinus on November 21, 2014, 04:13:26 PM
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.
Quote
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.

Quote

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on November 21, 2014, 11:04:47 PM
Yeah if I get out and do other stuff for a while, it may get me inclined to code sometimes. We'll see.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on December 31, 2014, 03:12:43 AM
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. :P 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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on December 31, 2014, 06:39:29 AM
2.1 compatible?

(http://www.katzy.dsl.pipex.com/Smileys/hide.gif)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on December 31, 2014, 03:32:07 PM
No. :P Not yet anyway. I know what dev cycles are like. Give me something stable to work with, then I'll think about theming it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on December 31, 2014, 06:06:56 PM
Wise man. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 01, 2015, 07:37:50 PM
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. :P

Pic down there V V V
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Night09 on January 01, 2015, 08:48:12 PM
Quote from: Antechinus on January 01, 2015, 07:37:50 PM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 01, 2015, 10:06:06 PM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Night09 on January 02, 2015, 04:31:51 AM
Should be fine then, I just know a few sites ive been on dont allow you to turn sideways for a wider view.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 03, 2015, 04:29:28 AM
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. :D

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. :D

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: tranhiep_116 on January 03, 2015, 04:47:08 AM
Beautiful theme  ;D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 03, 2015, 12:54:36 PM
For someone who haz no motivation to code, it is coming along great.  :D

Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 04, 2015, 09:55:40 PM
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. :D

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: margarett on January 05, 2015, 08:55:20 PM
Very nice :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on January 06, 2015, 07:19:56 AM
mmm.... dark yumminess...
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 06, 2015, 02:45:50 PM
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. :D

Current to-do list looks like this:

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. :D

12/ is another one I decided on yesterday, after helping out with this support request (http://www.simplemachines.org/community/index.php?topic=531972.0). 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. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 06, 2015, 03:03:56 PM
So then I got thinking about variants, as you do. :D

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 07, 2015, 06:50:07 AM
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. :)

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 07, 2015, 03:30:52 PM
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. :D

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 (http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181).

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. :D

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Gwenwyfar on January 08, 2015, 01:11:40 PM
Oh, hadn't seen this topic before. Theme is looking pretty good. I specially liked the poster info and member list part  :D

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  ;D
: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 :P

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 :P)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 08, 2015, 01:37:09 PM
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. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 08, 2015, 03:54:36 PM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 09, 2015, 12:08:30 AM
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. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: live627 on January 09, 2015, 01:44:31 AM
http://plugins.jquery.com/custom-scrollbar/ ended up in SMF 2.1 for the scroll bar in the alerts popup.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 09, 2015, 03:05:44 AM
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. :D 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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Gwenwyfar on January 09, 2015, 06:56:57 PM
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  :laugh:

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  ;D

Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 09, 2015, 09:05:16 PM
Hey I just had a shocking realisation. I think this beast is just about ready for a public beta. :D 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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 09, 2015, 10:18:36 PM
kewl, I look forward to this one myself. I have been watching with (im)patient  :P expectation.   :laugh:
Title: Re: [Preview/WIP] Apocalypse theme
Post by: margarett on January 09, 2015, 10:40:47 PM
Kewl! :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 12:07:29 AM
Ok, here it is: Apocalypse TK1. ;D

Why TK1? See Settings.english.php:

<?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. :D These are all cropped from stuff I got from http://www.socwall.com/ (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 (http://www.simplemachines.org/community/index.php?topic=524324.msg3782814#msg3782814).
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 10, 2015, 01:25:52 AM
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.  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 03:22:31 AM
Bugger. And I thought I explained it clearly. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 10, 2015, 09:42:11 AM
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  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: kat on January 10, 2015, 10:05:34 AM
OO! It's Chalky!

(http://www.katzy.dsl.pipex.com/Smileys/hyper.gif)(http://www.katzy.dsl.pipex.com/Smileys/hyper.gif)(http://www.katzy.dsl.pipex.com/Smileys/hyper.gif)(http://www.katzy.dsl.pipex.com/Smileys/hyper.gif)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 02:31:47 PM
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. ;)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 02:37:41 PM
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. :D

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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 10, 2015, 02:46:50 PM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 03:04:43 PM
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?
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 03:14:02 PM
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.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 03:27:39 PM
Ok Chalky, how did you get your site slogan to display that image? When I copy it to my local site and put the url in the input for the slogan, I just get the url in text, not the image.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 10, 2015, 03:35:29 PM
Quote from: Antechinus on January 10, 2015, 03:04:43 PM
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?
I guessed that.  ;D I started looking around under the hood and saw a lot of similarities to Prince of Darkness, which, quite a few of my members still love and use. I need to keep digging and playing with the test forum copy, so I may have a few css questions later.

I haven't seen any scrolling issues myself, but I will mention that in the forum topic asking members to test out this theme. If they report any, I'll report back.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 10, 2015, 03:37:41 PM
Quote from: Antechinus on January 10, 2015, 03:27:39 PM
Ok Chalky, how did you get your site slogan to display that image? When I copy it to my local site and put the url in the input for the slogan, I just get the url in text, not the image.

Ah sorry, I meant to mention that in my last post.  The same happened to me, I put the URL in the box in theme settings and just got text as well.  In the end I overwrote the smflogo.png with my own image  :-[


QuoteThe 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. :)

43em works perfectly!  So does 42em for that matter.  Board icons are now in their place  :D


QuoteIf 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 22 of index.template.php).

You mean line 122, right?  Commenting out that bit seems to make no difference at all  :-\


Quote from: Antechinus on January 10, 2015, 03:14:02 PM
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.

I'm off to try that now  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 03:41:57 PM
Quote from: busterone on January 10, 2015, 03:35:29 PM
Quote from: Antechinus on January 10, 2015, 03:04:43 PM
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?
I guessed that.  ;D I started looking around under the hood and saw a lot of similarities to Prince of Darkness, which, quite a few of my members still love and use. I need to keep digging and playing with the test forum copy, so I may have a few css questions later.

I haven't seen any scrolling issues myself, but I will mention that in the forum topic asking members to test out this theme. If they report any, I'll report back.

I should update PoD with this markup and responsive stuff. Not right now though. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 10, 2015, 03:42:51 PM
Collapse/expend icons present and correct  8)

Edit:  My 10" iPad running iOS7 also separates the logo and banner in portrait mode, but otherwise, so far everything looks good on the iPad.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 03:49:30 PM
Quote from: Chalky on January 10, 2015, 03:37:41 PM
Quote from: Antechinus on January 10, 2015, 03:27:39 PM
Ok Chalky, how did you get your site slogan to display that image? When I copy it to my local site and put the url in the input for the slogan, I just get the url in text, not the image.

Ah sorry, I meant to mention that in my last post.  The same happened to me, I put the URL in the box in theme settings and just got text as well.  In the end I overwrote the smflogo.png with my own image  :-[

Ok, no worries. Yeah I was playing with text for site name and slogan. The plan was to try out the idea of positioning them over the banners as text, so people who had no gfx skills could just use the text on top of the banner, with choice of web font, to make a custom banner. It probably doesn't play well with actual image logos. I'll take a look at that. :)


Quote43em works perfectly!  So does 42em for that matter.  Board icons are now in their place  :D

Cool.


QuoteYou mean line 122, right?  Commenting out that bit seems to make no difference at all  :-\

Ok good. That tells me it's a CSS issue. I can work with that. iStuff might require display: none on the droppy content, which I would prefer to avoid because of a11y considerations. May also be able to work around it by using positioning specifically on the droppy links for iStuff. It's obviously reading the menulevel2 backgrounds as being positioned where they should be, but not the links inside them. I'll have a think about it.

One question: when you get them all mushed up like that, is it like that all the time, or is it only when you open one droppy? (ie: the whole lot open and get mushed up)

ETA: Yeah Line 22 was a typo. Will edit the post in question. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 03:53:00 PM
Quote from: Chalky on January 10, 2015, 03:42:51 PM
Collapse/expend icons present and correct  8)

Edit:  My 10" iPad running iOS7 also separates the logo and banner in portrait mode, but otherwise, so far everything looks good on the iPad.

Yup it's supposed to separate, because the banner scaling with width gets too small to hold the site name and slogan. I could get around that by applying a CSS declaration to scale images for site slogan, so they matched the banner behind them, or an extra theme setting to choose text or image for slogan, but the concept wasn't really to mix in images there.

The text-over-banner idea may be too complex for general release, and better as a CSS tut. Anyway it's all still pre-production and can be messed around with. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 10, 2015, 04:32:24 PM
Quote from: Antechinus on January 10, 2015, 03:49:30 PM
One question: when you get them all mushed up like that, is it like that all the time, or is it only when you open one droppy? (ie: the whole lot open and get mushed up)

It's like that all the time.  That is, wherever I am I touch the "Menu" button that appears at the top in portrait mode and the menu appears - mushed up as you see it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 04:48:01 PM
Ok, CSS issue with positioning. I'll frig around with it. Offhand I suspect that using relative positioning on the drop menu li's and anchors might fix it (to nail them to the backgrounds off-screen) but it's a bit hard for me to test it without an iThing of my own.

If anyone knows of a really good online emulator, let me know. :)

And I'm back on FF 31.03 at the moment, and just downloading 34. Scrolling is fine on 31 (I was on the esr channel, back when I used FF). Will update now. Brb.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 04:51:32 PM
Ok, am on FF 34.05 now, on W7 64 bit. Scrolling is smooth as silk for me, at least when tested on local host. What's the theme id number on your site so I can try that?

ETA: Actually scratch that. I'll register an account there so I can take a look easily. Might help track down things in other areas. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 10, 2015, 05:06:17 PM
It's theme nº 13, but register by all means  :)

You're approved  8)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 05:19:26 PM
Ok, your site scrolls fine for me with FF 34.05 and the theme selected, at least on guest view.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 10, 2015, 05:25:06 PM
Hmmm... I've tried signing out but it still scrolls slow and jerky.  My site scrolls fine for me with other themes.  Maybe it's one of my browser add-ons conflicting then  :-\
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 05:31:47 PM
Yeah could be. I have a few add-ons and they seem ok. If you get the time and inclination, try disabling them one at a time and see if it fixes the problem. Alternatively, if you give me a list of what add-ons you're running I may be able to nail it down. I suspect it is something to do with fixed positioning, so it's likely to affect any site that uses this in the CSS.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 05:45:58 PM
Just logged in at yours. Scrolls fine for me so yeah, probably one of the add-ons (which is a bugger but anyway).
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 05:48:23 PM
Hey cool. :D The nifty menu is mushed for me too on iPhone portrait res, just using that size on FF desktop. That's handy, because it tells me it's something specifically about your site.

Would you happen to be running Doodle's Menu Manager mod, or anything else menu-related?


Scratch this. See two posts down.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 05:53:07 PM
AHA! :D You're already calling jQuery somewhere for your fancybox stuff. The problem will be the conflict with jQuery being called twice since for testing (or for anyone who doesn't already call jQ) this theme comes with a local copy that is called from /scripts.

Go to Line 117 of index.template.php and comment it out. See what happens.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 10, 2015, 06:10:30 PM
Right I'll play with the add-ons.

Quote from: Antechinus on January 10, 2015, 05:53:07 PM
AHA! :D You're already calling jQuery somewhere for your fancybox stuff. The problem will be the conflict with jQuery being called twice since for testing (or for anyone who doesn't already call jQ) this theme comes with a local copy that is called from /scripts.

Go to Line 117 of index.template.php and comment it out. See what happens.

That sounds like it could well be the problem but if I just comment out line 117 the menu stays mushed.  If I comment out line 116 as well the funky menu stops working altogether.  Does this look right?

// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/script.js?fin20"></script>';
//<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery_1.10.1.min.js"></script>';


No, no menu-related mods at all, I've always edited my menus manually.  Hold on to something steady and I'll tell you what mods I have installed  :P  I have at this point made no mod-related theme edits to Apocalypse.

1.    YandexGarland    1.2    [ Uninstall ]
2.    SMF 1.1.20 / 2.0.9 Update    1.0    [ Uninstall ]
3.    Spoiler Tag    0.7.2a    [ Uninstall ]
4.    Simple Audio Video Embedder    2.7.1    [ Uninstall ]
5.    Track User Logins    1.1    [ Uninstall ]
6.    Ad Managment    3.2    [ Uninstall ]
7.    SMF 2.0.8 Update    1.0    [ Uninstall ]
8.    SMF 2.0.7 Update    1.0    [ Uninstall ]
9.    @mention members    1.1.2    [ Uninstall ]
10.    PM Settings    1.0.1    [ Uninstall ]
11.    Unread PMs Favicon    1.0    [ Uninstall ]
12.    Unapproved Posts on Moderate Button    1.1    [ Uninstall ]
13.    Logout Prompt    1.0    [ Uninstall ]
14.    SMF 1.1.19 / 2.0.6 Update    1.0    [ Uninstall ]
15.    Sortable Packages (and Installed Time)    1.3.4    [ Uninstall ]
16.    SMF 2.0.5 Update    1.0    [ Uninstall ]
17.    Simple Off-Topic BBC    1.0    [ Uninstall ]
18.    SMF4Mobile Mod    1.0    [ Uninstall ]
19.    Add [ li] Button    1.0    [ Uninstall ]
20.    EU cookie law    0.1.2    [ Uninstall ]
21.    Avatar Rounded Corners    1.0    [ Uninstall ]
22.    Misc Anti Spam    1.0    [ Uninstall ]
23.    FAQ Mod    2.0    [ Uninstall ]
24.    Custom Action Mod    3.2    [ Uninstall ]
25.    Optimus Brave    1.8.5    [ Uninstall ]
26.    Bad Behavior mod    1.5.15    [ Uninstall ]
27.    Voter Visibility    1.02    [ Uninstall ]
28.    SMF 2.0.4 Update    1.0    [ Uninstall ]
29.    Remove Hot Topic Icon    1.1.1    [ Uninstall ]
30.    PNG Message Icons    1.3.1    [ Uninstall ]
31.    SMF 2.0.3 Update    1.0    [ Uninstall ]
32.    Change All Subjects    1.1.2    [ Uninstall ]
33.    SMF Arcade v2.5 - Add trophies to highscores    1.0    [ Uninstall ]
34.    User Menu    1.0.2    [ Uninstall ]
35.    Lock Recycled Topics    0.1    [ Uninstall ]
36.    PageDropdown    1.4    [ Uninstall ]
37.    Bakers Dozen Pages    1.2    [ Uninstall ]
38.    FancyPosts    0.1    [ Uninstall ]
39.    Age to DOB    1.0    [ Uninstall ]
40.    Happy Birthday    0.3    [ Uninstall ]
41.    Anti-Spam Links    1.0.1    [ Uninstall ]
42.    Admin Toolbox    1.0    [ Uninstall ]
43.    Annoy User    1.2    [ Uninstall ]
44.    Show Event Dates    0.2.1    [ Uninstall ]
45.    Skin/PDL for Arcade RC2    1.0.2    [ Uninstall ]
46.    No BBC    1    [ Uninstall ]
47.    IMG Popup    1.0.2    [ Uninstall ]
48.    Removes the post rank if a custom title is set    1.1    [ Uninstall ]
49.    InLine Attachments    1.2.1    [ Uninstall ]
50.    Custom Greeting Mod    1.1.1    [ Uninstall ]
51.    Auto Refresh Who Index    1.1    [ Uninstall ]
52.    SMF Arcade    2.5    [ Uninstall ]
53.    Last Active On MemberList    1.4    [ Uninstall ]
54.    Quick Ban on Account Delete    1.0.1    [ Uninstall ]
55.    Inuitive Age    1.0    [ Uninstall ]
56.    Space Between Posts    2.0    [ Uninstall ]
57.    Sneaky Editing    1.0    [ Uninstall ]
58.    FancyBox 4 SMF    0.3    [ Uninstall ]
59.    Signature Area BBCode Buttons    2.0.3    [ Uninstall ]
60.    BBC Permission Mod    1.2    [ Uninstall ]
61.    Personal address BBCode    2.0.1    [ Uninstall ]
62.    LMGTFY BBcode    3.7.3    [ Uninstall ]
63.    Justify BBCode    2.3.2    [ Uninstall ]
64.    Countdown BBCode    2.0.1    [ Uninstall ]
65.    Forum Name in Browser Title    2.0.1    [ Uninstall ]
66.    Topic View Log    1.2    [ Uninstall ]
67.    NiceTooltips    1.8    [ Uninstall ]
68.    Enhanced PM Warning Message    1.0    [ Uninstall ]
69.    RSS Feed Icon    1.1    [ Uninstall ]
70.    Post Unapproval    1.1.4    [ Uninstall ]
71.    Adk Snow Effect    2.0    [ Uninstall ]
72.    Recent Topics by 24h 48h 72h Filter    1.0    [ Uninstall ]
73.    SMF Multi Quote    1.1.3    [ Uninstall ]
74.    Topics Filter    3.2    [ Uninstall ]
75.    Split and Move    0.1.2    [ Uninstall ]
76.    Bookmarks    2.5    [ Uninstall ]
77.    Disable 'last edit by...' for Administrators    1.8    [ Uninstall ]
78.    Users Online Today    2.0.1    [ Uninstall ]
79.    Thank-o-matic    3.0    [ Uninstall ]
80.    Smart Pagination    0.8.2    [ Uninstall ]
81.    Contact Page    3.0    [ Uninstall ]
82.    Back to the index    0.2.1    [ Uninstall ]
83.    Forum Faces ~ Avatars    0.1    [ Uninstall ]
84.    FantasticSmileys    1.0    [ Uninstall ]
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 06:12:50 PM
D'oh. Got the mushed menu figured out. Dopey bugger. I made a mistake in the media queries.

About Line 4550ish find this

#main_menu .menulevel2 {
top: 10%;
left: 85%;
}


Replace with this:

#main_menu .menulevel2 {
top: 10%;
}
#main_menu .listlevel1:hover>.menulevel2 {
left: 85%;
}


That should fix it. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 06:23:31 PM
Ok, I grabbed a copy of the Fancybox mod and that's calling jQ 1.8.1 from a local source. This is going to cause problems with any jQ stuff when running Apocalypse.

1.8.1 is out of date now anyway, and with any luck Fancybox should work just fine with later versions of jQ. Suggestion is to open Subs-FancyBox.php and comment out the call for jQ there, on Line 31.

Note that you have to do a slight syntax change as well as the basic // by moving the ' after = to Line 32.

Code (Find) Select
$context['insert_after_template'] .= '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


Code (Replace) Select
$context['insert_after_template'] .=
//<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
'<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


ETA: Oh and once you've done that, you should be able to uncomment the Superclick menu on Line 122 and it should work.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 06:28:25 PM
I should probably add an admin setting to disable the theme's call for jQuery if the admin thinks there is a conflict with a mod already loading it. I had thought of doing that. Mods should check for this stuff, but they often don't. :P

They also often load outdated versions of jQuery. Mongrels. :P

Added another thing to the to-do list:

Quote13/ YAY! BUGZ! Add admin settings for jQuery calls,
   with options of local source, Google CDN, jQuery CDN,
   or disable theme's call completely.

And another thing:

Quote14/ Add a CSS tweak to make the page index styling play nicely
   with the Page Dropdown mod (should be a piece of cake).

ETA: Ok, 13/ is crossed off the list. The next version of the theme will have the option to choose from three sources for jQuery (Google CDN, jQuery CDN and local copy) with a fourth debugging option to disable the theme's call for jQuery, in case of conflicts with mods.

Code for all this is already running live on local, without errors. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 10, 2015, 08:19:05 PM
I have an odd error in the error log. Each time a topic is accessed, this error appears in the log for that user and url

  http://www.thedemonsden.com/index.php?topic=12235.0
2: Illegal string offset 'group'
File: /homepages/xxx/xxxxxxx/htdocs/forum/Themes/Apocalypse_TK1/Display.template.php
Line: 247


This is from the Apocalypse file
244    // Show the member's primary group (like 'Administrator') if they have one.
245 if (!empty($message['member']['group']))
246 echo '
247 <li class="membergroup group_', $message['member']['id']['group'], '">', $message['member']['group'], '</li>';


this is SMF default theme display.template.php's corresponding code
// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';


I am taking a wild guess that this is what is freaking it out-  "membergroup group_',    ?
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 08:26:49 PM
That's funny, because it's been running without errors on local. All that code does is get the group ID number for non-postcount groups (so it spits out class="membergroup group_1" for admins, etc).

Never throws a wobbly on local, which doesn't have any Display.php edits that would affect this. It has a couple of minor edits, but they're just for testing my page index mod.

ETA: The group_ thing is just a CSS class, so wouldn't have anything to do with the error log.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 10, 2015, 08:52:37 PM
Yep, my skillz are limited on php, but I should have seen that was just css class.  /headslap

If it helps any, I am running the site on php 5.5.20
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 10, 2015, 09:05:27 PM
Shouldn't matter, AFAIK, since it's just an internal SMF thing. Might have to point Arantor at it and see what he thinks. :D

ETA: My local is on 5.3.1. Should probably update it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 11, 2015, 05:41:51 AM
Morning!  I've only had one cup of coffee but weird things are happening.

Quote from: Antechinus on January 10, 2015, 06:12:50 PM
D'oh. Got the mushed menu figured out. Dopey bugger. I made a mistake in the media queries.

About Line 4550ish find this

#main_menu .menulevel2 {
top: 10%;
left: 85%;
}


Replace with this:

#main_menu .menulevel2 {
top: 10%;
}
#main_menu .listlevel1:hover>.menulevel2 {
left: 85%;
}


That should fix it. :)

Excellent!  Now the menu shows as it should in portrait, but the submenu items neither show nor appear in portrait or landscape (they weren't showing in landscape either as I realised late last night).

Quote from: Antechinus on January 10, 2015, 06:23:31 PM
Ok, I grabbed a copy of the Fancybox mod and that's calling jQ 1.8.1 from a local source. This is going to cause problems with any jQ stuff when running Apocalypse.

1.8.1 is out of date now anyway, and with any luck Fancybox should work just fine with later versions of jQ. Suggestion is to open Subs-FancyBox.php and comment out the call for jQ there, on Line 31.

Note that you have to do a slight syntax change as well as the basic // by moving the ' after = to Line 32.

Code (Find) Select
$context['insert_after_template'] .= '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


Code (Replace) Select
$context['insert_after_template'] .=
//<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
'<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


ETA: Oh and once you've done that, you should be able to uncomment the Superclick menu on Line 122 and it should work.

Now the menu works perfectly in landscape: touching expands the submenu items enabling them to be selected BUT the menu button now doesn't respond at all in portrait.  Recommenting line 122 makes no difference.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 06:26:57 AM
Quote from: Chalky on January 11, 2015, 05:41:51 AM
Excellent!  Now the menu shows as it should in portrait, but the submenu items neither show nor appear in portrait or landscape (they weren't showing in landscape either as I realised late last night).

If you had js disabled then the menus may not work on touchscreen, because there is no hover.


QuoteNow the menu works perfectly in landscape: touching expands the submenu items enabling them to be selected BUT the menu button now doesn't respond at all in portrait.  Recommenting line 122 makes no difference.

Yup. With the click menus enabled the top level button, if it has a droppy, has the preventDefault on the href, so clicking opens the droppy rather than sending you off to a new page. If that's what it's doing, that is how it should be.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 06:39:15 AM
I've just been playing with the buddy list page. Jade was making a noise about it somewhere the other day, so just for some light relief I took a look at it. Piece of cake. Just threw in some of the same markup as the memberlist, so buddy list flies on the same CSS, and it's all good.

Didn't bother styling up the ignore list. Who wants to look at avatars of people who annoy them anyway? Just left that one as a table.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 02:09:44 PM
Hey Chalky, my post was very late last night after several late nights, and I think I may have been misinterpreting what you said. Not sure. Given my late nights and your lack of early morning coffee, and that I have zero access to the device in question, could you please make bug reports as idiot-proof as possible. Use small words and big letters. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 11, 2015, 02:17:14 PM
LOL I've been a bit like that all day today  ;D  What I meant was that after doing everything you said the "Menu" button in portrait (see pic) does nothing.  It's broken, no menu items show at all.  It might as well be a picture of a sock  :P

Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 11, 2015, 02:39:47 PM
More fun for you!  I've just looked in my error log  O:)


http://chalkcat.com/index.php?action=profile;u=1
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Profile.template.php
Line: 65


http://chalkcat.com/index.php?topic=3114.msg71192
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Display.template.php
Line: 247


http://chalkcat.com/index.php?action=who
8: Undefined index: online
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Who.template.php
Line: 72


http://chalkcat.com/index.php?action=mlist
8: Undefined index: joined
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 154


http://chalkcat.com/index.php?action=mlist
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 135


http://chalkcat.com/index.php?action=pm
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/PersonalMessage.template.php
Line: 186

20 pages of them  :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 02:43:18 PM
Well it's not really adequate as a picture of a sock, since there's no obvious resemblance. I can give you a nice sock icon if it will help. :D

That's a javascript problem. The media query hauls the menu switch buttons up out of the darkness and into the light via CSS changes (coz you don't want them on big screens) then the jQuery switches the display of the buttons according to which one is required at the time. Your shot shows both buttons at once, overlapping (ergo the dual direction arrow, while the text is the same so appears as one).

IOW, jQuery is broken. Give me a minute to grab a coffee and I'll check out the page source at yours. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 02:50:10 PM
Quote from: Chalky on January 11, 2015, 02:39:47 PM
More fun for you!  I've just looked in my error log  O:)


http://chalkcat.com/index.php?action=profile;u=1
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Profile.template.php
Line: 65


http://chalkcat.com/index.php?topic=3114.msg71192
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Display.template.php
Line: 247


http://chalkcat.com/index.php?action=who
8: Undefined index: online
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Who.template.php
Line: 72


http://chalkcat.com/index.php?action=mlist
8: Undefined index: joined
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 154


http://chalkcat.com/index.php?action=mlist
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 135


http://chalkcat.com/index.php?action=pm
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/PersonalMessage.template.php
Line: 186

20 pages of them  :P

Ok, I know what one of those is. I have some more work to do on the memberlist. I'd forgotten that this theme was pulling some stuff from my memberlist mod, which I'd installed on my test site. The memberlist is basically borked without the mod. I'll fix it so it's ok by itself.

I can't replicate the other template errors though. Busterone got that one too, but at the moment I have NFI why. It's a perfectly normal call that spits put the group id number, and runs flawlessly on my local.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 03:27:40 PM
Ok checked out the source. The first point is not related to the javascript problem but is funny anyway. Somehow while commenting <head> you've ended up with an extra call to index.css. Doesn't matter, apart from a trivial performance hit, but should be sorted anyway.

<title>ChalkCat&nbsp;-&nbsp;Index</title>
<link rel="icon" type="image/png" href="http://127.0.0.1/SMF_20x/favicon.png" />
<style type="text/css">.wrapper, #inner_section {width: 90%;}</style>
<link rel="stylesheet" type="text/css" href="http://chalkcat.com/Themes/Apocalypse_TK1/css/index.css?fin20" />
<link rel="stylesheet" type="text/css" href="http://chalkcat.com/Themes/Apocalypse_TK1/css/index.css?fin20" />


Ok, javascript. It has to be a conflict with one of your mods, most likely Fancybox. Since the library is only being called once now that's ok, so it's something else.

Declaring jQuery function init twice on the same page shouldn't be a problem, although I should look into that just in case. There are some errors coming from Fancybox although I'm not sure if they're relevant.

There's also a warning on my use of preventDefault, so I'll update my js to sort that. That still works, but since it's officially deprecated I'll change it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 03:33:34 PM
Oh yeah and the dumb pagination mod is forcing it's own CSS on this theme's page index presentation. You should be able to get around that by creating a blank file named pagination.css and chucking it in Apocalypse/css.

Come to think of it, as a temp fix for another minor glitch you could have this in the file, which would put the pages dots back in the right place, and should also block the css from the mod.

/* Next is to play nicely with default Subs.php output */
.pagelinks span {
margin: 4px 0;
padding: 2px 12px 4px 12px;
float: left;
font-size: 0.857em;
text-transform: capitalize;
white-space: nowrap;
border: 1px solid #000;
border-top: 1px solid #333;
background-image: linear-gradient(to bottom, #292929 0%, #111 80%);
}
.pagelinks span._expanded .navPages {
margin: 0;
}
.pagelinks span._expanded {
padding: 0;
}
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 11, 2015, 03:39:08 PM
Thanks, I'd figured it was the pagination mod looking silly down there :)

As for which mod is breaking the javascript I think it might be this one  http://custom.simplemachines.org/mods/index.php?mod=3860

Edit: pagination sorted - that's better!  :) :) :)  I'll fix the tooltip css at some point as well.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 03:48:56 PM
Ok, I'll look into the code for that one.

BTW, if you add this to pagination.css it should help the dropdown alignment. Oh bugger, it's already inheriting that. NVM. Will figure it out later.

.pagelinks select {vertical-align: bottom;}

You could also try this, before all the other stuff, and it might, just might, sort out the current page a bit better (haven't tested it yet).

.pagelinks * {float: left;}

If it makes things worse, ditch it. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 03:52:56 PM
Oh yeah and adding this to ThemeStrings.english.php will fix the undefined on the memberlist.

// Custom string for join date on memberlist.
$txt['joined'] = 'Joined';
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 04:11:38 PM
Ok, thanks to onepiece I have an answer on the illegal string template errors. Bug fix zip attached. Will also fix the undefined on the Memberlist, and update the Help.template.php and languages folder to use the separate languages file I'm now running (just saves a bit of performance on most pages) as well as giving you the nifty new buddy list.

Just "Extract here" on desktop, then upload the folder into Themes. :)

Will be ready for TK2 soon :D

Redundant attachments removed.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 04:21:06 PM
Quote from: Chalky on January 11, 2015, 03:39:08 PM
Thanks, I'd figured it was the pagination mod looking silly down there :)

As for which mod is breaking the javascript I think it might be this one  http://custom.simplemachines.org/mods/index.php?mod=3860

Edit: pagination sorted - that's better!  :) :) :)  I'll fix the tooltip css at some point as well.

Ok, more tweaks to pagination.css. Just overwrite the lot with this. Should work.

/* Next is to play nicely with default Subs.php output */
.pagelinks span, .pagelinks strong {
margin: 4px 0;
padding: 2px 12px 4px 12px;
float: left;
font-size: 0.857em;
text-transform: capitalize;
white-space: nowrap;
border: 1px solid #000;
border-top: 1px solid #333;
background-image: linear-gradient(to bottom, #292929 0%, #111 80%);
}
.pagelinks span._expanded .navPages, .pagelinks span._expanded strong {
margin: 0;
}
.pagelinks span._expanded {
padding: 0;
}
.pagelinks select {
margin: 4px 0 -4px 0;
}
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 11, 2015, 04:37:54 PM
Nice. I was about to post that I tried installing this theme on a clean 2.0.9 test site and did not get the illegal string errors. Theeeeen, it started there too.   ;D
Patch applied.   
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 11, 2015, 04:40:24 PM
Quote from: Antechinus on January 11, 2015, 04:11:38 PM
Ok, thanks to onepiece I have an answer on the illegal string template errors. Bug fix zip attached. Will also fix the undefined on the Memberlist, and update the Help.template.php and languages folder to use the separate languages file I'm now running (just saves a bit of performance on most pages) as well as giving you the nifty new buddy list.

Just "Extract here" on desktop, then upload the folder into Themes. :)

Will be ready for TK2 soon :D

Yesss that works for the memberlist errors!!  :D

Still getting this one though:

Quotehttp://chalkcat.com/index.php?action=who
8: Undefined index: online
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Who.template.php
Line: 72

off to change the css....
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 11, 2015, 04:44:36 PM
Quote from: Antechinus on January 11, 2015, 04:21:06 PM
Ok, more tweaks to pagination.css. Just overwrite the lot with this. Should work.

/* Next is to play nicely with default Subs.php output */
.pagelinks span, .pagelinks strong {
margin: 4px 0;
padding: 2px 12px 4px 12px;
float: left;
font-size: 0.857em;
text-transform: capitalize;
white-space: nowrap;
border: 1px solid #000;
border-top: 1px solid #333;
background-image: linear-gradient(to bottom, #292929 0%, #111 80%);
}
.pagelinks span._expanded .navPages, .pagelinks span._expanded strong {
margin: 0;
}
.pagelinks span._expanded {
padding: 0;
}
.pagelinks select {
margin: 4px 0 -4px 0;
}


Oh verrry nice!!! 

Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 04:56:05 PM
Oh bat poo. Forgot about Who.template.php. Ok, will take a look at it. I'm still stumped about this js conflict though. I looked through code for the mentions mod and couldn't see anything obvious, but my js skills aren't that great. Might have to talk to the mod author about it (assuming they can be contacted).

You can add a small left margin to the select too, if you like.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 05:09:52 PM
Ok, I think I see what I did with Who.template.php, but will leave testing changes for tonight.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 06:00:20 PM
w00t! Got the bastard! That who mod is calling jQuery too. Here's the page source for the in-topic pages. I've snipped most if it. The relevant line is 488 if you grab it from your own browser.


<script type="text/javascript">
var jquery_url = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
var atwho_url = "http://chalkcat.com/Themes/default/scripts/jquery.atwho.js";
var smf_sessid = "787d868b008335e583bb754a37a2cef8";
var smf_sessvar = "e7f851d41bbe";
</script>
<script type="text/javascript" src="http://chalkcat.com/Themes/default/scripts/mentions.js"></script>
<link rel="stylesheet" type="text/css" href="http://chalkcat.com/Themes/default/css/mentions.css" /><script type="text/javascript" src="http://chalkcat.com/Themes/default/scripts/postbitmenu.js"></script><div id="postbitmenu_71217" class="postbitmenu"><div class="catbg">Michael</div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=profile;u=25" rel="nofollow">View Michael's profile</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=pm;sa=send;u=25" rel="nofollow">Send a personal message to Michael</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=emailuser;sa=email;msg=71217" rel="nofollow">Send an email to Michael</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=profile;area=showposts;u=25" rel="nofollow">View Michael's posts</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=buddy;u=25;e7f851d41bbe=787d868b008335e583bb754a37a2cef8">Add Michael to Buddy List</a></div></div>
</div>
</div>
<div id="footer_section">
<a href="#skipnav_top" id="toplink" title="Top"><span>Top</span>↑</a>
<ul class="smf_footer_links wrapper">
<li class="copyright">
<span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;"><a href="http://chalkcat.com/index.php?action=credits" title="Simple Machines Forum" target="_blank" class="new_win">SMF 2.0.9</a> |
<a href="http://www.simplemachines.org/about/smf/license.php" title="License" target="_blank" class="new_win">SMF &copy; 2014</a>, <a href="http://www.simplemachines.org" title="Simple Machines" target="_blank" class="new_win">Simple Machines</a><br /><a href="http://www.createaforum.com" target="_blank">Simple Audio Video Embedder</a>
</span></li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="Valid XHTML 1.0!">XHTML</a></li>
<li><a id="button_wap2" href="http://chalkcat.com/index.php?wap2">WAP2</a></li>
<li class="theme_author"><a href="http://custom.simplemachines.org/themes/index.php?action=profile;u=129726" target="_blank" class="new_win">Apocalypse theme</a></li>
</ul>
</div>

<script type="text/javascript"><!-- // --><![CDATA[

// Create the news lines toggle.
var smfNewsFadeToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: false,
aSwappableContainers: [
'newslines_container'
],
aSwapImages: [
{
sId: 'newsupshrink',
srcExpanded: smf_images_url + '/collapse.png',
altExpanded: 'Hide news',
srcCollapsed: smf_images_url + '/expand.png',
altCollapsed: 'Show news'
}
],
oThemeOptions: {
bUseThemeSettings: true,
sOptionName: 'collapse_newslines',
sSessionVar: 'e7f851d41bbe',
sSessionId: '787d868b008335e583bb754a37a2cef8'
},
oCookieOptions: {
bUseCookie: false,
sCookieName: 'newsupshrink'
}
});

var oMainHeaderToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: true,
aSwappableContainers: [
'inner_section',
],
aSwapImages: [
{
sId: 'upshrink',
srcExpanded: smf_images_url + '/upshrink.png',
altExpanded: 'Shrink or expand the header.',
srcCollapsed: smf_images_url + '/upshrink2.png',
altCollapsed: 'Shrink or expand the header.'
}
],
oThemeOptions: {
bUseThemeSettings: true,
sOptionName: 'collapse_header',
sSessionVar: 'e7f851d41bbe',
sSessionId: '787d868b008335e583bb754a37a2cef8'
},
oCookieOptions: {
bUseCookie: false,
sCookieName: 'upshrink'
}
});

var oFooterContentToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: false,
aSwappableContainers: [
'footer_content',
],
aSwapImages: [
{
sId: 'footerupshrink',
srcExpanded: smf_images_url + '/upshrink.png',
altExpanded: 'Hide footer',
srcCollapsed: smf_images_url + '/upshrink2.png',
altCollapsed: 'Show footer'
}
],
oThemeOptions: {
bUseThemeSettings: true,
sOptionName: 'collapse_footer',
sSessionVar: 'e7f851d41bbe',
sSessionId: '787d868b008335e583bb754a37a2cef8'
},
oCookieOptions: {
bUseCookie: false,
sCookieName: 'footerupshrink'
}
});

// Begin jQuery section.
$.fn.ready(function() {

// Smooth scroll to top.
$("a[href=#skipnav_top]").on("click", function(e) {
e.preventDefault();
$("html,body").animate({scrollTop:0}, 1000);
});

// Smooth scroll to bottom.
$("a[href=#bot]").on("click", function(e) {
e.preventDefault();
$("html,body").animate({scrollTop:$(document).height()}, 1000);
});

$('#main_menu_hide').hide();

$("#main_menu_show").on("click", function(e) {
e.preventDefault();
$('div.menu_closed').addClass('menu_open');
$('#main_menu_show').hide();
$('#main_menu_hide').show();
});

$("#main_menu_hide").on("click", function(e) {
e.preventDefault();
$('div.menu_open').removeClass('menu_open');
$('#main_menu_hide').hide();
$('#main_menu_show').show();
});
});

// ]]></script>

<a id="bot"></a>
</body></html>
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 06:09:51 PM
Oh yeah and if you feel like it, you can knock the height back to 132px here:

#blocksbox li.avatar {
height: 162px;
}


It should be on Line 4006. I sized it for avatars up to 150 high, and I notice you're using a 120 max on your site, so this would just clean up the memberlist slightly (make it a bit more compact).
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 06:32:15 PM
Ok, thinking about this a bit. You have two mods that want to call jQuery, and you want to run those site-wide of course. It'd also be good if this theme could be open slather since the more feedback the better.

So, best option for your site looks to be editing index.template.php so this theme doesn't call jQ at all, and the jQ stuff this theme wants to run is called after one of the mods has pulled the library in. This should work.

The trick is going to be figuring out which mod tries to call what on which pages, and where in what templates, so all bases are covered. Once that's figured out it should be easy to have this theme running nicely with your mods.

My gut is telling me that the best option is likely to be disabling the who mod's call for jQ 1.11 down the bottom of the template, and editing the Fancybox mod to call jQ 1.11 up in head. This should cover everyone, providing Fancybox is happy with jQ 1.11 instead of its original jQ 1.8. If it's working now, then it's obviously fine, so this plan is gonna work. :)

We can tee up a time when we both have brains and time, then I can throw edited files at you if you like.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 11, 2015, 09:41:03 PM
Ok, I have had a really weird occurrence, but I think I have a temp fix for it.
After applying the patch, I started getting a new error in the log for group_id being undefined.  I tried adding a string into ThemeStrings.english.php to see if the error would go away-  $txt['group_id'] = 'Group ID';
The errors still persisted. I took a wild chance and added the same to the default theme's Modifications.english.php and the errors stopped.  go figure.  ???
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Deaks on January 11, 2015, 09:54:26 PM
curious if you planning on leaving the hardcoded in index.template.php line 210 :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 10:26:39 PM
Line 210 of index.template.php is this one:

$body_class[] = 'topic_'. $context['current_topic'];

Yes, I am planning on leaving it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Deaks on January 11, 2015, 10:29:40 PM
where you looking cause 210 says this

<a href="#skipnav" id="skipnav_top">Skip navigation</a>

their is 1 more bit of hardcoded but need to check if its in default or cause of you :P

Also theme_info is missing

<version>2.0.9</version>
or something like that :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 10:33:12 PM
I'm looking in the current version of the template on my local. You aint. Things are still in flux, and several features have been added since I posted that zip.

So, if you want to be helpful post the code that you think is problematic so I can look for that.

Anyway, yes, now that you have actually posted the code so I can see what you are talking about, of course I will change it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Deaks on January 11, 2015, 10:34:40 PM
see :P

Anyway besides for that and the version I dont see any issues under quick look :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 10:38:33 PM
Good. I've fixed it already. Incidentally, what was the other bit of hardcoded text?
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Deaks on January 11, 2015, 10:46:22 PM
calander.template.php line 803

But its also in the default theme so no need to worry about it :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 10:47:57 PM
See I threw in admin options for calling jQuery yesterday, as well as user options for choice of hover or click operation of drop menus. So that's this pile of stuff up in <head>.

if(empty($settings['jquery_source']) || $settings['jquery_source'] == 0)
{
echo '
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>';
}
elseif($settings['jquery_source'] == 1)
{
echo '
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>';
}
elseif($settings['jquery_source'] == 2)
{
echo '
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery_1.11.2.min.js"></script>';
}

// Testing click menus.
if (!empty($options['use_click_menu']))
{
echo '
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/superclick.hoverIntent.theme.min.js"></script>
<script type="text/javascript"> $(document).ready(function() { $("ul.dropmenu").superclick(); }); </script>';
}
else
{
// Testing hover menus.
echo '
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/superfish.hoverIntent.theme.min.js"></script>
<script type="text/javascript"> $(document).ready(function() { $("ul.dropmenu").superfish(); }); </script>';
}


The skipnav stuff is now down on Line 230. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 10:49:09 PM
Quote from: Runic on January 11, 2015, 10:46:22 PM
calander.template.php line 803

But its also in the default theme so no need to worry about it :)

It's on Line 798 in my template. :D Yeah I think we can not worry about the ancient Easter eggs.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Deaks on January 11, 2015, 10:52:50 PM
yeh their are others but I know they are in default theme so nowt to worry about ill look again when you ready and give it full look over for you if you want :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 11:00:30 PM
Ok cool. Give it a day or two and I'll let you know. I've pretty much got my head around final features, barring some possible menu changes to make the gui better on phones, so should be able to sort it soon.

The main thing at the moment is getting the jQuery conflict kerfuffle sorted on Chalky's site so beta testing can continue. I've figured out a plan of attack for that.

The mod files responsible can be edited without fear of borking uninstall (if uninstall ever happens) since they're just straight extract/delete in the xml. So I'll whip those into shape and move my jQuery stuff after the headers from mods. That way this theme (with calling jQuery switched off), and all her other themes on the site, can run from the jQuery call the Fancybox mod throws in anyway. If Google CDN is ever blocked, just go into Apocalypse admin and call from jQuery CDN or local copy.

That can also be added into any other theme's index.template.php, and default's Settings.template.php, but given the chances of Google getting blocked I'll leave that up to her. I have enough to deal with already. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 11:03:49 PM
Quote from: busterone on January 11, 2015, 09:41:03 PM
Ok, I have had a really weird occurrence, but I think I have a temp fix for it.
After applying the patch, I started getting a new error in the log for group_id being undefined.  I tried adding a string into ThemeStrings.english.php to see if the error would go away-  $txt['group_id'] = 'Group ID';
The errors still persisted. I took a wild chance and added the same to the default theme's Modifications.english.php and the errors stopped.  go figure.  ???


I have no idea what is going on there. Will wait and see if anyone else gets the same thing.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 11, 2015, 11:11:09 PM
I spoke too soon. :)  On the test site, that worked for a few minutes (it seemed), Now the undefined index error is back.
  http://www.testsite.busterone.net/index.php?topic=1.0   
8: Undefined index: group_id
File: /homepages/xx/xx/htdocs/busterone/testsite/Themes/Apocalypse_TK1/Display.template.php
Line: 247

I am baffled too, but it isn't important right now anyway, the jQuery conflict is.  A few undefined errors can wait.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 11, 2015, 11:28:43 PM
If worst comes to worst it's only a few pretty group names in a few places, so I can just remove it from the templates entirely. That'll fix it. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 12:13:52 AM
So here's a different trick. Chalky reckons that Firefox has terrible slow and jaggy scrolling with this theme, and that Chrome was fine. When I test it on my box, Firefox is fine on local or at her site, but Chrome is crap. :D Dunno if she got them mixed up due to lack of coffee but I have a plan.

This stuff is usually due to elements that use fixed positioning. Obvious thing is to change fixed elements to absolute for jaggy browsers, which for this theme only requires a few bytes of CSS. That's not worth an extra file and extra http call, so I did this:

<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', ' id="html', $context['theme_variant'], '">
<head>


And this:

/* @SCROLLING */
/* Scrolling variant, with absolute instead of fixed positioning for a */
/* few elements. This should fix any jaggy scrolling on some browsers. */
#html_scrolling #toplink, #html_scrolling #botlink,
#html_scrolling #upshrink, #html_scrolling #upper_section {
position: absolute;
}
#html_scrolling #top_section {
position: static;
}
@media screen and (max-width: 32em) /* Equates to 480 */
{
#scrolling .main_menu_toggle {
position: absolute;
}
}


There ya go. Instant theme variant, all in one CSS file, with no images folder of its own, that changes layout instead of colours. Default variant is called "Fixed" at the moment. Second variant is called "Scrolling". If anyone has scrolling problems, select scrolling variant. Easy. Works. :)

Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 01:24:56 AM
Right, want me to fix that effing Who.template.php error, do you? Ok, it's fixed. Runs without errors now. There ya go. :P

Oh yeah, also splits the online list into a nice line of groovy blocks for members, just like the memberlist and buddies list (calls the same CSS of course) and a separate table below for guests.

Fixed. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: DasVON on January 12, 2015, 02:18:39 AM
Awesome Theme ...  8)

      Release Date ??   :o
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 02:28:25 AM
Well Busterone and Chalky and Bryan have already been playing with the beta, and you're welcome to as well if you like. It might be better to leave it a couple of days before taking it live though, when it'll be nearer to RC. I've fixed some things and thrown in some more useful features. The existing beta is quite safe to run as a plaything though.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 12, 2015, 03:42:51 PM
Ok I'm here!  Home from work, fed myself and cleaned the piggies.  Looks like I have some catching up to do!

Quote from: Antechinus on January 11, 2015, 06:00:20 PM
w00t! Got the bastard! That who mod is calling jQuery too. Here's the page source for the in-topic pages. I've snipped most if it. The relevant line is 488 if you grab it from your own browser.


<script type="text/javascript">
var jquery_url = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
var atwho_url = "http://chalkcat.com/Themes/default/scripts/jquery.atwho.js";
var smf_sessid = "787d868b008335e583bb754a37a2cef8";
var smf_sessvar = "e7f851d41bbe";
</script>
<script type="text/javascript" src="http://chalkcat.com/Themes/default/scripts/mentions.js"></script>
<link rel="stylesheet" type="text/css" href="http://chalkcat.com/Themes/default/css/mentions.css" /><script type="text/javascript" src="http://chalkcat.com/Themes/default/scripts/postbitmenu.js"></script><div id="postbitmenu_71217" class="postbitmenu"><div class="catbg">Michael</div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=profile;u=25" rel="nofollow">View Michael's profile</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=pm;sa=send;u=25" rel="nofollow">Send a personal message to Michael</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=emailuser;sa=email;msg=71217" rel="nofollow">Send an email to Michael</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=profile;area=showposts;u=25" rel="nofollow">View Michael's posts</a></div><div class="pbm_item windowbg"><a href="http://chalkcat.com/index.php?action=buddy;u=25;e7f851d41bbe=787d868b008335e583bb754a37a2cef8">Add Michael to Buddy List</a></div></div>
</div>
</div>
<div id="footer_section">
<a href="#skipnav_top" id="toplink" title="Top"><span>Top</span>↑</a>
<ul class="smf_footer_links wrapper">
<li class="copyright">
<span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;"><a href="http://chalkcat.com/index.php?action=credits" title="Simple Machines Forum" target="_blank" class="new_win">SMF 2.0.9</a> |
<a href="http://www.simplemachines.org/about/smf/license.php" title="License" target="_blank" class="new_win">SMF &copy; 2014</a>, <a href="http://www.simplemachines.org" title="Simple Machines" target="_blank" class="new_win">Simple Machines</a><br /><a href="http://www.createaforum.com" target="_blank">Simple Audio Video Embedder</a>
</span></li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="Valid XHTML 1.0!">XHTML</a></li>
<li><a id="button_wap2" href="http://chalkcat.com/index.php?wap2">WAP2</a></li>
<li class="theme_author"><a href="http://custom.simplemachines.org/themes/index.php?action=profile;u=129726" target="_blank" class="new_win">Apocalypse theme</a></li>
</ul>
</div>

<script type="text/javascript"><!-- // --><![CDATA[

// Create the news lines toggle.
var smfNewsFadeToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: false,
aSwappableContainers: [
'newslines_container'
],
aSwapImages: [
{
sId: 'newsupshrink',
srcExpanded: smf_images_url + '/collapse.png',
altExpanded: 'Hide news',
srcCollapsed: smf_images_url + '/expand.png',
altCollapsed: 'Show news'
}
],
oThemeOptions: {
bUseThemeSettings: true,
sOptionName: 'collapse_newslines',
sSessionVar: 'e7f851d41bbe',
sSessionId: '787d868b008335e583bb754a37a2cef8'
},
oCookieOptions: {
bUseCookie: false,
sCookieName: 'newsupshrink'
}
});

var oMainHeaderToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: true,
aSwappableContainers: [
'inner_section',
],
aSwapImages: [
{
sId: 'upshrink',
srcExpanded: smf_images_url + '/upshrink.png',
altExpanded: 'Shrink or expand the header.',
srcCollapsed: smf_images_url + '/upshrink2.png',
altCollapsed: 'Shrink or expand the header.'
}
],
oThemeOptions: {
bUseThemeSettings: true,
sOptionName: 'collapse_header',
sSessionVar: 'e7f851d41bbe',
sSessionId: '787d868b008335e583bb754a37a2cef8'
},
oCookieOptions: {
bUseCookie: false,
sCookieName: 'upshrink'
}
});

var oFooterContentToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: false,
aSwappableContainers: [
'footer_content',
],
aSwapImages: [
{
sId: 'footerupshrink',
srcExpanded: smf_images_url + '/upshrink.png',
altExpanded: 'Hide footer',
srcCollapsed: smf_images_url + '/upshrink2.png',
altCollapsed: 'Show footer'
}
],
oThemeOptions: {
bUseThemeSettings: true,
sOptionName: 'collapse_footer',
sSessionVar: 'e7f851d41bbe',
sSessionId: '787d868b008335e583bb754a37a2cef8'
},
oCookieOptions: {
bUseCookie: false,
sCookieName: 'footerupshrink'
}
});

// Begin jQuery section.
$.fn.ready(function() {

// Smooth scroll to top.
$("a[href=#skipnav_top]").on("click", function(e) {
e.preventDefault();
$("html,body").animate({scrollTop:0}, 1000);
});

// Smooth scroll to bottom.
$("a[href=#bot]").on("click", function(e) {
e.preventDefault();
$("html,body").animate({scrollTop:$(document).height()}, 1000);
});

$('#main_menu_hide').hide();

$("#main_menu_show").on("click", function(e) {
e.preventDefault();
$('div.menu_closed').addClass('menu_open');
$('#main_menu_show').hide();
$('#main_menu_hide').show();
});

$("#main_menu_hide").on("click", function(e) {
e.preventDefault();
$('div.menu_open').removeClass('menu_open');
$('#main_menu_hide').hide();
$('#main_menu_show').show();
});
});

// ]]></script>

<a id="bot"></a>
</body></html>




W00t!!!  Which file is that????









Quote from: Antechinus on January 11, 2015, 06:32:15 PM
Ok, thinking about this a bit. You have two mods that want to call jQuery, and you want to run those site-wide of course. It'd also be good if this theme could be open slather since the more feedback the better.

So, best option for your site looks to be editing index.template.php so this theme doesn't call jQ at all, and the jQ stuff this theme wants to run is called after one of the mods has pulled the library in. This should work.

The trick is going to be figuring out which mod tries to call what on which pages, and where in what templates, so all bases are covered. Once that's figured out it should be easy to have this theme running nicely with your mods.

My gut is telling me that the best option is likely to be disabling the who mod's call for jQ 1.11 down the bottom of the template, and editing the Fancybox mod to call jQ 1.11 up in head. This should cover everyone, providing Fancybox is happy with jQ 1.11 instead of its original jQ 1.8. If it's working now, then it's obviously fine, so this plan is gonna work. :)

We can tee up a time when we both have brains and time, then I can throw edited files at you if you like.


I'll be here for another couple of hours now if you want to start chucking things at me or after about 4.30pm GMT tomorrow, Thursday or Friday.


My members are now playing with it but most of them aren't used to change so for now they're mostly missing the mods that I haven't installed on it yet  ;D

Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 03:46:13 PM
ROFL @ members. Ok, cool. I'm awake now. Just been browsing a bit before brain was up to making coffee. Will grab coffee and start with the files. Already got them edited.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 12, 2015, 04:04:14 PM
Excellent!!

A couple of things have come up already.  Two of my members report slow and jumpy scrolling on Chrome v. 39.0.2171.95 m, I do now also but not as slow and jumpy as on my Firefox.

"Quote" button goes to quick reply rather than full reply and I can't find a setting to change that.

In the "member options" area, turning off Quick Reply does not hide Quick Reply - it's still there.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 12, 2015, 04:14:30 PM
Just so we don't forget I've had to undo this edit because my Fancybox had stopped working (I was only checking the mobile menu at the time, not Fancybox  ::) )

Quote from: Antechinus on January 10, 2015, 06:23:31 PM
Ok, I grabbed a copy of the Fancybox mod and that's calling jQ 1.8.1 from a local source. This is going to cause problems with any jQ stuff when running Apocalypse.

1.8.1 is out of date now anyway, and with any luck Fancybox should work just fine with later versions of jQ. Suggestion is to open Subs-FancyBox.php and comment out the call for jQ there, on Line 31.

Note that you have to do a slight syntax change as well as the basic // by moving the ' after = to Line 32.

Code (Find) Select
$context['insert_after_template'] .= '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


Code (Replace) Select
$context['insert_after_template'] .=
//<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
'<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


ETA: Oh and once you've done that, you should be able to uncomment the Superclick menu on Line 122 and it should work.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 04:51:06 PM
Ok this is getting towards the stage where a TK2 is in order. :D

The theme on  local now has an admin switch for turning the theme's call for jQuery on and off, which would save you commenting it out. Would also be a good way to test stuff. Other good thing about it is if Google CDN is ever blocked for any reason, you'll  be able to switch the theme straight to one of the other options so everything will keep working.

So I'll give you another copy of index.template.php and Settings.template.php to get that running. The new setting is just a dropdown/select near the top of the theme settings.

The mod files I've edited are Sources/core/Subs-FancyBox.php and Sources/Mentions.php. These are the only two that want to call jQuery, AFAICT. The first one is called first, up in the "// Output any remaining HTML headers. (from mods, maybe?)" thingy that doesn't tell you what it's actually doing. Second one is called at the bottom of the template via hooks.

What I think is that if the call for jQ in the first one is updated to call the latest version, and the call for jQ in the second one is removed, and the theme's call for jQ is switched off, then there should only be one functioning call to the library, which should suffice to run everything without conflicts. So, that's how I've edited the Sources files.

Code (/core/Subs-FancyBox.php) Select
$context['insert_after_template'] .= '
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/helpers/jquery.fancybox-buttons.js"></script>';


Code (Mentions.php) Select
$context['insert_after_template'] .= '
<script type="text/javascript">
var atwho_url = "' . $settings['default_theme_url'] . '/scripts/jquery.atwho.js";
var smf_sessid = "' . $context['session_id'] . '";
var smf_sessvar = "' . $context['session_var'] . '";
</script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/mentions.js"></script>
<link rel="stylesheet" type="text/css" href="' . (file_exists($settings['theme_dir'] . '/css/mentions.css') ? $settings['theme_url'] : $settings['default_theme_url']) . '/css/mentions.css" />';


This should be a good solution because it will work site-wide on any of your themes. If I just stopped the mods calling jQ it'd work on Apocalypse, but not on the other themes that don't call jQ by default.

There have been other changes as well. I've added a second variant which people can select to fix the jaggy scrolling on some browsers. It just changes the fixed elements to absolute so they scroll with the page. That can be selected in profile. Can make a more nifty changer later. The variants required images folders, but the contents are the same as the images of the same name in the main images folder, so if there are any corruption on extraction issues just overwrite the variant images again.

Also fixed the z-index issue with the drop menu content sitting over the top bar, and a few other things. With your ecl notice, it was sitting behind the top bar of this theme. I checked out the source for it and it doesn't seem to have a z-index specified, AFAICT. I've kept all this theme's z-index stuff under 88, so if you throw 99 at your ecl CSS it should be front and centre.

Had an idea about pagination.css too. Since it's being forced anyway, I suggest you use that file to hold any small personal tweaks you want, like the change in admin group colour on Display.template.php that I noticed. If you keep them in pagination.css they'll be easy to find and edit, will override the earlier declarations in index.css, and they won't get overwritten by theme updates. :)

Anyway files attached. Feel free to look through them and ask questions. Redundant attachments removed.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 05:02:07 PM
Quote from: Chalky on January 12, 2015, 04:14:30 PM
Just so we don't forget I've had to undo this edit because my Fancybox had stopped working (I was only checking the mobile menu at the time, not Fancybox  ::) )

Quote from: Antechinus on January 10, 2015, 06:23:31 PM
Ok, I grabbed a copy of the Fancybox mod and that's calling jQ 1.8.1 from a local source. This is going to cause problems with any jQ stuff when running Apocalypse.

1.8.1 is out of date now anyway, and with any luck Fancybox should work just fine with later versions of jQ. Suggestion is to open Subs-FancyBox.php and comment out the call for jQ there, on Line 31.

Note that you have to do a slight syntax change as well as the basic // by moving the ' after = to Line 32.

Code (Find) Select
$context['insert_after_template'] .= '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


Code (Replace) Select
$context['insert_after_template'] .=
//<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
'<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


ETA: Oh and once you've done that, you should be able to uncomment the Superclick menu on Line 122 and it should work.

Bugger. Just looked online and FancyBox won't run with up to date jQuery. :P What's more making it work by using jQuery's no conflict mode to load two versions would require a rewrite of the mod anyway, due to the necessary loading order (http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/).

If a rewrite of the mod is going to be required any effing way, it'd make more sense to load up FancyBox 2, which will run with up to date jQ.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 05:25:05 PM
Ok, for the moment, since I'm trying to debug a theme rather than debug out of date mods, it'll have to be no FancyBox on this theme. IMO the menu working is more important than FancyBox working. This theme will expand attached images on the page anyway, without opening a pop-up window. They'll just fit in however much horizontal space is available, scaled to fit.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 05:42:32 PM
****** I hate hooks. Give me template edits any day of the week. At least you can control the bastards rather than having crap forced everywhere. ::)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 12, 2015, 05:59:45 PM
I don't use FancyBox on my site. I don't have any jQuery mods either, but I used the zip for chalky minus the subs stuff. 
I believe you nailed the scrolling issue. I haven't had any scroll issues myself running Win 8.1 64 bit, with IE or FF.  I am experimenting with 64 bit Waterfox since Mozilla has been dragging their feet for a 64bit FF.  It has shown no lag for me either.   I suspect some of that is the broadband speed into my house as well. 
Some of my users had reported earlier today and last night that they noticed an occasional scroll lag and some text input lag while typing in a post.   I just used the new templates and will await some response. So far, only one of the earlier ones to report it says that they see no lag now, so I await some more input, but it looks good so far.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 06:06:04 PM
Ok, thanks to Arantor I now know how to disable FancyPox on this theme only, without borking it anywhere else. Will sort a new file for it.

(I really do not want to have to write a whole Fancybox 2 integration in the next ten minutes :P )
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 12, 2015, 06:09:14 PM
Quote from: Antechinus on January 12, 2015, 06:06:04 PM
Ok, thanks to Arantor I now know how to disable FancyPox on this theme only, without borking it anywhere else. Will sort a new file for it.

(I really do not want to have to write a whole Fancybox 2 integration in the next ten minutes :P )

Ah bless you!!  Thank you  :) :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 06:26:40 PM
Oh bugger, forgot the other one would need conditionals for this too.

With this one and the previous one loaded, all other themes should be running the way they were originally. Apocalypse should have Fancybox disabled, but Mentions working, and no jQ conflicts if the theme settings to call jQ is enabled.

Redundant attachments removed.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 06:28:46 PM
Bugger. Typo in Line 88 due to dodgey mouse. Here.

Redundant attachments removed.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 12, 2015, 06:37:28 PM
Quote from: Antechinus on January 12, 2015, 06:17:03 PM
Chalky, try this one. Also, turn jQuery on to Google in the theme settings. Hopefully this will make everything except FancyBox work on Apocalypse, but not prevent Fancybox working on other themes.

Not quite  :P

Parse error: syntax error, unexpected '}' in /home/chalkcat/public_html/Sources/Subs-FancyBox.php on line 88


Your edited Mentions.php prevents the mention mod from auto-suggesting names as you type, but the rest of the mod appears to still function correctly as far as I can tell.  However the Apocalypse menu is still paralysed on my iPhone....  Fingers crossed for the fancybox fix  :)


Edit:  I have removed the extra parenthesis on line 88 of Subs-FancyBox.php but the Apocalypse menu is still paralysed on iPhone and FancyBox has stopped working on our usual Actualism theme.

Sorry I'm driving you nuts now, aren't I?  :-X  And I'm going to have to go to bed in a minute - work tomorrow  :(
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 06:39:09 PM
Yeah see the post I just made at your place. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 12, 2015, 06:41:13 PM
Quote from: Antechinus on January 12, 2015, 06:28:46 PM
Bugger. Typo in Line 88 due to dodgey mouse. Here.

Ok so it wasn't a missing paren  :P  Tried this file, same result, crippled FancyBox and paralysed menu on iPhone  :(
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 12, 2015, 06:43:37 PM
Go to sleep. I'll play with it on local. :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Chalky on January 12, 2015, 06:46:00 PM
Night night  :)
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 12, 2015, 11:22:18 PM
I noticed another small glitch in who's online display. I took a screenie of it. 
On the index, it says that there are 5 guests online, when I clicked on it, the who template only displays one of the guests. 

Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 13, 2015, 12:48:44 AM
Oh bugger. Well I'll figure that one out later. That's what you get for only being able to rack up one guest on local.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 13, 2015, 04:26:08 PM
Ok, next version. There are two packs here.

The one most people want is Apocalypse TK2. This is the standard version. It's the last file in the attachments below.

@Chalky: the one you want is Apocalypse CC2, which has tweaks specifically for mods on your site.
You will also want the Chalky_Sources zip, which has an edited Mentions.php to make it check for previously loaded instances of jQuery.

If anyone still wants the trial banner pack, it's back in this post (http://www.simplemachines.org/community/index.php?topic=524324.msg3781297#msg3781297).

I'm not doing a changelog, but this version should be a fair bit better than TK1. Bug reports are welcome.

Note that if your browser cannot handle fixed-positioned elements, and responds with poor scrolling, you can now select a "Scrolling" variant at the right end of the user menu, just below the main menu. Variant selection here is session-dependent, for people who change devices. Permanent variant selection is still available in your profile.

I've also attached those images which seem prone to corruption on extraction. Haven't had a chance to make news ones yet. If any others are noticed, let me know. :)

ETA: Removed the Chalky files to save confusion, since she has them now.

See this post down the page for latest bugfix patches: http://www.simplemachines.org/community/index.php?topic=524324.msg3782988#msg3782988
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 13, 2015, 05:05:44 PM
Oops. Forgot the expand and collapse .png versions. I think they get corrupted because they were made by just saving the old gifs as .png. Will look into it.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 13, 2015, 05:59:06 PM
Nice work.  :)
I see you eliminated the undefined errors as well. I didn't look to see what you did, but they are gone. The whos online is rocking as it should too.  I have been away all day, so I just checked in and I did have a couple that had mentioned lag errors earlier today. I pointed them to the variants and will see what happens. I never see any lags myself, so it could be on their end as well.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 13, 2015, 07:43:42 PM
Which reminds me, I did end up ditching the fancy coloured membergroups from Display, Profile, and PM templates because that undefined you were getting started showing up on my local. No idea why it took so long, but at the moment it's something I didn't want to debug.

And I've had a thought about debugging too. I think the theme's markup is 99% there, and any changes are most likely to be CSS only. I might write a small mod package that only inserts a call for a file called custom.css after the call for index.css in index.template.php, and creates that file in .../css. Then any bug fixes can just be added there for the moment, which will prevent sites being turned upside down on a regular basis. That way you'd only want a full update once the thing is stable.

It'd also mean the humungous beast known as index.css could be safely minified, with personal tweaks added to custom.css. Not an original idea, but it's starting to make sense.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 13, 2015, 08:35:42 PM
Bother. I missed one in PersonalMessage.template.php. I thought I'd got it. :P

Not to worry. Tonight I'll whip up a mod that will do the required edit without the admin having to pig around in the PHP, or overwrite the template. Once this mod is installed you'll be able to delete it from your packages list, since there will never be any need to uninstall it. If you wish to uninstall the theme later, the contents of the template won't affect this.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 14, 2015, 05:54:59 AM
Ok, patches. These install via your package manager, and will only install to the Apocalypse TK2 theme. Won't touch any other themes, or Sources files.

Once installed, the package can be deleted from your packages list as it will never need to be uninstalled. Check the readme for notes about custom.css.

If there are any question or problems, please ask. Changelog goes like this:

1/ Adds a call for custom.css to index.template.php, just after index.css is called, and creates the new file.

2/ Makes a markup tweak in MessageIndex.template.php, just to make responsive a bit easier.

3/ Fixes the undefined error in PersonalMessage.template.php that I missed earlier today.

4/ Recent.template.php gets the same markup tweak as MessageIndex, but in two places (or three for Chalky) for the same reason.

5/ Fix a minor typo in languages/ThemeStrings.english.php

6/ Add some minor tweaks to index.css to sort out select text colour on iPhone, and a bit of positioning stuff for responsive.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 14, 2015, 04:42:19 PM
And Chalky found another bug. :D I'll fix this properly in the next patch, but until then you can add this to custom.css (I knew it would come in handy).

@media screen and (max-width: 52em) /* Equates to 800 */
{
#personal_messages {
float: none;
width: auto;
position: static;
margin: 0;
padding: 0;
}
#personal_messages .poster {
float: left;
width: 42%;
position: relative;
text-align: left;
margin: 0 0 6px 0;
padding: 0;
}
#personal_messages .poster .reset {
position: relative;
}
#personal_messages li.avatar {
position: absolute;
left: -95px;
}
}

@media screen and (max-width: 32em) /* Equates to 480 */
{
#personal_messages .poster {
float: none;
width: auto;
}
}
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 14, 2015, 05:38:12 PM
Fix is done. No reports of anything out of the ordinary from my end yet.  :)
-except a certain banned member from here that suddenly dropped in after 2 years of absence to attempt to get me to set up some sort gritoadmix that I continually ignore. (He wasn't happy that there is not a main menu link to profile and PMs.) I personally like it the way it is.  I have enough main menu buttons already.   :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 14, 2015, 05:40:57 PM
Yeah I figure most people end up with too many buttons, and with the top bar having the profile/pm links, and with all of your posts having them, plus the memberlist and who's online list, there's kinda enough profile and pm links floating around.

They're only hidden via CSS though, so it can easily be reversed. Just add #button_profile, #button_pm {display: inline-block;} to custom.css if you want them back.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 15, 2015, 09:18:01 PM
Ok, another patch. Same deal: installs via package manager on this theme only.

Quote from: ReadmeGreetings to all masochistic beta testers
This is the Apocalypse_TK2_patch_2 bugfix

index.template.php:
1/ Adds donkey-proof comment re variant names, in case someone messes with them.
2/ Rewrites body id array stuff to include !empty failsafe, and more options.

index.css:
1/ Adds a couple more tweaks for select backgrounds and text colour on Webkit.
2/ Far less convoluted CSS for BBC buttons, now that I'm getting sensible.
3/ Fixes some media query bugs that Chalky found (and clears fixes from custom.css).


To-do list, for next patch: minor bug fix to topics index pages, ditch top/bottom buttons on phones, set top bar to absolute instead of fixed for phones, minor markup revamping in index.template.php.


This mod only installs to Apocalypse TK2. None of your other themes will be touched, nor will any of your Sources files. Once this mod is installed you can delete the package from your packages list since it will never need to be uninstalled.

If you have any questions, ask in [Preview/WIP] Apocalypse theme at SMF.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 15, 2015, 09:40:51 PM
Done.  No bugs found here. Things are pretty slow at the site since before the holidays. I am starting to wonder if they all got drunk and thrown in jail.  :P
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 15, 2015, 09:44:38 PM
Could well be. Either that or New Year was one hell of a party and they're still sleeping off the hangover.
Title: Re: [Preview/WIP] Apocalypse theme
Post by: busterone on January 15, 2015, 09:49:54 PM
O yeah. Must have been a great party.   :D
My site traffic has been slowly tapering off for the last year, but there is a core group of 20 or so that normally post every day.  Even the core group has been scarce for about 3 to 4 weeks.  I can't complain. The site has survived since 2007, and has had several ups and downs. It will continue. 
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 15, 2015, 09:55:30 PM
Yeah people tend to come and go from their favourites. I have several strewn around the web, and they all get intermittent hammering. :D
Title: Re: [Preview/WIP] Apocalypse theme
Post by: Antechinus on January 16, 2015, 01:42:44 PM
More patches will be on the way soon. Current to-to list for the theme goes like this:

/* ------------------------------ */
/* Apocalypse theme - stuff to do */
/* ------------------------------ */

index.template.php cleaning up:

1/ Top/bottom of screen button redundant on iOS. Target to remove on iOS (and Android?).

2/ In conjunction, top bar and menu toggle should be absolute, not fixed.

3/ Revamp some wrapper div id's to make more sense with above (ie: Scrolling default).

4/ Add profile setting to select fixed top bar and up/down buttons.

5/ Remove existing variants, and leave variant functions open for basic color variants.

6/ Remove hoverIntent from superfish.hoverintent.theme.min.js

7/ Remove remaining SMF theme.js functions from both minified files.

8/ Deprecate Function smc_toggleImageDimensions()
Append minified function smf_addButton() to the end of script.js

9/ Edit calls for the two minified files in index.template.php to:

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/superclick.min.js"></script>';

And
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/superfish.hoverintent.min.js"></script>';

10/ Simplify banner CSS. Try setting radii in % instead of px, for responsive auto scaling.
Forget fancy positioning of forum name and site slogan (better for CSS tutorial than for live site).

11/ Ditch the old site slogan code and forum name code. Provide default banner.
   
12/ Create theme-specific setting for banner url (so newbies can change banner without requiring FTP or cPanel).

13/ Ditch the antique forum width setting.
It's not compatible with good typography or responsive design. Use CSS only.

14/ Ditch the IE=Edge meta tag. Another antique.

15/ Fix this (ahem):

<link rel="icon" type="image/png" href="http://127.0.0.1/SMF_20x/favicon.png" />';

I think it should be:

<link rel="icon" type="image/png" href="', $scripturl, '/favicon.png" />';

Test the above to make sure.

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

14/ Implement better banner rotation script, and return news lines to standard.

Will require changes to index.template.php, Settings.template.php,
Help.template.php, ManageNews.template.php, ThemeStrings.english.php
and HelpApocalypse.english.php.

15/ While doing the above, ratonalise the footer block conditionals to give
more clarity and flexibility. Maybe 6 custom blocks, placeable top or bottom.

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

Other templates:

1/ Message/recent still bugged when topic title breaks to two lines. Bluddy Webkit :P.

2/ Sidebar menu should really be one continuous ul, so SF/SC auto close works all the way down.

3/ Message index still needs minor tidying up.

4/ Polls should be more responsive.

5/ Ditto for moderation centre.

6/ Consider more slideout/pushdown/icon/whatever menus for various places (feedback).

7/ More WAI-ARIA roles for menus, etc, to improve a11y. Tied in with 6/ feedback.

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

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

Minor CSS stuff:

1/ Sort out fallback for CSS3 gradients - flat colour only.

2/ Think about transitions on top level menu buttons.

3/ Sort RTL CSS, once all responsive LTR is done.

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

Images:

1/ Fix corrupted gif icons.

2/ Make 0.7 opacity core features icons. Defaults too bright against dark background.
   Also do quick tasks.

   NOTE: Requires two edits to Admin.template.php,
   due to 2.0.x's brilliant support of custom theming. :P
   Edits required on Line 101 and Line 1322.
   
3/ Re the above: should also fix inline styles for "Latest stuffz" icons on
   Line 159 of Themes.template.php and Line 862 of Packages.template.php.
   
   Give those two icons a class somehow, and sort the styles in admin.css.

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

4/ Change as many gifs, as feasible, to png.

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







Title: Re: [WIP/Public beta] Apocalypse theme
Post by: ovidole91 on January 17, 2015, 04:45:11 AM
hi
i have a prowblem i set the  theme for Fixed  on the main page,  but  when i am on the forum on a subject  there is the width that is too large

look at those images:
http://prntscr.com/5tdxko

http://prntscr.com/5tdxsh

and also i can't the butons with bb codes  when i want ro reply in a topic

http://prntscr.com/5tdy3j
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 17, 2015, 05:44:35 AM
Need more information. It's no good giving bug reports that just say "Hey it doesn't work". I need to know what browser you're using. A live link to the problem is also good, if possible. I need to know which patches you have installed, if any. I also need to know how you have set up your portal, since the footer says you are running one.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: ovidole91 on January 17, 2015, 07:02:46 AM
i use Opera browser last version
i have 32 packs installed
there are shown in these 3 printscreens

http://prntscr.com/5tj2i0

http://prntscr.com/5tj2ms

http://prntscr.com/5tj2pg


I also have smf gallery PRO installed on my smf forum
I am using last version of smf 2.0.9

I am using last version of Ez Portal

my websites with the problem on that theme  is : www.farmingsimulator.info

and there is also another problem

if i want my website to  run  smootlly  i must to  click on scrolling every time when i acces my website


like in this image:

http://imgur.com/pYmVj5U



Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 17, 2015, 01:04:54 PM
Quote from: ovidole91 on January 17, 2015, 07:02:46 AMi use Opera browser last version

I just tried the theme on Opera on my local site. No problem there, so it must be related to one of your mods. I'll take a look at the coding for them.


Quotei have 32 packs installed
there are shown in these 3 printscreens

Ok, there is a second patch available for this theme. It has nothing to do with the problem you are getting, but you might as well install it anyway.


QuoteI also have smf gallery PRO installed on my smf forum
I am using last version of smf 2.0.9

I am using last version of Ez Portal

I was mainly wondering if you had portal sidebars set up, since the theme is not currently coded to work with them.


Quotemy websites with the problem on that theme  is : www.farmingsimulator.info

and there is also another problem

if i want my website to  run  smootlly  i must to  click on scrolling every time when i acces my website

Set Scrolling as the default variant in your profile, or in Admin if a lot of your members use Chrome or Opera. The current version of Chrome is bugged, and cannot handle fixed positioning on elements.

It's also bugged in other minor ways, but nothing serious as far as I know.

B the way, I am going to change the theme so it will be ok for Chrome/Opera by default, and may have the fixed top bar available as a user option.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 17, 2015, 07:55:32 PM
Ok people, another patch. This one does not fix every known issue. I'm just getting some of the small stuff out of the way now, before I forget.

Code (Changelog) Select

index.template.php:
1/ Removes IE-Edge meta tag (not required these days).
2/ Fixes favicon link.
3/ Deprecates forum width setting in admin, due to incompatibility with responsive.
4/ Updates CSS file suffixes for correct caching of patch CSS changes.
    NB: This will not affect admin.css. A hard refresh will be required in admin.
5/ Updates theme footer to add indication of patch level, for ease of support while in beta.
6/ Depecrates function smc_toggleImageDimensions() from old theme.js.
7/ Removes function smf_addButton() from minified plug-in files, and appends to script.js.
8/ Updates script.js file suffix for correct caching of patch javascript changes.
9/ Removes hoverIntent plug-in when running Superclick menus.
10/ Deletes old plugin files, and replaces them with new ones that have updated names and suffixes.
11/ Updates theme footer to add indication of patch level, for ease of support while in beta.   

Admin.template.php:
1/ Fixes a small bug in SMF 2.0.x, so that the theme can call its own images for some areas of admin.

Packages.template.php and Themes.template.php:
1/ Removes an inline style, and replaces it with a class.

admin.css:
1/ Adds new class .latest_fetch to replace inline style.

index.css:
1/ Adds width declaration to .wrapper and #inner_section, to replace deprecated setting.


NOTE: This patch creates two new javascript files to replace deprecated files. Since the two new files are created by PHP, your server may set them to be owned by "nobody". This is dependent on server config, but can result in the files not being editable by you.
   
If this happens, please upload the js_file_chmod.php script (available in the attachments here) to your forum root, then run it in your browser. This will CHMOD the two new javascript files to 755, after which you should be able to edit them or delete them if you ever need to.
   
Once this is done, delete js_file_chmod.php from your forum root, as leaving it in place is potentially a security risk.




I have also attached a zipped folder of updated .png's for some admin pages, as well as replacement gifs for the various icons which were getting corrupted when extracted from the theme zip.

The new gifs have been tested for extraction on my desktop, and seem to be fine. If they do not extract without corruption on your server, please let me know.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on January 17, 2015, 08:36:18 PM
done- no issues
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 17, 2015, 09:06:57 PM
I have a bad habit of testing the patches first. I should stop doing that, to give you some excitement.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on January 17, 2015, 09:47:00 PM
Indeed!
The only excitement I have had in a few days was my dog cornering a young raccoon in the backyard fence corner. By the time I realized what he was raising hell over and got out there, it was all over and too late. The poor raccoon didn't stand a chance.   :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 17, 2015, 11:20:28 PM
No problem. Let me know when you're really bored and I'll whip up a patch that totally screws your forum. With no uninstall xml, of course. Might as well do it properly.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on January 17, 2015, 11:39:10 PM
I think we can do without that one.  :)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 18, 2015, 02:25:28 PM
Ok guys (not including Busterone or Chalky):

I notice that the theme (http://www.simplemachines.org/community/index.php?action=dlattach;topic=524324.0;attach=239758) has now been downloaded 9 times.
The first patch (http://www.simplemachines.org/community/index.php?action=dlattach;topic=524324.0;attach=239769) has been downloaded 5 times.
The second patch (http://www.simplemachines.org/community/index.php?action=dlattach;topic=524324.0;attach=239822) has been downloaded 3 times, and
the third patch (http://www.simplemachines.org/community/index.php?action=dlattach;topic=524324.0;attach=239902) has been downloaded 6 times.

This does not make any sense. :P The later patches do not include the code changes in the first patch, nor does the third patch include the changes in the second patch. To get things updated you need to install all three patches, and any future patches, in the correct order.

I am doing it this way because it is easier for people who wish to try the theme out. If you would prefer to do it the hard way, where you have to install a whole new theme every time I update some code, then uninstall the old theme which would now be useless and totally unsupported, just let me know and I can do that.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Night09 on January 18, 2015, 07:55:04 PM
...Maybe its been installed in places that are used to broken bits? :P
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 18, 2015, 07:57:56 PM
Could be. :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Night09 on January 18, 2015, 08:38:16 PM
Quote from: Antechinus on January 18, 2015, 07:57:56 PM
Could be. :D

Put a warning check in 2 for 1 and 3 for 2 with a warning ' NO you cannot f***** skip a patch! ;)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on January 18, 2015, 08:48:22 PM
I suppose it is possible that a few of those 9 downloads have never been installed.  I used to be notorious for downloading 1.1.x themes to a folder on my HD for future testing or use, and forget about them. I would find them months later and then install them.  I don't miss those days whatsoever.  I had around 20 or so mods and about 16 themes at any given time. Template edits for every mod on every theme was extremely time consuming.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 18, 2015, 08:55:08 PM
Oh sure, but it's just funny that it's the second patch that most people seem to be missing, while they've mostly grabbed the first and third patches.

Anyway, that's their problem. :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on January 18, 2015, 08:55:38 PM
Quote from: Night09 on January 18, 2015, 08:38:16 PM
Quote from: Antechinus on January 18, 2015, 07:57:56 PM
Could be. :D

Put a warning check in 2 for 1 and 3 for 2 with a warning ' NO you cannot f***** skip a patch! ;)
Yeah I might do that from now on.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on January 18, 2015, 09:06:17 PM
O yea, the second patch is a mystery.  :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Worldwide7477 on February 27, 2015, 11:32:24 PM
I'm using 2.09 smf the theme installed great and the 1st patch went smooth but the 2nd patch will not install here is the pic in my smf any help with this would be great since i finally found a theme i really liked i checked the 3rd patch i did not install it but it did not show any errors so should be good to go for install.

There are no other mods or themes installed as of yet this is a fresh install

(http://i874.photobucket.com/albums/ab306/worldwide7477/Custom%20Covers/Test%20pics/4_zpsgkoqcxhe.jpg)

(http://i874.photobucket.com/albums/ab306/worldwide7477/Custom%20Covers/Test%20pics/5_zpsxepc5nbv.jpg)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Worldwide7477 on February 28, 2015, 11:28:57 AM
Notice this as well:

(http://i874.photobucket.com/albums/ab306/worldwide7477/Custom%20Covers/Test%20pics/6_zpsqhxdamyb.jpg)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: suhaneankit on April 19, 2015, 05:14:41 AM
The theme is very good. I am planning to install new SMF with this theme for Historical website. I hope visitor will like it.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: dingaling on August 24, 2015, 03:17:56 PM
Quote from: Worldwide7477 on February 27, 2015, 11:32:24 PM
I'm using 2.09 smf the theme installed great and the 1st patch went smooth but the 2nd patch will not install here is the pic in my smf any help with this would be great since i finally found a theme i really liked i checked the 3rd patch i did not install it but it did not show any errors so should be good to go for install.

There are no other mods or themes installed as of yet this is a fresh install

(http://i874.photobucket.com/albums/ab306/worldwide7477/Custom%20Covers/Test%20pics/4_zpsgkoqcxhe.jpg)

(http://i874.photobucket.com/albums/ab306/worldwide7477/Custom%20Covers/Test%20pics/5_zpsxepc5nbv.jpg)

I had this problem too, it tried to replace something in custom.css and my custom.css was pretty much empty. So I just ignored the warning and installed the last patch. Seems to work ok.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on August 25, 2015, 08:54:40 PM
The above post got my attention to this topic again. :D   Still using this theme and still loving it. I was just wondering if you had stopped working on it or if there were any updates to come.  As far as I can tell from my forum, there are no issues; I was just curious where you are on it.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 25, 2015, 09:18:17 PM
I just happened to look in at SMF now, for the first time in ages. Yes, I have stopped working on it. At the moment I don't know if I will start working on it again. I only frequent a few forums, and most of them don't use SMF. Even with the SMF forums, I have no control over what themes any of them run, which means I'm probably not ever going to actually get to use this theme anyway.

Due to the number of things in 2.0.x that I didn't like this turned into more making a fork, or at least a whole lot of mods, than just making a theme. Add to that the annoyance of dealing with cross-browser compat crud on tiny screens that 'll never use either, and can't see live anyway, from my perspective the whole thing becomes a large PITA for little real benefit. To some degree it is an interesting exercise, but I have a lot of other things to do as well.

If I get rained in for weeks when the wet season hits (which can happen here) I may get bored enough to do some more coding then. :D

In the meantime, if anyone wants to take any of the code and run with it, go for it. I won't be offended.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on August 25, 2015, 10:15:03 PM
Quite understandable.  I have no issue using it as it is anyway.  I may play with a bit of the css stuff in the future like I did when you first started on this theme, but I haven't done any tweaking on it even for my own forum in many months.  I may just leave it as it is. I haven't had much drive to do anything on my own sites for so long that it will take something really huge to get me motivated again anyway.    :)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 26, 2015, 03:39:27 AM
If you want to change anything and have any questions, feel free to buzz me about it.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antes on August 26, 2015, 07:10:44 AM
QuoteDue to the number of things in 2.0.x that I didn't like this turned into more making a fork, or at least a whole lot of mods, than just making a theme.

list ? :P or are they exist in SMF 2.1 ?
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 26, 2015, 05:21:08 PM
No list. Install it on a test site and take a look through it. :P

TBH I can't remember everything I changed, and would have to look through it all myself. I have no idea what is currently in 2.1 either.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 28, 2015, 12:52:44 AM
Quote from: Worldwide7477 on February 28, 2015, 11:28:57 AM
Notice this as well:

(http://i874.photobucket.com/albums/ab306/worldwide7477/Custom%20Covers/Test%20pics/6_zpsqhxdamyb.jpg)

It's not a problem. The theme is intended to be used with your own banners. If you don't load any banners, you don't get to see them. There's an easy fix for that. ;)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 28, 2015, 01:38:03 AM
Here ya go Antes, one mod idea. I just had a bit of a play with it today. No idea why, but you get that.

The plan is to ditch the old page index code and substitute a select. This is based on Arantor's old page dropdown mod but with some extra tweaks. I figure that a select gives all the functionality anyone needs, while being far better on phones than the traditional SMF page index. It can save a crapload of code compared to the old way of doing it. Most of the old page index function can be ditched, along with the expanding dots javascript, and along with some superfluous admin settings and a pile of template conditionals.

The select is coded to show you which page you are on, out of how many total pages. Obviously it still has custom previous/next page links each side of the select. Styling is all done with CSS. No weird javascript plugins required.

Ranty is generally cool with me pigging around with his old mod code, so shouldn't be any worries on that score.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antes on August 28, 2015, 04:15:49 AM
that looks good :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Bloc on August 28, 2015, 11:14:33 AM
*approved*

Really, thats a great feature. I think I have to adopt it lol.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 28, 2015, 05:20:00 PM
ROFL. Thought you might. :D Don't think it can be done entirely within a standard theme, but if you're installing your themes via pacman it should be easy to sort. Check out Ranty's Page Dropdown mod (http://custom.simplemachines.org/mods/index.php?mod=2025) and maybe ask him about use of the code if you want to do a direct rip. At the moment my WIP version just has this added to the end of the page index function:

if($max_value > $num_per_page) {
$dropdown_url = ($flexible_start ? $base_url : strtr($base_url, array('%' => '%%')) . ';start=');
if(strpos($dropdown_url, '%1$d') === false) {
if(strpos($dropdown_url, 'start=') === false) {
$dropdown_url .= ';start=%1$d';
} else {
$dropdown_url = str_replace('start=', 'start=%1$d', $dropdown_url);
}
}
$base_dropdown = '<div class="hey_try_this"><select onchange="javascript:window.location=(\'' . $dropdown_url . '\').replace(/%1\$d/, this.value);">';
$display_page = 0;
$myPage = ($start / $num_per_page);
for ($counter = 0; $counter < $max_value; $counter += $num_per_page) {
$base_dropdown .= '<option value="' . ($num_per_page * $display_page) . '"';
if($display_page == $myPage) $base_dropdown .= ' selected="selected"';
$base_dropdown .= '>Page ' . ++$display_page;
if($display_page == $myPage + 1) $base_dropdown .= ' of '. sprintf($base_link, $tmpMaxPages, $tmpMaxPages / $num_per_page + 1);
$base_dropdown .= '</option>';
}
$base_dropdown .= '</select></div> &nbsp;';
} else {
$base_dropdown = "";
}

return $base_dropdown . $pageindex;
}


To clean up the selects I just wrap them in a div with hidden overflow, and use a negative right margin on the select to hide the default pointy things. Can be made to look like part of the GUI then, and is easy to do. Extra markup isn't much. Haven't checked it in all browsers yet.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 28, 2015, 06:30:05 PM
Actually bugger it. I'm going to package this up. Won't take much and it's the weekend. I'll WTFPL it so anyone can do what they like.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 28, 2015, 08:23:04 PM
Hey idea. I can combine this with tweaks to the next/previous topics links. All it needs is an extra span dropped into div.nextlinks, holding the default $txt['board_topics'], and then it can use the same CSS to style the previous/next topics stuff as well as the page index, which will save on CSS. Also means no hacking of language strings required. Keep those for a11y, and just hide them with text-indent.

Good thing about this is that the new topics stuff will be more compact, so can fit on the same line as the page index even on a 320 wide screen, and will make it clear which previous/next links do what. :)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: busterone on August 28, 2015, 11:37:49 PM
LOL, do I detect a bit of a stirring in the creative force here?    :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 29, 2015, 12:22:44 AM
Err, umm, s'pose, sort of. :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 31, 2015, 04:30:57 AM
Yay! Got the page index thing working with just a select and the previous/next thingies. It gets rid of 60 lines of code from the old page index in Subs. Then I'm adding 30 lines for the select, using luxurious spacing on the formatting, so all up it's about half the code for the same functionality.

Previous/next thingies are extra of course, but they are functionality that wasn't offered originally. They add another 10 lines or so, so all up it's still about 20 lines less code in Subs than the old way of doing it, and has better functionality. Plus some settings can be ditched, and some CSS, and some javascript.

Now I just need to clean up all the WIP crap in the files.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: JBlaze on August 31, 2015, 06:34:27 PM
Ant, I thought you were done creating stuff for this theme :P
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 31, 2015, 06:36:38 PM
Yeah well you know how it is. :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: JBlaze on August 31, 2015, 06:40:11 PM
Quote from: Antechinus on August 31, 2015, 06:36:38 PM
Yeah well you know how it is. :D

Tell me about it. I actually rejoined the team when I said I never would again :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on August 31, 2015, 06:44:43 PM
Oh FFS, that's really sinking to new depths. :D
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: live627 on September 01, 2015, 12:38:51 AM
lmao
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on September 02, 2015, 07:30:26 PM
Here ya go. Another example of me being finished with making stuff for stupid theme.

I suddenly realised, while taking a break from coding up the XML for the page index mod, that my nifty collapsing main menu on small screens would work much better as a two column setup. Fits twice the buttons in the same height, and after a bit of tweaking of the drop menus is still perfectly usable.

It's currently running a 12 button main menu, not counting the unread and new replies buttons (they're not actually part of the main menu) and there's easily enough height on a standard iThing screen to take 20 buttons (if you're mental enough to run 20 buttons in your main menu).

So why not just use tiny icons that have no descriptions of what the hell they do, I hear your ask? Everyone is using tiny icons that have no description of what the hell they do, so obviously this must be the best idea ever, right?

Umm, not necessarily. I've seen and heard people grumbling about tiny icons which have no description of what the hell they do. I'm not that keen on them myself either. Some people like having a menu that tells you what all the buttons do. Some people are weird like that. :P

Oh and messing around with this made me realise I could dramatically simplify the code for my old centered menu mod, as well as easily making that responsive.

Then there's the collapsing sidebar menu for admin etc, which works much the same way. I've decided I'm actually going to ditch the "new" 2.0.x drop menu system from admin, etc and just run the sidebar (which obviously has second level flyouts to offer the same functionality, but with a more informative top level). I think one top level menu with one level of flyouts/drop menus is fine, but when you get to two or three levels of flyouts it gets to be a PITA to remember where everything is. Since there's no need for that crap, even on phones, I can't see the point of keeping it.

I suppose I could even sort the old mod to include all this stuff. Wouldn't be difficult. :)
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on September 03, 2015, 11:34:51 PM
So I'm still working on the install XML for the page index mod, but also did a bit more faffing around with menus. First thing I did was to realise the nifty collapsing code for the sidebar and main menu would default to collapsed if javascript went down the chute for any reason. Umm, no menu at all no good. :P

So, I switched the code around so it will fail to an expanded menu if js vanishes. It'll hog some screen space, but at least you'll have a menu. Usability FTW.

Some people probably like the default admin drop menus even if I don't. I was too lazy to get rid of them from the template and Sources so thought of something else. I made them into a dropline menu for screens of 800 or less so that all content stays within the screen boundaries, then at 480 width they pick up the same CSS as the main menu and go to the same two column layout. This seems to give the most compact and least confusing layout on a small screen.

Due to many admin sections having a large number of third level links, I also made the admin third level menu the full width of the screen with the links inside that also being in two columns. The positioning gets tweaked according to whether the parent link is in the left or right column. This is done just by using nth-child(even) on the parent li's.

#admin_menu .menulevel3 {
top: 100%;
left: -1%;
width: 210%;
}
#admin_menu .listlevel2:nth-child(even) .menulevel3 {
left: auto;
right: -5%;
}
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Bloc on September 05, 2015, 05:16:23 AM
Quote from: Antechinus on August 28, 2015, 08:23:04 PM
Hey idea. I can combine this with tweaks to the next/previous topics links. All it needs is an extra span dropped into div.nextlinks, holding the default $txt['board_topics'], and then it can use the same CSS to style the previous/next topics stuff as well as the page index, which will save on CSS. Also means no hacking of language strings required. Keep those for a11y, and just hide them with text-indent.

Good thing about this is that the new topics stuff will be more compact, so can fit on the same line as the page index even on a 320 wide screen, and will make it clear which previous/next links do what. :)

I haven't fully delved into it yet, but the premise is great. I will prob. just do my own version of it, learning how to and all that. :)

Another concept I been thinking about when reading this, is simply using "next" and "prev" only..with a small icon to put up the select box or input box in a popup. If you think about it..when a page have many pages, all you really need is either 1) next/prev page or 2) you guess what page its in. But here it might be better to re-think what you actually might need, like "go half" or "go 10 pages ahead". Even when using a dropdown menu/selectbox you will end up with a lot of scrolling if pages are 40+. Using just < > and 10+ and 10-, plus a icon for an input bx might be better to operate, especially on touch devices. Gonna try it out.
Title: Re: [WIP/Public beta] Apocalypse theme
Post by: Antechinus on September 05, 2015, 05:19:44 AM
That's a bloody good idea too.