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

It wasn't hard to do, and I don't like doing a crappy job. It's boring. ;)

I'll tidy up the code a bit. There's a lot of crud that could be dropped, and the header gradients would make more sense if the pseudos were on #header rather than #top_section. I think the index.css I used might have had a few edits before I started too. It was just off one of my local test sites and I often mess around with things on those. A few odds and sods seem bit broken, so I'll throw some vanilla files at it before I start rationalising the CSS.

I had a look at the Responsive Curve mod too, and it looks like it'll be easy to make it work with that. Haven't tried yet, but the code changes in the mod don't seem to be related to the basic theme graphics anyway.

Antechinus

Hey this is weird. I'm just looking through the code for Responsive Curve, and it has non-functional declarations in the CSS. Take this for example:

#menu_nav .dropmenu li a.active, #menu_nav .dropmenu li a.active:hover,
#menu_nav .dropmenu li:hover, #menu_nav .dropmenu li a:hover,
#menu_nav .dropmenu li a.firstlevel:hover, #menu_nav li:hover,
#menu_nav .dropmenu li:hover, #menu_nav .dropmenu li:hover a.firstlevel,


That's calling .dropmenu as a child of #menu_nav, but it isn't. It's the same bloody element:

echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';


So all of those declarations will not work in practice. They're just bloat. Beats me why there is so much use of !important too. That shouldn't be necessary. That mod's CSS needs a good going over. :P

Sir Osis of Liver

Quote from: Antechinus on August 31, 2019, 06:35:51 PM
That mod's CSS needs a good going over. :P

Needs more than that.  Couple of my guys are using it, had to fix some things to make it presentable.  Wasn't really a good idea to put it out there in the condition it's in.


Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Yes I've been getting into it a bit to see how it plays with the no-images thang. The no-images part is no problem. That plays nicely with everything, and I'm using the media queries to get rid of unwanted frame border-radius at smallish res (roundy corners look rubbish at 100% wrapper width).

Some of the mod's presentation is rough as guts though, and could easily be improved. The other problem is looking into this stuff reminds me of how gruesome default 2.0.x CSS is :P so I've been tidying that up a bit as I go. Have knocked it down from 55.1 kb to 51.2 already.

ETA: I think part of the problem is that whoever coded it lost the plot. It has a media query for 0 to 640px width, and another one for 0 to 480 px width, then there's another one for the 240 to 640px range. Which is not making a lot of sense.

Then there's another one for 0 to 720px, then one for 768 to 1024 px, but nothing for the 720 to 768 range. It looks like it was thrown together without any real overview of what it was all meant to be doing.

Kindred

Well, the main intention of that mod was to qualify the site as responsive enough to avoid the Google penalty,  which it does

Antes has been continuing to tweak the mod a little bit at a time
Сл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

Ok. Well I think people are saying it'd be nice if it was equally good for bots but better for humans. :)

I played around with it for a few hours. This was just starting from scratch and throwing my own media queries on the end of index.css, and doing a couple of minor template edits where they made sense. IOW, no mod as such.

The index.template.php edits just add the viewport tag, get rid of the (never used in a million years) calls for ie6, ie7 and webkit-specific css files, and clean up the buttonlist coding to simplify things. GenericMenu.template.php got one trivial edit to ditch a br.clear that wasn't needed any more, and Calendar.template.php got one to ditch that horrible inline crud that was screwing every other browser by trying to cater to IE6 and IE7. :P It won't hurt anything now.

The main default CSS has also been cleaned up to get rid of (ZOMG) overly-specific crudz and to put some bits of code in locations that make sense (instead of hiding some bits of code for a given element 5000 lines away from the rest of its code). It's about half cleaned up now. Also has the no images stuff of course.

At the moment the responsive CSS stuff is pretty sorted for index.template.php, BoardIndex.template.php, MessageIndex.template.php, Display.template.php, Calendar.template.php and Memberlist.template.php. Recent.template.php should be ok too (haven't checked on local yet) and a bit of a touch up will sort out PersonalMessages.template.php. Some of the RTL stuff is done too. IOW, the most commonly used pages for average punters are pretty good.

Haven't done anything with menus yet, but menus aren't a big deal. I'm thinking basic and bulletproof CSS toggles for the main menu and the sidebar should sort it (along with a bit of eye candy of course). Zip attached, with current state of play inside. :)

Biology Forums

Using this on every new SMF build moving forward, thank you so much!

Antechinus

I can tweak it some more without much trouble, but as I don't browse on phones myself I don't really have a good feel for what those users would require. I've just been going off common sense, and where things break as I reduce window size on desktop.

Have a play around with it and see what you think it actually needs (as opposed to everything that it could possibly get). I don't mind throwing a bit more time at this, but I wouldn't want to try and take it to the nth degree on every possible page. If it's generally pleasant for 90% of users on public/members pages, and usable for admins when necessary, then that's about as far as it would be reasonable to take it without rewriting the whole codebase.

Once it's sorted, I might update my old Curve variants with this stuff. :)

Antechinus

Ok, have tweaked it some more. I still need to set up hamburger-ish menus on small screens, do a bit more re-ordering and commenting of the CSS, and check some more things for RTL (turns out default Curve CSS ain't that great in RTL). Apart from those details, I think this is about as far as it's worth going for a basic Curve clean up.

So... :)

There is now some basic responsive stuff on the admin home page, but a lot of admin pages are always going to be gnarly on a phone.

The avatar in the theme header to is now linked to profile, coz everyone likes that, and has CSS to shrink it on small screens. The greeting and date are dropped on small screens now, for less clutter. Have also tweaked the presentation and sizing of poster details in posts and PMs. Images in posts and sigs now have automatic resizing, to prevent large images breaking layout.

Drops menus have full keyboard activation now (plus hover of course) without any js being required. You can tab through all the drop menu links if you want to, and they'll pop up where they should (albeit without the entire drop menu wrapper). A side effect is this also means that, unlike the defaults, the drop menu content will now be accessible to anyone who is using a screen reader. Which IIRC some strange bloke did set up sometime during 2.0.x dev, but which got reverted by someone else before Final. :P

The sidebar menu now has flyouts added, to give the same functionality as the drop menu system. Both of these have a .1s transition delay on hover, just to make them a bit more usable. I have an idea I'll end up just using the sidebar for small screens once it's hamburgered. The drop menu variant would effectively have to be turned into a hamburgered sidebar for small screens anyway, so it'd be a bit silly to have both.

Quickbuttons have been moved to the 2.1 position, below the post content, which IMO is a much more sensible location. Apart from being better for general usability and looks, it makes Display.template.php and PersonalMessages.template.php quickbuttons consistent with the default Recent.template.php and Profile.template.php quickbuttons. It also makes the responsive side of things a bit easier, because you don't have to cram the quickbuttons in with the post header stuff.

The inline "quick modify" has been incorporated into the quickbuttons too, via a bit of CSS trickery. It looks and works just like a standard quickbutton, but uses absolute positioning on the image and some image padding to make the whole button look and function normally without an anchor.

Oh yeah, I ditched the WAP link from the footer, because only people in caves still use WAP, and replaced that with a "Go to top of page" button. And with all of this whizzbangery, the index.css file is still a bit smaller than the default one. :D

I have done a bit more template editing, but most the edits are minimal and were done to rationalise CSS and responsiveness some more. For example, Themes.template.php had one isolated example of <li class="reset">, while all other examples of that class are ul's, so while I was running recursive searches for dumb things which kept biting me I ditched that just to make things saner. Have also ditched the ie6_header class, and superfluous spans that used to be for rounded corners in IE, from all templates which needed to be edited anyway. I don't think these edits will break any mods.

The only templates which might be problematic are index.template.php (several tweaks, obviously, but very minor ones), possibly BoardIndex.template.php (minor info centre tweaks), Display.template.php and PersonalMessages.template.php (repositioned quickbuttons, etc), and GenericMenu.template.php (quite a few changes).

New zip attached, if anyone wants to play with it and give feedback. :)

lurkalot

Quote from: Antechinus on September 02, 2019, 10:48:01 PM

New zip attached, if anyone wants to play with it and give feedback. :)

Just had a very quick run of it on my local, so far this looks amazing, all seems to work very nicely, and works well with TinyPortal so very happy with that.  Thank you.

Just one thing I noticed,

Quote from: Antechinus on September 02, 2019, 10:48:01 PM

Oh yeah, I ditched the WAP link from the footer, because only people in caves still use WAP, and replaced that with a "Go to top of page" button. And with all of this whizzbangery, the index.css file is still a bit smaller than the default one. :D


The WAP link is still there, but now in in the form of a nice button.






Antechinus

Say what? :P How did it do that? I have the same template running on my local, and the code is this:

<li class="last"><a href="#index_top">', $txt['go_up'], '</a></li>

Tell me, did you just apply the index.css to a bog standard index.template.php? Because that's the only way I can think of that you'd get that result. It which case sure, that would certainly happen.

Problem is that will also screw some other things, because I worked it up as a package with a few useful template edits. So if you want it to work the way it does on my local, make a copy of the default theme and throw in all (yes, this means all) the files in the zip.

I do not (this means not :D) want people saying "Oh hai! This bit here is borken!" while not bothering to mention they were trying the CSS files on a default vanilla template. That way lies madness.

Anyway, I have just been playing with teh hamburgerish menus. Got them working, in basic but quite tidy and usable form. Zip attached.

The hamburger menus on < 960px wide use the same markup as the standard menus. The automatic change over is done with pure CSS.

So note: this zip is intended to run with all the files inside it operational. Just thought I'd mention that. ;)

Edit: Zip removed as requested. New zip added further down in topic.

Biology Forums

Delightful to the eyes. Will run it shortly, and post my thoughts.

Thanks

Biology Forums

Here's the view I get when I drag everything inside the zip into /default:

I also removed all cached content

Antechinus

OK. I do remember seeing that sometimes when testing. I've been tweaking the menu CSS, and the two relevant templates got some slight tweaks too. Try this zip (contains index.css, index.template.php and GenericMenu.template.php).

I'm off to sleep now. Will check in tomorrow. :)

lurkalot

Quote from: Antechinus on September 03, 2019, 03:51:30 AM

Tell me, did you just apply the index.css to a bog standard index.template.php? Because that's the only way I can think of that you'd get that result. It which case sure, that would certainly happen.

make a copy of the default theme and throw in all (yes, this means all) the files in the zip.

So note: this zip is intended to run with all the files inside it operational. Just thought I'd mention that. ;)

Thanks, though I did actually make a copy of default and dumped all your files in it.  The zip you posted here  and here doesn't contain a index.template.php hence why I was having this problem.

Antechinus

Oh bugger. How on earth did I do that?  :P

Ok, sorry about that. Must have had brain fade.

Have attached another zip, which this time really does have index.template.php inside it, as well as all the other files.

Hey could you do me a favour? As you're on the team you should have post editing permissions, right? Would you mind deleting the earlier zips when you have the time? That might save some confusion down the track.

Anyway the new one should work.

lurkalot

No problem Antechinus.  Thought I was going a tad crazier than usual. lol.. 

The new zip works nicely, and theme is looking great.  8)

Thank you.

I deleted a couple of zips above, not sure if you wanted them all deleted or not.  I'll do that if you wish.

Antechinus

That's got rid of the worst of them, so no worries about the others. :)

Advertisement: