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

Main Menu

Has anyone improved /main_block.png to have transparent rounded edges?

Started by Biology Forums, August 30, 2019, 11:35:58 AM

Previous topic - Next topic


Just been playing with it. Easy fix. Should I tell him here, or go embarrass him in the TP thread with an official bug report? :D

Ok, I'll do it here. Too lazy to go elsewhere for this.

Code (tp-style.css - Find) Select
height: 100px;
width: 635px;
max-width: 95%;
min-width: 90%;
margin: 0.25em 0 1em 0;

Code (tp-style.css - Replace) Select

.editor, .quickReplyContent>textarea
box-sizing: border-box;
height: 100px;
width: 200px;
max-width: 100%;
min-width: 100%;
margin: 0.25em 0 1em 0;

Works perfectly in Chrome and Pale Moon, so should be fine with everything else. The width being set to 200px is no problem, as it is overridden by the max-width and min-width declarations. I have a vague memory that it was only ever there for IE6, but don't quote me on that. I suggest making the above code the default for TP.

ETA: While I think of it, TP also seems to mess slightly with select paddings on Chrome. Noticed the page dropdowns were a bit cramped and slightly cut off with TP installed. Back to normal if uninstalled.

Also noticed a dodge I used when setting up the page index mod on Pale Moon doesn't play well with Chrome (sits too tight to the top of the topic table on message index) so will look at a broader solution there (should be easy, once I can be bothered firing up several browsers).


Thanks, I knew I 'struggled' with it before...

I'll have a look at the TP css file.
Running SMF 2.1 with latest TinyPortal at


I just thought I'd better double check something, so tested again with TP installed and that code completely removed from the TP CSS.

That goes and breaks the quick reply in Chrome again, so looks like it's better to stick with what I posted above (have removed the post with the "delete it all" suggestion).

However, TP really should not be breaking anything anyway, so the fact that some code is necessary indicates the TP is being naughty somewhere in its codebase. The CSS is just a patch to cover up other sins. At the moment I don't know what those would be. The main thing is the edit I posted will work.


Yeah, I was wondering about that: quite sure the css is there for a reason, removing it is not an option...

Not sure TP is being 'naugty', but it may very well be...

Fact of the matter is that TP atm is the same package for 2.0 and 2.1.. at some places SMF 2.1 has changed css for elements that also exist in 2.0 (paddings on windowbg is one I think).
We spoke about creating separate tp-style.css files for 2.0 and 2.1 but did not get around to that yet...

So right now there is some 'naughtyness'....
Running SMF 2.1 with latest TinyPortal at


That's probably it. Supporting both versions with one CSS file is bound to get a bit convoluted here and there. No biggy.


Just having a play with this theme on my local.  Thanks Antechinus.

Now I'm assuming it's not supposed to be compatible with IE11?  Just I noticed long post text breaks out of the right hand side.  And one click on the zoom button (125%) the hamburger goes wonky.

Looks good in FF, Chrome, Edge.


TBH I don't have IE11 installed and have not tested it with said piece of gruesomeness. I was thinking maybe I should install it. I still have IE8, simply because I literally never use IE.

ETA: Just checked and IE11 doesn't support position: sticky. That explains the flying hamburger. Could drop in a fallback for IE easily enough. Not sure about the post text thing. Haven't actually done anything to post text as far as I know.

Just checked, and apparently IE11 has a couple of bugs with flex. This is probably one of them.

Should be an easy workaround.


Lol. Ok, finally downloaded and installed IE11. My god what a useless pile of ******. Typical IE. They are determined to keep reliving their glory days of making terrible browsers that screw the internet for everyone.

1/ Yes, text breaks out of posts.
2/ It doesn't even support max-width on images, which is a frankly prehistoric attribute that IE has usually supported since IE7.
3/ It doesn't support pseudo elements, which again is bloody ludicrous.
4/ But, strangely, the hamburger is fine for me when I hit IE's zoom button. No idea what is going on there.

5/ Conclusion: no, this theme is not intended to support IE11. :D


The hamburger icon looks wonky in safari too... both in iPhone and iPad
Running SMF 2.1 with latest TinyPortal at


Might just skip the CSS hamburger and replace it with a .png then (I figured a CSS version was going to be easier for people to customise.). It's obvious that Safari still doesn't handle absolute positioning properly. I thought they had dealt with that years back. Apparently not.


Was just thinking about this IE11 thing. Before I installed IE11 today I had checked this theme on IE8, just for the heck of it. Or it might have been IE9. I honestly can't remember since, as I mentioned, I never use IE anyway. I only fired it up yesterday just to check the textarea thing.

So text didn't break out on IE8/9. It was fine. Presumably this is due to the earlier IE's not recognising flexbox at all, and just defaulting to display: block. IE11 has implemented recognition of flexbox, but has done it very poorly, as usual with MS and the web, and MS are obviously refusing to fix it even though they would be perfectly capable of fixing it and have had years to do so. That being the case, why should I argue with them? Users of IE should be allowed the full IE experience, as decided on by Microsoft.

I could implement code that would solve the problem. I know how to do that. It wouldn't even be all that much work. I'm just currently inclined not to, because I'm damned if I want to relive the IE6 and IE7 days just to pander to bloody MS. Again.


Ok, nuff about IE. Back to actual browsers. Had an idea about Safarti dropping its guts. There are some reports around the web of the standard hamburger icon not being that great for all users. Probably not such an issue these days, as I expect that by now most people (even really old ones) using mobile these days would have seen that icon often enough to know what it means. However, it is easy to implement an alternative which is still compact and tidy.

The label (ie: what sighted users see as the hamburger) needs to have text for a11y with screen readers anyway. You just can't see it, because I used the standard hidden overflow + text indent trick to hide it. Screen readers will just process like any other text content (it currently says "Menu visibility toggle").

What I'm thinking is that it may be more sensible to just have the text visible, so instead of a hamburger you'd just have normal text that is styled however you want it (can look like a menu button, or anything else). This has the advantage that it is easy to distinguish between the main menu and sidebar toggles, because each can tell you which menu it deals with.

The one for the sidebar can be called like this in ThemeStrings.english.php:

$txt['hamburger'] = $context['current_action']. ' Menu';

That automatically displays as "Admin Menu" or "Profile Menu" or "Moderate Menu" or "Pm Menu", depending on where you are. It should also work with extra areas added by any mod. Obviously the main menu would have its own separate text string:

$txt['main_menu'] = 'Main Menu';

An added touch is that they can use a bog basic inline pseudo to display a hide/show icon like +/- or arrows or whatever depending on whether the menu is open or closed. Safari should handle this without getting indigestion.

Obviously this wouldn't preclude anyone using any form of hamburger icon if that's what they really wanted, but I think it's a sane default presentation.

ETA: And while I think of it, I'll tweak that page index mod to make it friendlier to most themes. It currently plays well with my mutant Curve, but not so well with other themes, due to mutant Curve using a rest to 10px as the base font size (makes subsequent sizing much easier on the brain if you want things slick). Most themes don't do this, even though it's a very old and well-known trick, so they kinda freak when told to size the select text at 1.2 rem. :P

I may also recode it to call a separate CSS file for the mod, even though I generally hate mods adding CSS files all the time, because that would be far less brittle if the CSS is customised before someone tries to uninstall the mod.

Biology Forums

Is it safe to try the latest beta? I know the latest upload has stirred a lot of discussion since its release


Should be perfectly safe. It's not going to kill anything. The only real problem (apart from IE11, which doesn't count) is the hamburger looks a bit wonky in Safari. But then it's the same hamburger that has been there for the last two betas anyway, and nobody complained about it until now.

The thing about the textarea overflowing the screen on Rjen's site was due to a bug in Tiny Portal, which I've already given them a fix for.

Biology Forums

Just installed it. If SMF 2.0.x came out of the box this way, it wouldn't be the laughing stock of the internet in terms of its design. This brings 2.0.x to 2019, and then some. You did a *FANTASTIC JOB*. Now, that's my first 5 minute impression. I'll update you once I find flaws ;D


ROFL. I bet you will. :D That's what testing is for. And thanks for the compliment.

I had an idea about IE11, and it's an idea I really like. I'll provide code to support it, but as a theme variant that has to be selected. The variant will be named "I'm with Stupid".

Biology Forums

I think IE11 is installed on every Windows machine, but it's *hidden*. I don't think you should waste a minute caring about it anyway.

Found something that bugged me. Without an avatar, you have this unnecessary space to the left of the information about the poster. That needs to disappear, or default to a generic avatar.

#siteslogan needs to have top: 4px for desktop view. This prevents the hover effect on the up arrow from overlapping the div below it.

More to come as I test it further


Yep the avatar thing is one I've been thinking about. Needs a conditional or something there. Especially given that there is a profile option to not show avatars, which is likely to be used by some people (even if not many).

Frankly this is another area where rewriting the markup would make sense. For the narrow view you want the av to the left of the name, but the only way of getting that with default markup is to use absolute positioning, which then means the name won't auto adjust if there's no av (has to be a fixed margin).

So I either use PHP conditionals to check for the av, and then use classes to set the required margin on the name, or I use a revamped markup that will allow it all to be self-adjusting (which basically means putting the av on top of the name on desktop view).


Hmm. Dammit. Having said that, I just thought of something. I should be able to float the av and get around it that way. D'oh. :P

Dunno why I didn't think of that before. If the name and the PM button are display: block; and the av's li is float: left; it should all hang together with or without an av. I'll test it later.

I'm currently messing with that idea for text strings for the menu toggles. The previous idea wouldn't be any good for i18n, but a variation on it will work perfectly. I can do the template like this:

<label for="sidebar_checkbox" class="sidebar_toggle">', $txt[$context['current_action']. '_menu'], '</label>';

Then in ThemeStrings.english.php (or any other language) it just becomes:

$txt['admin_menu'] = 'Admin Menu';
$txt['moderate_menu'] = 'Moderate Menu';
$txt['profile_menu'] = 'Profile Menu';
$txt['pm_menu'] = 'PM Menu';

This has been tested live, and works just fine. It will mean you always get the right heading on each menu, even for mod areas like TP admin, and it will be easy to translate to any required format for any language. I like it. :)


IE 11 is still technically supported until 2025 for security fixes :(