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

Antechinus

Ok, bugfix for the "hanging slash" thing.

Index.css:

Code (Find) Select
/* 896px at standard browser settings. */
@media screen and (max-width: 56em) {
.table_list .stats, .moderatorbar .modified,
.topic_table th:nth-child(3), .topic_table td:nth-child(4),
#menu_skip {
display: none;
}


Code (Replace) Select
/* 896px at standard browser settings. */
@media screen and (max-width: 56em) {
.table_list .stats, .moderatorbar .modified,
.topic_table th:nth-child(3), .topic_table th:nth-child(4)::after,
.topic_table td:nth-child(4), #menu_skip {
display: none;
}


ETA: Oh I just remembered something. The CSS for this thing is coded to work with the old IM fields disabled in admin (ICQ, MSN, AIM, YIM,) on the basis that nobody uses them anymore anyway (see settings on: action=admin;area=featuresettings;sa=profile;).

If you do happen to have a few people still using one that is still active (I think ICQ may be) and you want the relevant field enabled, get back to me on that and I'll tel you which edits you need to make it all play nicely.

This will also apply if you want to run custom fields on the member list, buddy/ignore lists, or who's online.

Biology Forums

QuoteThat will cause problems if someone only wants a small banner. Not everyone wants it full width. Using max-width allows people to use any size they like. Also, if someone does upload a small image but wants it full width, it will be pixellated to hell on larger monitors. Short version is that if you want a banner to be full width on any monitor, you have to use an image that is big enough to do the job properly.

In that case, there could be a banner option AND a logo option. The banner option would note how long it should be. It's not completely necessary, so feel free to drop the idea.

Antechinus

A logo is a banner is a logo. Where do you draw the line? 10% width? 15%? 48%? 83%?

I have already dropped the idea. :D I'm not trying to make it proof against every possible idiot. I assume admins will require some brains. If they have no brains, they won't be admins for long anyway.

Antechinus

Ok, stuff it. I have been thinking about the banner option thang. I was thinking that it wasn't worth having a percentage setting on banners, but of course as the screen size reduces the banner image will not, until it gets to the point where it's full width, at which point it will start scaling for width with the rest of the header.

So yeah, if you don't want it full-width, and just want a nice little logo, then a width setting option for <100% makes a lot of sense on a responsive theme. You could just enter any percentage in an input, and your logo would always scale with screen width. And the obvious option is to leave it defaulting to 100% if no value is entered.

It would still be a max-width setting though, not a width setting. This will get around the problem of pixellation if some doofus links a small banner and tries to make it full width. It won't scale over its natural size, so doofus will have to go find a bigger one. In that case we're back to what I said about admins requiring some brains.

So ok, I'll throw in that setting. :)

Anyway, I got bored with the admin home page (haven't ever liked it much) so tarted it up a bit. It was a bit of fun, and it looks better now. It puts the important stuff up top, in a non-nauseating format, and throws the blurb that nobody ever wants to read (except maybe the first time they use the software) down at the bottom where it's out of the way. I think this makes more sense. The blurb chews heaps of space on a narrow screen, so the old location doesn't really work for responsive themes.

Did the same general formatting for the admin search results page too.



The new setting is working now. Last screenshot shows it set to 65%.

Oh and if anyone was wondering, it has idiot-proof coding so it stays at 100% if someone enters 372.

You can also choose to have the banner go full-width on small screens, just by entering min-width: 100%; in a media query at the end of index.css. Now I suppose someone will want that as a theme setting too, but they can get stuffed. :P


Antechinus

You haven't even bug tested the last one yet. :P

I know because I found a couple of minor ones you missed.

Biology Forums


Antechinus

No. I do them all accidentally. I'm naturally talented like that. :D

I'll have an update out soon anyway. I'm thinking I should call it RC2.1, just to recall those wonderful days of 2.0.x dev when we were in the embarrassing situation of having to patch RC's. That was fun. :P

shadav


Biology Forums

Quote from: Antechinus on October 02, 2019, 09:15:27 PM
I'll have an update out soon anyway. I'm thinking I should call it RC2.1, just to recall those wonderful days of 2.0.x dev when we were in the embarrassing situation of having to patch RC's. That was fun. :P

If only they'd patch the one being used on this forum, I think it'd drive traffic substantially. I remember I tried boycotting this forum because they don't have a mobile theme - didn't last obviously. Hence, I use the website on desktop mostly.

Antechinus

Hey here's a fun trick. I'd already mentioned you can kick the responsive banner from partial width (45% or whatever) on large screens to full width on small screens, by just using min-width: 100%; in a media query at the end of index.css. The min-width overrides the max-width set in admin, and the logo goes full width. Useful if your logo is getting ridiculously tiny on phones.

So I've been idly messing around with this notion, on the basis that small things amuse small minds, and there are some extra tricks you can do too. Say you normally have a full width banner which has your site name over at the left, with lotsa eye candy filling up the rest (which is fairly normal). On small screens you can do trickery like this:

/* 384px at standard browser settings. */
@media screen and (max-width: 24em) {
#forum_title a {
overflow: hidden;
display: block;
}
#forum_banner {
max-width: 177vw !important;
min-height: 25vw;
}
}


It's necessary to use !important here* because you need to override the inline max-width set by the admin input, and you can't do that with descendants or ID's.

The numbers are chosen to match the natural proportions of the logo image (just under 7.1:1 in this case). 175vw is 175% of viewport width and 25vw is about 1/7.1 of that.

So what you'll see is the left 57% of your logo image, with the right 43% hidden off screen. Which could be quite useful sometimes. You could keep your site name visible and just hide a chunk of the eye candy. Obviously you can tweak it with as many media queries as you like, so it ends up being quite versatile with not much effort. :)


*This is one of the few cases where you should use !important in a CSS file. Some muppetz throw it around like confetti at a wedding because they don't know how CSS works. :P

Kindred

Quote from: Study Force on October 02, 2019, 09:56:57 PM
Quote from: Antechinus on October 02, 2019, 09:15:27 PM
I'll have an update out soon anyway. I'm thinking I should call it RC2.1, just to recall those wonderful days of 2.0.x dev when we were in the embarrassing situation of having to patch RC's. That was fun. :P

If only they'd patch the one being used on this forum, I think it'd drive traffic substantially. I remember I tried boycotting this forum because they don't have a mobile theme - didn't last obviously. Hence, I use the website on desktop mostly.

and yet, I use this site, pretty much 99% from my phone with no real issues....
yes, it could be prettier, but I have no problems with mobile access.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Biology Forums

Quote*This is one of the few cases where you should use !important in a CSS file. Some muppetz throw it around like confetti at a wedding because they don't know how CSS works. :P

😆 I do it when I'm frustrated and don't feel like finding the root cause. I'm guilty of that, I'll admit. But only under these strenuous circumstances

Gwenwyfar

Quote from: Kindred on October 03, 2019, 09:49:44 AM
Quote from: Study Force on October 02, 2019, 09:56:57 PM
Quote from: Antechinus on October 02, 2019, 09:15:27 PM
I'll have an update out soon anyway. I'm thinking I should call it RC2.1, just to recall those wonderful days of 2.0.x dev when we were in the embarrassing situation of having to patch RC's. That was fun. :P

If only they'd patch the one being used on this forum, I think it'd drive traffic substantially. I remember I tried boycotting this forum because they don't have a mobile theme - didn't last obviously. Hence, I use the website on desktop mostly.

and yet, I use this site, pretty much 99% from my phone with no real issues....
yes, it could be prettier, but I have no problems with mobile access.
Usability is a little more than just "being prettier" for me. And on that, it is bad, even if usable.

I also find the idea of "no mods evah" quite silly considering there are official mods that are not going to go away because they are "owned" by the team. Someone asks something? Just link them the mod. You need to fix something and the next version isn't coming for years? Fix it and put it up as a mod. You get to fix/update things in the official site and you give it to anyone else that wants it.

If you're "showing off the system" you might as well show off the mods. That's part of the package.
"It is impossible to communicate with one that does not wish to communicate"

Biology Forums

QuoteUsability is a little more than just "being prettier" for me. And on that, it is bad, even if usable.

☝️👍 Karma is native to SMF, yet it's not activated

Kindred

In short,  as usual gwen, I disagree with pretty much everything you just said.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Quote from: Study Force on October 03, 2019, 10:11:38 AM😆 I do it when I'm frustrated and don't feel like finding the root cause. I'm guilty of that, I'll admit. But only under these strenuous circumstances

Well yeah, I'll use it for temporary walloping too sometimes. It's just not a good idea to get into the habit of using it because it's the ultimate in specificity, so if you get to the next stage and need another override you're screwed. Then you have to backtrack and start digging anyway.

I've seen CSS for stuff (think it might have been a WP add-on) that had every frigging line of code declared as !important. I was looking at it and thinking "FFS, who really cares if somebody wants 6px padding there instead of 4px? Does this clown know what the word important means?" Just for the hell of it I went through the thing and removed every instance of !important. It worked just as well like that. :D

QuoteIf you're "showing off the system" you might as well show off the mods. That's part of the package.

They already have the custom site menu. That's a mod. Thin end of the wedge (which is a simple machine, by the way).

Antechinus

Quote from: Study Force on October 03, 2019, 11:27:04 AM
QuoteUsability is a little more than just "being prettier" for me. And on that, it is bad, even if usable.

☝️👍 Karma is native to SMF, yet it's not activated

That's because it's rubbish and everyone hates it anyway. :D

Gwenwyfar

Quote from: Kindred on October 03, 2019, 11:28:41 AM
In short,  as usual gwen, I disagree with pretty much everything you just said.
hahaha

In short, aaaalrighty then.
"It is impossible to communicate with one that does not wish to communicate"

Arantor

Quote from: Kindred on October 03, 2019, 11:28:41 AM
In short,  as usual gwen, I disagree with pretty much everything you just said.

Bit of a shame then that she has the right idea. This site is a showcase of what SMF can do, it sells itself pretty badly.

Advertisement: