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

[Biology Forums]

I absolutely love the banner idea!!! I think we should add a pseudo:before element, add a faint rgba black background to it, enhance it opacity, which will allow the text to popup out more. I think we should package this as a theme and let people use it as an alternative to the default theme

[Antechinus]

Not sure what you mean with the pseudo. Maybe add it to your test copy and screenshot it.

[Antechinus]

Oh hang on, is this the sort of thing you're thinking of?

If it is, it may be a good idea for some banners, but maybe not for others, and you probably be wanting to change the background colour to match the banner and the rest of the theme anyway. You'd also not want it showing if the site was not using a full-width banner (because then it would look wrong against the default header gradients).

This is easy to do, and doesn't even require a pseudo. It's just a basic rgba background on the #siteslogan div. But it's something that IMO would be best left as a custom tweak, rather than being in the CSS by default.

Incidentally, while playing with this I got sick of looking at the default upshrink icon (too blurry, even on desktop without Retina) so whipped up a new one in PS (5 minute job). This is sized 80x80 but scaled to 22x22 in the CSS. Approximately 1.55kb as opposed to the original images' 0.65kb. Not that I'm up for doing every icon in SMF, but these two were worth doing. I've attached them too. Just be sure to scale them in your CSS:

Code: [Select]

#upshrink {
width: 22px;
/* Plus whatever other declarations you want to use. */
}

[Biology Forums]

Not sure what you mean with the pseudo. Maybe add it to your test copy and screenshot it.

The pseudo element :before is placed on the class that displays the banner. It'd have an effect that's similar to this: https://codepen.io/anon/pen/avdsi

Furthermore, the slogan as it appears in the screenshot looks very nice too!

[Antechinus]

Can't see the point of that pseudo, or at least not for this application. All it's doing is displaying a background image. If you're going to be making a custom banner anyway, presumably you will be choosing how that banner is made, yes?

So text, contrast, saturation and whatever else will be chosen so it looks right anyway. If you want a similar look to that Codepen example, you simply make a banner that looks like that. Done and dusted.

[Kindred]

you gonna drop a new zip?

[Arantor]

:drool:

[Biology Forums]

Actually, before you do package it, noticed an issue.

[Antechinus]

Before I package it, I noticed several issues. But ok, tweaked that one too, which enabled me to rationalise some CSS while I was at it.

Speaking of which: the sidebar flyouts and the drop menus share the same eye candy CSS, so there's no need to declare it twice. I can amalgamate a fair whack of stuff there, which will both save code and ease customisation. I've also had a couple of other minor ideas in that department (ie: anchor sizing on hover vs focus can be made a bit easier).

The main thing at the moment though is that I've been testing the theme with that page index mod installed, because really I think that will be the sanest option for general usability. But in doing that I have, of course, had better ideas on how to code the mod itself. CSS can be reduced, and made more stable at the same time, and I think I have it looking quite a bit better on Curve.

I'm seriously thinking of making that mod a requirement for this beast, because I'm really not keen on having to figure out presentation for two different page indexes, particularly when one of them will be pretty much useless for the intended users and is a mongrel to style anyway. It seems a bit bonkers.

[Biology Forums]

Looking forward to the next beta release. The awesome thing about designing a theme is that you're never really done; there's always something that can be made to look better.

[Antechinus]

Ha! That's the worst thing.

Anyway, have got the menu CSS rationalised. Have also put a warning for newbies:

Code: [Select]

/* Standard dropdown menus: main, admin, profile, etc. */
/* Here be dragons!! It is recommended that you do not */
/* touch most of this. Changing colours is fine though.*/
/*---------------------------------------------------- */
Which will obviously be ignored by the more determined and adventurous among us, but I thought it was worth telling those who need to know.

Had another (probably too clever for its own good) idea about banners too. Recoded the h1 and associated anchor to this:

Code: [Select]

<h1 id="forum_title" ', empty($context['header_logo_url_html_safe']) ? '><a href="'. $scripturl. '">' .$context['forum_name']. '</a>' :
'class="image_banner"><a href="'. $scripturl. '"><img id="forum_banner" src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" /></a>', '
</h1>
Which, if you can't be bother deciphering it at the moment, simply appends a class to the h1 if there is an image banner being used. That then allows doing this sort of thing in the CSS:

Code: [Select]

.image_banner a::before {
display: block;
position: absolute;
top: -2px;
left: -2px;
z-index: 1;
color: #eee;
font-size: 2vw;
content: "Testing pseudo element title";
text-shadow: 0 0 1px #000c, 1px 2px 2px #000a, 2px 4px 3px #0008;
}
Which results in the effect seen in the attached screenshot. It's a way of getting custom text as part of your banner and its link, without needing to be any good at image editing. The text shrinks with the banner, because the font-size is set in vw (1vw = 1% of viewport width).

Might be useful for someone, sometime, although obviously they'd have to know at least some CSS. I wouldn't have it as part of the functioning default CSS, but can comment it out and leave it as an example.

The hold up at the moment is the page index mod. I just tried uninstalling it and it left behind a functioning "next page" link as a massive fixed bar at the right side of Display.template.php. So that's no good. I'll have to leave the theme alone for a bit and sort through the mod coding for a few hours. Once that's done, another beta (with associated page index mod) should appear.

[shadav]

*sneaks into the topic, don't mind me, I'm just following this, though slightly confused, great work*

[Antechinus]

No worries. Feel free to ask questions if there's anything you're curious about.

[Antechinus]

Meh. Bloody themes. Whose idea was this anyway?

I've got the board index and message index sorted the way I want them. Very simple coding, totally bulletproof, and a clean look that stays aligned and tidy at any width.

The entire tables in both case are declared as block display to break the rows and cells free of table restrictions. Board index icon cells are floated left, set to a fixed 72px on the more spacious screens. The two icon columns on the message index are (yep, you guessed it) also floated and are set to 36px each. Stats cells are absolute positioned to the right, set to 18% width.

Info/subject cells just sit between to those, with a 67px margin on the left (+5px padding that stays on all resolutions) and a 21% margin on the right (21% to give it a bit of leeway when things start scrunching). Needs hardly any media query tweaking for narrow screens. Just drop the stats cells and board descriptions, drop one icon column off the message index, tighten up the board index icon cells to 50px, set the remaining message index icon column to match that, and adjust the margins on the info/subject cells. Sorted.

Display template still needs a bit of tweaking for buttons arrangements and spacings. The default is too crowded with crap. I'm going to remove the (rarely used) next/previous topic buttons from the top of the page, and just have the page index and the "go down" link with the standard buttonlist.

At the bottom of the page do it the other way: remove the standard "go up" link (because there's a global one in the footer anyway) and have the next/previous topic buttons down here. I'll amalgamate them into one long bullet, like the page index, to save a bit more width. May also trim the width of the page index slightly. I'm also shunting the moderation buttons, jump-to and linktree down out of the way to keep the button area less cluttered. Should be better for all-round usability.

So yes, a bit more bug fixing (keep finding them ) and then will do another zip.

[Kindred]

I forget, are you packaging this as a separate theme or as a mod to apply on top of Curve, like the original one?

[Bloc]

Meh. Bloody themes. Whose idea was this anyway?

I've got the board index and message index sorted the way I want them. Very simple coding, totally bulletproof, and a clean look that stays aligned and tidy at any width.

The entire tables in both case are declared as block display to break the rows and cells free of table restrictions. Board index icon cells are floated left, set to a fixed 72px on the more spacious screens. The two icon columns on the message index are (yep, you guessed it) also floated and are set to 36px each. Stats cells are absolute positioned to the right, set to 18% width.

Info/subject cells just sit between to those, with a 67px margin on the left (+5px padding that stays on all resolutions) and a 21% margin on the right (21% to give it a bit of leeway when things start scrunching). Needs hardly any media query tweaking for narrow screens. Just drop the stats cells and board descriptions, drop one icon column off the message index, tighten up the board index icon cells to 50px, set the remaining message index icon column to match that, and adjust the margins on the info/subject cells. Sorted.

Display template still needs a bit of tweaking for buttons arrangements and spacings. The default is too crowded with crap. I'm going to remove the (rarely used) next/previous topic buttons from the top of the page, and just have the page index and the "go down" link with the standard buttonlist.

At the bottom of the page do it the other way: remove the standard "go up" link (because there's a global one in the footer anyway) and have the next/previous topic buttons down here. I'll amalgamate them into one long bullet, like the page index, to save a bit more width. May also trim the width of the page index slightly. I'm also shunting the moderation buttons, jump-to and linktree down out of the way to keep the button area less cluttered. Should be better for all-round usability.

So yes, a bit more bug fixing (keep finding them ) and then will do another zip.

Yeah, whose idea was that heh

Seriously, when you dive into it, it quickly becomes apparent that current 2.0 theme codebase has quite a few obstacles for making it mobile-ready. Though you've done an excellent job in solving them, theres still that feeling that you should just rewritten the whole thing. At least thats what I feel when working through it..but I guess thats half the "fun" too, to persevere even then.

[Antechinus]

I forget, are you packaging this as a separate theme or as a mod to apply on top of Curve, like the original one?

Only makes sense as a separate theme, or as a bunch of templates and css files that anyone can drop into the default folder (same result). Yes, I will make sure they are coded safely enough to do the latter. Been there before.

But, I will package up that page index mod to go with it. Been thinking about that too, and have made the entirely out of character decision to do it the sensible way. I'll just code it to replace the page index function itself, with no attempt to clean up templating. This will vastly reduce the amount of code required compared to a theoretically perfect solution. Existing templates will just call the select/anchors/wrapper where they currently call the string of tiny numbers. I'll provide CSS so that little bullet looks clean within its own boundaries, and themers or admins can do whatever else they want to do (like removing "Pages: " where it bugs them, or entirely changing the surrounding markup).

[Antechinus]

Yeah, whose idea was that heh

Seriously, when you dive into it, it quickly becomes apparent that current 2.0 theme codebase has quite a few obstacles for making it mobile-ready. Though you've done an excellent job in solving them, theres still that feeling that you should just rewritten the whole thing. At least thats what I feel when working through it..but I guess thats half the "fun" too, to persevere even then.

It becomes an interesting exercise, as I'm sure you know. But then we both also know what happens when you decide "Oh hey, I should just rewrite the entire GUI from scratch". I have "scope creep" branded across my brain for this one. I want to wind it up. Soon. It is, after all, only meant to be a usable basis newbies and for further theming. I figure if it's good on board index, message index, recent, display, post and PM's then the rest of it can go suck donkey balls.

I'll give some other bits minimal tweaks where practical, but I'm not rewriting all the templating. Example: Stats.template.php. I happen to know it is possible to rewrite that to drop 91 divs and about 40 lines of CSS, without changing the looks. Have done it before. Even gave the team code for it in case they wanted it for 2.1. Am not going to bother for this beast though. Nobody ever looks at Stats.template.php anyway, so who gives a rat's? I'm sure there is still a stack of CSS that could be pruned if I went through the entire GUI in great detail, but the truth is nobody is likely to care.

[Antechinus]

As part of getting rid of unnecessary images I ditched that stats bar png. Frankly I've hated the look of it for years anyway.

So this cleaned up polls a bit, and while I was at it I did the stats template too. I just made sense to save CSS, so I did it. Hey ho.

IIRC this is more like the style Bloc originally intended it to have, before the team insisted they wanted everything with gradients and round ends.

[Biology Forums]

Looking great. Can't wait to install!

Haven't looked @ the code yet, but the empty space after "Page 2" sort of bugs me, can that be removed?