[WIP/Public beta] Apocalypse theme

[Antechinus]

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.

[busterone]

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

[Chalky]

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 

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.

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

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

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

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 

[Antechinus]

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

Are you getting any scrolling issues?

I guessed that.  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.

[Chalky]

Collapse/expend icons present and correct 

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.

[Antechinus]

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.

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

Cool.

You 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.

[Antechinus]

Collapse/expend icons present and correct 

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.

[Chalky]

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.

[Antechinus]

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.

[Antechinus]

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.

[Chalky]

It's theme nº 13, but register by all means 

You're approved 

[Antechinus]

Ok, your site scrolls fine for me with FF 34.05 and the theme selected, at least on guest view.

[Chalky]

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 

[Antechinus]

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.

[Antechinus]

Just logged in at yours. Scrolls fine for me so yeah, probably one of the add-ons (which is a bugger but anyway).

[Antechinus]

Hey cool. 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.

[Antechinus]

AHA! 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.

[Chalky]

Right I'll play with the add-ons.

AHA! 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?

Code Select Expand

// 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    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 ]

[Antechinus]

D'oh. Got the mushed menu figured out. Dopey bugger. I made a mistake in the media queries.

About Line 4550ish find this

Code Select Expand

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

Replace with this:

Code Select Expand

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

That should fix it.

[Antechinus]

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 Expand

$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 Expand

$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.