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

[lurkalot]

lol yeah I know the breadcrumbs aren't really needed or used, that's just me... i've always prefered them to be a complete navigation map (call it my ocd.... so then I know where to go back and find that post at if needed) but I know most don't even really care, so just last location is fine....
home icon > You are here
would be fine for most

Think you'll find they are needed now, or Google will start complaining.  https://developers.google.com/search/docs/data-types/breadcrumb

And, https://www.simplemachines.org/community/index.php?topic=569815.0

[Antechinus]

hm... that's an idea, shoving them all inside of a hidden menu persay.... that would at least solve the issue, and most wouldn't ever really even use them anyways.... as you said pretty much just the reply button.... quote and maybe modify.... everything else could be hidden away in a dropdown or something

Gets tricky splitting the top and bottom strips, because of the way the markup is generated. It really has to be all or nothing for them. Buttons in posts can be split (did that for 2.1). If doing that I'd be inclined to just leave quote and quick edit hanging in the breeze, and stash the rest. Otherwise it gets to the point where you aren't hiding enough to make a significant difference.

[Antechinus]

Think you'll find they are needed now, or Google will start complaining.  https://developers.google.com/search/docs/data-types/breadcrumb

And, https://www.simplemachines.org/community/index.php?topic=569815.0

You could do the intermediate links with a restricted width (10px or whatever) and ellipsis overflow. That way they'd still keep spiders happy but wouldn't chew as much space for humans.

[Diego Andrés]

On some of my recent themes I opted for using a dropdown for displaying the breadcrumb. I only show the first and last, and you can access the rest of them clicking on the home link (the first one). No clue google likes that I was just playing around with it

[Bloc]

Think you'll find they are needed now, or Google will start complaining.  https://developers.google.com/search/docs/data-types/breadcrumb

And, https://www.simplemachines.org/community/index.php?topic=569815.0

You could do the intermediate links with a restricted width (10px or whatever) and ellipsis overflow. That way they'd still keep spiders happy but wouldn't chew as much space for humans.

Ellipsis is good, I like that. Using it on recent posts now.

Code Select Expand


.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


[Antechinus]

Yes it's a handy dodge. I have been thinking about adding an ellipsis class, but it's just another presentational class and someone might want to override it later. Plus I'm too lazy at the moment to go around adding it to the markup, so I'm just adding it to the CSS where I need it. There aren't that many uses of it.

[Antechinus]

Been playing with form elements a bit. A while back I figured out a suitable CSS-only sledgehammer for making buttons and text inputs behave. I've now figured out how to get selects and labels looking decent too. Surprisingly easy, once you nail it.

To save space I've declared fonts for everyone up the top. Inputs and textareas need their own declaration for font or they'll use something gruesome, so since the font stack is quite long I figured it'd be best to only declare it once. Body gets declared twice just so it can pick up the font without inflicting its other bits on the form elements.

Code Select Expand

body {
margin: 0;
padding: 15px 0 3em;
background-image: linear-gradient(#375976 0, #e9eef2 500px);
color: #4f4f4f;
}
body, input, button, select, textarea {
font: 1.4rem/2rem "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

Then down the track a bit I break out the sledgehammer (resistance is futile):

Code Select Expand

input, button, select {
box-sizing: border-box;
max-width: 90vw;
min-height: 2.4rem;
max-height: 2.4rem;
margin: 0;
padding: 0 4px;
font-size: 1.3rem;
border: 1px solid #738599;
border-radius: 2px;
vertical-align: top;
}
label{
display: inline-block;
font-size: 1.3rem;
line-height: 2.2rem;
}
select {
padding: 0 2.6rem 0 0;
background: #fff url(../images/select.png) 100% 50% no-repeat;
background-size: 2.4rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
/* For IE and Edge */
select::-ms-expand {
display: none;
}
select>option {
padding: 0 6px;
}

I like these proportions, at least for this mutant Curve. This theme is using the old "reset base font size to 62.5%/10px on the HTML tag, to make things easy on the brain, then go from there" trick, which is an oldie but a goodie. It makes pixel-perfect alignments a piece of cake.

The input text being fractionally smaller than general body text works nicely. At 14px it is a bit too large, while at 13px it's still very clear but a bit more balanced. The inputs boxes at 24px tall are nicely chunky without being over the top. The labels always sit well next to them.

Declaring labels as inline-block is essential here, as without that they're all over the place for height. With it, they just suddenly decide to be nice. One other detail here is that since the inputs have 1px borders and the labels usually don't, I've set the line-height for the labels 2px taller to take that into account.

Selects have always been a pet hate, of course. Didn't want to get into all sorts of daft libraries just for styling something some trivial, so today I found someone else who thought the same way and had come up with a nifty little idea. Turns out selects take a background image on the top level, just the same as text inputs will, without it affecting the expanded options.

So if you use appearance: none; (and vendor variants) to ditch the default ugly arrow on Webkit/Blink/Gecko/etc, and use -ms-expand to do the same thing on the creatures from the Black Lagoon, then suddenly you can makes selects look decent with very little code required. Which is much better than frigging around with Bootstrap and jQuery just for one little job.

This all works really well. I've tested it with Pale Moon, Chrome, Opera, Firepox, and Infernal Sludgebucket of Despair 11 (which they only made coz they hate you). It's spot on in all of them. Even zooms nicely.

ETA: Oh yeah, the labels for the header log in form are treated a bit differently. They get this:

Code Select Expand

#guest_form label {
margin: 0 0 6px 0;
background-image: linear-gradient(#738599, #a8bace);
color: #fff;
font-weight: 700;
text-shadow: 0 0 1px #333;
text-align: right;
padding: 0 0 0 4px;
border: 1px solid #738599;
border-radius: 2px;
overflow: hidden;
}
#user, #passwrd, #openid_url {
margin: -1px;
}

Which is mostly just because I wanted them matching the cat_bar styling. The important bits are:

1/ If the label markup wraps the input, set text-align to right so the input sits where you want it within the label.

2/ There's no need to set text-align back to left for the input. It's that way naturally, even with right on the parent.

3/ Since the label has a border now you don't want the input border doubling up inside it...

4/ ...so setting a -1px margin all round the input sorts that out for you. It pulls the label border down to sit over the input border. Easiest way of fixing it with minimal code.

[Antechinus]

hm... that's an idea, shoving them all inside of a hidden menu persay.... that would at least solve the issue, and most wouldn't ever really even use them anyways.... as you said pretty much just the reply button.... quote and maybe modify.... everything else could be hidden away in a dropdown or something

Had a play with this idea. Could go with the 2.1 idea of having a "More..." button holding most of them in a drop, which was my idea so should be really clever. Turned out to not be so clever, because we were getting grumbles that people couldn't find the missing options. Apparently humans tend to think a button labelled "More..." won't have anything more under its wings. They're funny critters.

However, I think I can outsmart them. One of the perennial complaints with 2.0.x is that people cannot find the attachments options either. Having it labelled as "Attachments and other options", with a + icon next to it, is too obscure for a lot of people. That's why I went with "Show attachments and other options" and no icon on this mutant. I figured if the text says it will show something, people are more likely to try it. It might even work.

So I think it'd have to be something similar with the quickbuttons: make it so damned obvious that nobody can miss it, even if they are determined to. That means the drop button would have to be labelled something like "More options" or "Extra options". That takes up space (probably even more in German) so there's only going to be room left for two other buttons on a small screen. The obvious ones to keep are Quote and Quick Edit (because normal people think of editing quickly, and only obscure geeks think of inline modify).

The moderation checkbox wouldn't fit well in the drop though. Not really a natural place for it. Best arrangement seems to be have the "Report to moderator", IP shiz and moderation checkbox in one line, just below the quickbuttons. That fits even on small screens. Then have the "Last edit..." and attachments in a collapsible div, with the standard sig last.

[Dave J]

they're funny critters.

However, I think I can outsmart them. One of the perennial complaints with 2.0.x is that people cannot find the attachments options either. Having it labelled as "Attachments and other options", with a + icon next to it, is too obscure for a lot of people. That's why I went with "Show attachments and other options" and no icon on this mutant. I figured if the text says it will show something, people are more likely to try it. It might even work.

Being a funny critter, I would have labelled it 'Add attachments and other options' 

Just saying

[Antechinus]

Only catch is you're not adding extra options. They're already there. That's why I thought "show" would be a good one to use, on account of them being hidden.

Could go for "Hey you! Yes, you! There is stuff hidden by this link. Every thought of clicking it? Go on. You know you want to."

That should be effective. Especially if I put it in a bouncing marquee. But it's a bit long, and would get annoying after a while.

[Dave J]

Only catch is you're not adding extra options. They're already there. That's why I thought "show" would be a good one to use, on account of them being hidden.

Could go for "Hey you! Yes, you! There is stuff hidden by this link. Every thought of clicking it? Go on. You know you want to."

That should be effective. Especially if I put it in a bouncing marquee. But it's a bit long, and would get annoying after a while.

I get your point...and love the comments

[Antechinus]

Ok, it works. Hiding things all over the place. I'm tempted to hide the whole forum just to wind people up.

Anyway, have gone with the quote and quick edit buttons out in the open and the rest in a drop. Fits on a 320 at standard zoom. Drop is styled so hopefully nobody will miss the contents (fat chance of that). Drop is keyboard accessible, same as all the other menus.

Made a new quickbuttons sprite to go with it as the old one was a bit crap. The new one is 720x48 for them high-density gizmos and uses some nifty tricks to get it to scale well. The icons are set on absolute-positioned pseudos (.quickbuttons a::after) so there are no dramas if I decide to mess with hover and focus background effects on the links.

The sprite runs horizontally instead of vertically. That makes it easy to set it up so the icons are always perfectly aligned with the text regardless of zoom level, or even if I decide to change line-height on the anchors. CSS for it looks like this:

Code Select Expand

.quickbuttons a {
position: relative;
padding: 0 2.7rem 0 8px;
display: block;
line-height: 2.2rem;
}
.quickbuttons a::after {
position: absolute;
height: 2rem;
width: 2rem;
right: .4rem;
top: 50%;
margin-top: -1rem;
background: url(../images/theme/quickbuttons_hd8.png) no-repeat;
background-size: auto 2rem;
content: "";
}

Then for each button:

Code Select Expand

.quote_button>a::after {
background-position: 0 50%;
}
.remove_button>a::after {
background-position: -2.5rem 50%;
}
.modify_button>a::after {
background-position: -5rem 50%;
}
.approve_button>a::after {
background-position: -7.5rem 50%;
}
.restore_button>a::after {
background-position: -10rem 50%;
}
.split_button>a::after {
background-position: -12.5rem 50%;
}
.reply_button>a::after {
background-position: -15rem 50%;
}
.notify_button>a::after {
background-position: -17.5rem 50%;
}
.details_button>a::after {
background-position: -20rem 50%;
}
.ignore_button>a::after {
background-position: -22.5rem 50%;
}
.close_button>a::after {
background-position: -25rem 50%;
}

This works because the image is scaled down from 48px (4.8rem) to 20px (2.0rem) in height, so rendered height at standard zoom and font size is 1/2.4 of actual height. Icons are spaced 60px apart, which is 6rem, and scaled down to 6/2.4 which is 2.5 rem. So all the positioning of the icons is straight no-brainer multiples of 2.5rem, and since this is a relative font size the whole shebang scales perfectly for any font size or zoom level.    

Hidden attachments are coded to come in at the same time as the main menu goes to hamburgers. Works the same way. Keyboard accessible too, of course. There's enough height on the opened attachments div to handle anything you are likely to view on a tablet or phone.

I'm think I'm calling feature lock now (about bloody time).

Will tidy up a few things and get a zip sorted in the nest day or two.

[Biology Forums]

That looks so nice ^^

Ok, it works. Hiding things all over the place. I'm tempted to hide the whole forum just to wind people up.

🤣🤣

Will tidy up a few things and get a zip sorted in the nest day or two.

Thanks

[Bloc]

Really, there are only two ways of dealing with less space: drop things or hide things. I vote for the latter. Great direction this is taking.

Antechinus, where on earth did you get those texts in the screenshots?

[Antechinus]

ROFL. That's Bogan Ipsum. It's randomised Australian slang. I find it hilarious because I know what it all means, but of course it's all over the place, so sometimes you randomly gets bits that make sense in a weird way.

Hey you should do a Norwegian version. That would make great filler text for most people, because they wouldn't be able to understand most of it.

My other favourite is Samuel L. Ipsum (warning: contains naughty words) which is a selection of quotes from Pulp Fiction.

[Antechinus]

Just found something that could be useful: Lorem Ipsum HTML Generator

It's standard lorem ipsum, but generated with html formatting by default. Not perfect for random PHP templates, but a good start for a lot of things.

ETA: There's a Pommy Ispum too! https://www.pommyipsum.com/

Thus isn't bad either: https://vole.wtf/text-generator/ Which got me thinking, someone should do a Cthulhu Ipsum.

ETA again. Lolz. Someone has done it. Of course.

http://ephemer.kapsi.fi/FhtagnGenerator.php

That's awesome.

[Bloc]

Hehe, the Cthulhu and Samuel ones are great. Serves 'em right for those that actually read the texts. *cough*

[lurkalot]

Just noticed a few of these errors in my log.

Type of error: Undefined 
8: Undefined index: header_logo_width 
https://cctestsite.info/forums/index.php?
File: /home/cameracr/public_html/cctestsite.info/forums/Themes/Ant_Curve_CSS3_RC3/index.template.php - Line: 211

[Antechinus]

That's odd, because it doesn't do that on my local. Works without errors, with no width or100% or partial width set, or with no banner.

Have you got the Settings.template.php that came with the last one?

[lurkalot]

Have you got the Settings.template.php that came with the last one?

Yep attached.