Adding a background to the Curve theme is very annoying with they rounded edge effect that comes with this file. Has anyone improved the file in one of their projects and would like to share it here?
The problem is that the CSS in 2.0 relies on it not having transparency as part of how it was built for IE6 back in 2009 when it was first released, so you'd need to change a lot more than just the image.
Of course this is a non issue in 2.1.
You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).
Quote from: Antes on August 30, 2019, 12:13:41 PM
You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).
I've started to, it's actually easier than I thought.
Quote from: Arantor on August 30, 2019, 12:09:23 PM
The problem is that the CSS in 2.0 relies on it not having transparency as part of how it was built for IE6 back in 2009 when it was first released, so you'd need to change a lot more than just the image.
Of course this is a non issue in 2.1.
Client is using 2.0; would prefer 2.1 though I wouldn't recommend it right now given its status
I've done a couple of Curve customizations that involved modifying the sprite, it's really not worth the effort. (I'm so sick of Curve :P, I guess from spending too much time here.) More recently have been doing a lot of work with backgrounds and transparent elements, all based on other themes. Just finishing up this one (https://ebook-mecca.com/), based on mobile-desktop (responsive). This one (https://www.ancientgreecereloaded.com/files/ancient_greece_reloaded_website/forum/index.php) is based on SychO's NightBreeze (responsive). This (http://www.thekrashsite.com/forum/index.php) is Crip's BacknBlack (not responsive). I always encourage forums to select a custom theme from the many available here, and then work with that, rather than Curve.
Yeah, curve is absolutely annoying to work on. It needs a complete rewrite
Quote from: Study Force on August 30, 2019, 01:09:21 PM
It needs a complete rewrite
Well, it has been rewritten, to Curve2. Have you tried working with that? :P ??? >:(
I created RDD theme exactly for this, so people can actually take its parts and/or adapt their themes.
Curve is not going to get any patches actually unless something gets horribly broken.
Quote from: Sir Osis of Liver on August 30, 2019, 01:14:41 PM
Quote from: Study Force on August 30, 2019, 01:09:21 PM
It needs a complete rewrite
Well, it has been rewritten, to Curve2. Have you tried working with that? :P ??? >:(
Is that the name for SMF 2.1's default theme?
Quote from: Antes on August 30, 2019, 01:43:54 PM
I created RDD theme exactly for this, so people can actually take its parts and/or adapt their themes.
Curve is not going to get any patches actually unless something gets horribly broken.
Is RDD a theme of yours?
Quote from: Study Force on August 30, 2019, 07:10:59 PM
Quote from: Sir Osis of Liver on August 30, 2019, 01:14:41 PM
Quote from: Study Force on August 30, 2019, 01:09:21 PM
It needs a complete rewrite
Well, it has been rewritten, to Curve2. Have you tried working with that? :P ??? >:(
Is that the name for SMF 2.1's default theme?
Quote from: Antes on August 30, 2019, 01:43:54 PM
I created RDD theme exactly for this, so people can actually take its parts and/or adapt their themes.
Curve is not going to get any patches actually unless something gets horribly broken.
Is RDD a theme of yours?
Yep Curve2 is the 2.1 default theme.
And the RDD theme Antes mentioned, https://custom.simplemachines.org/themes/index.php?lemma=2929
I use block's studio003 as a baseline... almost all css and no images
Fx-sabers.com/forum
Quote from: Antes on August 30, 2019, 12:13:41 PM
You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).
Back when I was on the team I came up with complete CSS for this. I think it's posted somewhere in one of the team boards, but offhand I can't remember where.
IIRC, JBlaze also came up with his own code for the same thing. Anyway, it's not hard to do.
mobile-desktop (https://custom.simplemachines.org/themes/index.php?lemma=2801%5C) uses linear-gradient for title bars and backgrounds, instead of sprite. The css is badly organized, but once you figure it out you can see how things work.
Yup, that's the way to do it, but you can get an exact visual duplicate of the original Curve too. Not that many people are likely to want that, but it can be done.
Quote from: Antechinus on August 30, 2019, 09:56:19 PM
Quote from: Antes on August 30, 2019, 12:13:41 PM
You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).
Back when I was on the team I came up with complete CSS for this. I think it's posted somewhere in one of the team boards, but offhand I can't remember where.
IIRC, JBlaze also came up with his own code for the same thing. Anyway, it's not hard to do.
I want 🤤
In retrospect, best had I started with a theme that's already stripped down. However, I ended up eliminating all those sprites with 2 hours, so either way it's not completely terrible.
Some sprites still remain, and they look blurry up close in mobile
Quote from: Study Force on August 30, 2019, 11:18:03 PMI want 🤤
Then you'll have to get a team member to dig it up for you. I no longer have access to the relevant board. IRC though it was pretty easy to do.
The basic theme wrapper is a piece of cake. That's just a div with a 1px grey border and a bit of border-radius. Some of the internal detailing was a bit trickier, if you want an exact match of all the original gradients.
The category/title header bars and the post backgrounds are as easy as the basic wrapper. They're only a few classes, and you just use border-radius instead of the extra spans, etc. The spans can be either set to display: none; or left with default sizing and positioning, but set to no background.
It is possible that the code in question may have made it into an early 2.1 alpha build, but I can't remember whether it did or not.
Ok, just for the heck of it I resurrected the thing from scratch. Note that this has not been optimised yet (there is commented-out CSS that could easily be removed entirely, among other things) but it all works as far as I can tell (have not checked absolutely everywhere).
Edited index.css file is attached so you can take a look. I haven't done the menu and other buttons yet (they are still using menu_gfx.png) but it's easy to do those just with CSS too.
Cool. Thanks Antechinus. 8)
Does it require, or work with the responsive Curve mod?
It's nothing to do with that mod, but it shouldn't be hard to make it compatible.
Updated it to sort the menu buttons, drop menus and buttonlists. The drop menus aren't an exact match for the originals, but are pretty close (can't do an exact match with the default markup and no images).
Updated index.css attached. Ignore the previous one. :)
Thank you, Antechinus
Will provide more insight soon
Update: You did an excellent job on this
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.
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
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.
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.
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
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. :)
Using this on every new SMF build moving forward, thank you so much!
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. :)
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. :)
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.
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.
Delightful to the eyes. Will run it shortly, and post my thoughts.
Thanks
Here's the view I get when I drag everything inside the zip into /default:
I also removed all cached content
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. :)
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 (https://www.simplemachines.org/community/index.php?topic=569433.msg4029994#msg4029994) and here (https://www.simplemachines.org/community/index.php?topic=569433.msg4030013#msg4030013) doesn't contain a index.template.php hence why I was having this problem.
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.
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.
That's got rid of the worst of them, so no worries about the others. :)
Just taking a quick look (been busy), would be nice if responsive dropmemu items highlight on hover, but it's way better than the tiny icons menu. I had modded it back to text menu buttons on the couple of forums I used responsive curve. Will catch up on this topic soon as I have time.
They should highlight on hover, if you mean the actual menu links. If you mean the hamburger triggers, I can easily make those highlight on hover if people think that would be better.
You've double spaced the sidebar menu links in pc view, is that intentional?
Absolutely. Two reasons. First, I decided to style the top level links for consistency, to match the other menus. Second, the greater spacing will be more usable on touchscreen. "PC view" isn't just for PC's. It will also be seen on a lot of tablets. There's a third reason too. I just happen to like the look of the greater spacing.
If you want to reduce it slightly that's a very simple CSS edit. Bear in mind that this is just a base theme. I expect people to frig around with it. My job is just to get it functioning in base form.
You did a phenomenal job. I made a small change, however, to the divider that appears when in mobile view. It's not necessary and makes the menu bar look out of place.
To replicate my change, in index.php, find
@media screen and (max-width: 960px) {
Add after:
#upper_section {
margin-bottom: 1em;
}
.navigate_section ul {
border-top: none;
}
Not it looks like (see 2nd attachment)
Make sure you remove browser cache to see it in action
Not a bad idea. I'll throw that in. :)
I have done some tweaking since the last zip, so I'll attach a new one in a few minutes (grab another coffee first, etc).
(I'm testing on local host, so I don't need to worry about the cache. A basic reload or page change updates the CSS when on local.)
Ok, next one. :)
Obviously it has the change mentioned just above (dropping top border from the linktree) but I coded it slightly differently for brevity (border: 0; instead of border: none; does exactly the same job, but saves a few bytes).
It also has another change to the linktree. I dropped the inline HTML entity (the >> thing) and substituted an ::after pseudo element to hold the dividers. This has the advantage that it can be easily changed in the CSS if you want different styling, or for RTL languages.
.navigate_section li::after {
font-size: 1.2em;
content: "\000BB";
}
.navigate_section .last::after {
display: none;
}
There are several other changes as well. The hamburgers now change to orange on hover, but with the menus being able to be keyboard activated I figured it needed some extra visual clues, so the hamburgers also now change to orange when the focus is on the hidden checkbox trigger. At this point you just hit your spacebar (if using Windows) and the menu will open. It functioned the same way before, but without the visual clue of the colour change it was not clear when you could trigger menu opening.
It also needed some tweaks for a11y, so the menus wouldn't be a PITA for anyone who wants to, or needs to, use keyboard navigation. And given that the menu opening is triggered by a checkbox and label, it made sense to give the label (the hamburger, for sighted users) some descriptive text so anyone on a screen reader wouldn't be wondering WTF that checkbox was doing in front of the menu.
So the hamburger markup is now done like this:
<input type="checkbox" id="main_menu_checkbox" class="hidden_checkbox" />
<div id="main_menu">
<label for="main_menu_checkbox" class="sidebar_toggle">', $txt['hamburger'], '</label>
With the text being:
$txt['hamburger'] = 'Menu visibility toggle';
Which should let people know "I can ignore that, since I'm using a screenreader anyway." This has required the use of a small ThemeStrings.english.php, but that's no drama. The descriptive text is hidden from sighted users by hidden overflow and 100% text-indent (simplest and easiest way of doing it).
I've also added skipnav links, for better usability with a keyboard or screenreader. The skipnav links are clearly visible on focus (but otherwise hidden) and of course have descriptive text. On page load, you can choose to skip the entire header and go straight to the content section. When in admin, profile, etc you can also choose to skip those menus (sidebar or drop) and go straight to the content on those pages. This saves a lot of tabbing through links you probably don't want at the time.
Next bit of trickery is this old dodge - Easy mod idea (multi language support stuff) (https://www.simplemachines.org/community/index.php?topic=523986.0) - which basically means you don't have to worry about new.gif for your new post indicators. You can just style it up any way you want in your CSS and it will always have automatic support for any language. Speaking of which, those indicators are now sitting to the left of the topic title link, which looks neater and will also make them more usable on touchscreen (due to no other links around them).
Menu coding has also been cleaned up. I got rid of the superfluous spans, which makes CSS easier and saves some bloat, and the old $additional_items PHP and CSS is no longer necessary, since that was only a fudge to make things look reasonable if anyone had so many drop menu links that they would overflow the height of the old menu_gfx.png.
Apart from that there is some minor clean up stuff: dropping a bit of daft stuff, re-ordering CSS declarations so things are in a more sensible arrangement and easier to find, tweaking of eye candy, etc, etc.
Re daft stuff: the old compat.css, ie6.css, ie7.css and webkit.css are never used these days. I emptied those files of their content, but have left them in place. This is mainly so I don't have to scroll past their crap when running recursive searches on the default theme folder, but it also saves a few kb of storage space. They're left in place just to prevent the slight possibility of occasional back end errors.
By the way, the images/theme folder is largely redundant now. The only one still in use is the quickbuttons.png sprite. All the other images in that folder are deprecated, so can be removed if you like.
This zip is the same deal as the previous ones. Just copy it all over. It should work. :)
Just wanted to say it's nice to see you fiddling with themes again, I'm still using a couple of your variants for 2.0 myself actually.
Oh cool. I didn't mind those. Prince of Darkness was always one of my favourites. :)
I'm thinking I might update them with this CSS once it's been tested some more. Could be useful for some people, and wouldn't be hard to do.
True story: At the time I made PoD, Bryan had the same idea. IOW, making a basic colour inversion of the default main_block.png and then adding a few tweaks to go with that. He wanted to call it "Negative". I convinced the team that "Prince of Darkness" sounded much cooler. :D
Yup, I like Prince of Darkness as well, that would be one of them :)
Choc being the other one.
Great job on this again. Just testing the latest files on my local.
I have noticed, that for me, the recently added "Go Up" button in the footer changes back to the old WAP link when you log out.
I'll get a chance to play more tonight.
That's an odd one. Doesn't happen with me on local host. Offhand I'm not sure what the cause would be. The coding there is very basic, and there is nothing that relies on user settings.
<li class="last"><a href="#index_top" id="go_top">', $txt['go_top'], '</a></li>
That's all there is to it. The only global is $txt, which was already declared by the default template anyway, and if the correct text is showing when logged in then the ThemeStrings file is loading correctly. Got me stumped at the moment.
I'd check if it is actually changing the url back to wap2, or if it is just changing the visible text and leaving the url as #index_top.
Not that I currently have a clue why it would do either of those weird things, but it's worth a look.
ETA: Oh hang on, I just thought of something. Is this a site where you have the real default Curve as site default, but where you have made a copy of the default for testing all this stuff? Because that would explain it. When logged in you'd be seeing the test copy, but when logged out you'd get actual default Curve, with the default wap2 link in the footer.
Quote from: Antechinus on September 06, 2019, 02:58:43 AM
ETA: Oh hang on, I just thought of something. Is this a site where you have the real default Curve as site default, but where you have made a copy of the default for testing all this stuff? Because that would explain it. When logged in you'd be seeing the test copy, but when logged out you'd get actual default Curve, with the default wap2 link in the footer.
:-[ You're bang on, that's the reason, I had switched theme quickly via my profile instead of making it overall default. So apologies are in order. Sorry.
Lol. I've done plenty of dumber things than that. :D Ok cool. It works the way it should then.
This messing around has got me thinking I should finish a mod I made (but never submitted) yonks ago. The default page index has got to be crap on touchscreen. I know this because it's crap on desktop, so has to be worse with fingers. :D
The mod I had mostly finished a while back replaces the page index with what is shown in the attached screenshot. The arrows each side of the select are next/previous page links, which is why there's only the "next" one visible on page 1 of the thread. The shots should make it clear how the things works. It's ideal for touchscreen and for keyboard activation. All of the gnarly bits of code are already done. It just needs a bit of tidying up here and there.
I just dragged it out of my stash of Jurassic files and tested it on this current little Curve clean up" thing. It would be perfect for use with this.
lol.., I use that on on fx-sabers with Bloc's Studio003 theme (well, it was that theme before I tore into it. :D)
using your memberlist replacement mod too...
Ha! You must have grabbed a test copy out of the Fiends board, coz IIRC that's the only place I ever posted it.
I'm thinking what it really needs to finish it off is edits to gets rid of the "Pages:" crap everywhere. Which is 67 edits in 21 files, but they're very trivial ones and are highly unlikely to ever conflict with anything else. Plus I'll set the XML operations for them to ignore the edit if there is a conflict, so extra safety there. Worst case scenario is a few stray ones might be left, and someone might have to edit them out of the template manually if they want the cleaner look (which I obviously would).
The other thing is I'm still thinking of the best way to mark up and present the rather cluttered combination of page index, buttonlists, up/down links, and next/previous links in Display.template.php so they all hang together in a sane way on smaller screens. I think I'll have that sorted soon. I'm getting a few ideas. :)
take a look at the way Bloc (with further modification from me) did it
https://www.fx-sabers.com/forum/index.php?topic=52766.0
I think that displays pretty nicely
Yes that's very similar to the original. The pseudo elements appear to be identical.
Could do with a bit of tweaking. The select height doesn't match the heights of the anchors each side of it, which looks a bit dodgey. You have to define the sizing of selects quite tightly to get them consistent.
Yours appears to be inheriting a height of 1.8 em from line 189 of your index.css. That's not odd in itself. What is odd is that it's apparently overriding the line-height, max-height, and min-height that are set by the mod's CSS. Damned if I know why it would, because usually max and min height would win out in the cascade, but form elements are weird things.
Suggested fix:
.navPages_select {
margin: 0;
padding: 0.3em 3.8em 0 3.4em;
line-height: 2.1em;
min-height: 2.4em;
max-height: 2.4em;
.navPages_select {
margin: 0;
padding: 0.3em 3.8em 0 3.4em;
line-height: 2.1em;
height: 2.4em;
min-height: 2.4em;
max-height: 2.4em;
That should nail the mongrel. If it does, I'll add it to the mod XML for belt and braces.
Had me a cunning idea. Turns out with the board index table you can do a nifty trick with very little code.
If you declare the td's as display: block; you can suddenly re-arrange them just like they were divs. Result is you can keep all information visible and neatly arranged all the way down to a 320 wide screen.
I'm still dropping the stats columns well before then, and also dropping the board description once things start getting tight, but essentially that's just to save extra scrolling. They wouldn't break the layout at all, and could be stacked like the others if you wanted to do that. This is all done with CSS (see screenshot). The basic table markup is the same as default.
Oh yeah, and there's none of that new-fangled grid or flex stuff involved either. It's just basic Jurassic floats. Doesn't need anything else. :)
.table_list td {
display: block;
}
.table_list .icon {
float: left;
width: 50px;
padding: 8px 0;
background: none;
}
.table_list .info, .table_list .lastpost {
width: auto;
margin-left: 50px;
padding: 6px;
}
.table_list .lastpost {
padding: 0 6px 6px;
line-height: 1.4em;
}
Now having come up with that trick for the board index, I naturally had a go at the message index/new replies/unread tables as well. They turn out to be more problematic, just because of the way their various bits and pieces are arranged.
This includes possibly having, or not having, participation icons and quick moderation checkboxes or icons, and having to keep the various background images and floated last post link images all behaving nicely together. It's a bit of a nightmare, so the message index etc topic tables are best left as boring old tables. Not quite as smooth to look at, but still perfectly usable.
Thats is perhaps the biggest trouble with table using display: block - it only works on the more simplified boardindex...
The question is perhaps if tables are wise to use for the layout of these collections of data in the first place. In essence, what do we require of messageindex?
1) a way to get inside a topic
2) see the subjects BEFORE we click
Thats all really. The other stuff is just extra info that ALSO are inside the topic and can possibly make us WANT to click/read it - or not. IMO that means messageindex should treated as a list, with possible extra info as a sublist or even just a text within the list - rather than a full blown table. Yes, its a table if you treat all the info equally important but it should not be, not to stay true to what a forum is: discussions and ways to categorise and interact with them.
Of course, this topic is about not changing existing markup and thats perfectly fine of course. Just wanted to point out some obstacles, IMHO, that stands in the way of creating truly responsive designs.
Welllll, having just posted that about the message index, it occurred to me that really the only problem is the default quick moderation options (checkboxes or icons over at the right). Those are a bit of a mongrel to deal with without rewriting a lot of the templating. I could do it easily enough, but don't want to for this little project.
However, the icons/checkboxes are really the only issue. So, if I simply force dropping of those via a media query then the problem literally disappears. :D It obviously means some loss of functionality for mods and admin on small screens but I think they can put up with that (would still be available on 800 and up).
All the in-topic moderation options would still be available, and those are pretty effective most of the time. AFAIK the ones on the message index are only ever used if you have to get rid of a large stack of spam posts, or very occasionally if you want to mass move a series of posts to a new board or category you've just created. Back when I was adminning I hardly ever used them.
So I think I'll do it that way. :)
(Oh and actually, I have been doing some markup changes here and there. Not big ones, just ones that it would be a bit bonkers to not do.)
Got the message index sorted. Frankly I like the cleaner look so much that I could even happily use it on desktop.
This then gave me an idea about the old memberlist mod. As long as you're happy with the default arrangement of elements within each table row, there's no reason why the same presentation as the mod couldn't be done on entirely standard markup. The benefit of doing it that way would be that it should automatically be compatible with any mods that insert extra stuff into the memberlist. It might need a couple of custom tweaks for presentation details, but it should all basically work. I whipped up a quick test as a proof of concept, and at the moment I can't see anything wrong with it.
Just installed Curve_CSS3 responsive_beta_5.zip. Thanks for assisting. Now if only they could add this to THIS forum, we'd have some mobile usability.
Glad you like it. I've been having fun trying out ideas.
They're pretty committed to not using modified themes on this site, on the basis that the home site should run what the software actually ships with.* Also, given the SMF name would be on the line, they wouldn't run it without thoroughly testing it themselves, and they have enough testing to do already (2.1, security patches for 2.0.x, etc). So although I'm pleased that you like the thing, it's not likely to be running on this site.
Speaking of testing, there will be another version out soon which has some bug fixes. For example, I found the hamburger was disappearing from view when using keyboard activation of the menu links. If you start tabbing away with b5 and light the hamburger up, but then keep tabbing without actually opening the menu, the hamburger vanishes. Took me a while to figure that out, but it's sorted now.
*Although this started as a very small CSS-only change to get rid of the main_block.png, it has rather gone beyond that. The template changes (even though they're not huge) would rule this one out as a site theme under standard SMF policy.
QuoteThey're pretty committed to not using modified themes on this site, on the basis that the home site should run what the software actually ships with.* Also, given the SMF name would be on the line, they wouldn't run it without thoroughly testing it themselves, and they have enough testing to do already (2.1, security patches for 2.0.x, etc). So although I'm pleased that you like the thing, it's not likely to be running on this site.
What the team should do is give us the option to change our theme to the mobile version. Why do they have to collectively punish those that use the website regularly?
What I didn't like about the theme you modified was the popup that appears when you click (go to top). I think that's unnecessary.
Quote*Although this started as a very small CSS-only change to get rid of the main_block.png, it has rather gone beyond that. The template changes (even though they're not huge) would rule this one out as a site theme under standard SMF policy.
This was a discussion that needed to happen. Something that should have been discussed in 2015 and implemented then. The graphical interface in an embarrassment to the online community - SMF has become a laughing stock because of their outdated theme
The link that the "Go top top" redirects you to is #index_top. That is coded to act as a skipnav link. See https://webaim.org/techniques/skipnav/ for an explanation. Particularly this part:
QuoteWithout some sort of system for bypassing the long list of links, some users are at a huge disadvantage. Consider users with no arm movement, who use computers by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys.
We used to have someone in exactly that situation regularly using this site. I've also run into people who rely on screen readers. They're not just hypothetical, and they do browse on mobile these days.
A skipnav link is something SMF should, IMO, have by default and naturally I coded it in line with AIM recommendations. It seemed an obvious thing to do with a target link for the top of the page (dual use FTW). In any browser I've tested (admittedly not many) clicking the "Go to top" link will send you there but will not actually set focus on the target link, which means you won't see it unless you start using the Tab key to progress through the page's sequence of links, in which case it will appear as it should. This seems to be standard browser behaviour, AFAICT.
You seem to be saying that your device or browser (whatever on earth that may be) is actually setting focus on the target link, causing the skipnav to appear even when you are not using keyboard navigation via the Tab key. If that is the case it's not hard to fix. I can simply include another anchor (with no fancy stuff attached) directly before the skipnav, and set that new anchor link as the target of "Go to top". That way the skipnav will still be functional, but it will be impossible for your device to set focus on it if you simply want the top of the page.
Ok, if you want a fix for that one (will be in the next beta too) you can do this:
Index.template.php:
<body><a href="#after_linktree" id="index_top">', $txt['index_top'], '</a>';
<body>';
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
<div id="wrapper" ',!empty($settings['forum_width']) ? 'style="width: ' . $settings['forum_width'] . '"' : '', '>
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
// Hidden "Go to top" target anchor, followed by skipnav, followed by forum wrapper, then header.
echo '
<a id="index_top"></a>
<a href="#after_linktree" id="skip_nav">', $txt['skip_nav'], '</a>
<div id="wrapper" ',!empty($settings['forum_width']) ? 'style="width: ' . $settings['forum_width'] . '"' : '', '>
Index.css:
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */
#index_top, #menu_skip {
position: absolute;
z-index: 9;
top: 0;
left: -99em;
padding: 9px 1em;
background-color: #fff;
color: #444;
font-weight: 700;
text-decoration: none;
border: 3px solid #fd9604;
border-radius: 0 0 8px 8px;
box-shadow: 0 3px 3px rgba(0,0,0,.6);
}
#index_top {
border-top: 0;
border-left: 0;
border-radius: 0 0 8px;
}
#index_top:focus, #menu_skip:focus {
left: 0;
outline: 0;
}
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */
/* Target anchor for "Go to top" button. */
#index_top {
position: absolute;
top: 0;
}
/* Skip navigation links, as per AIM standards. */
#skip_nav, #menu_skip {
position: absolute;
z-index: -9;
top: 0;
left: 0;
padding: 9px 1em;
background-color: #fff;
color: #444;
font-weight: 700;
text-decoration: none;
border: 3px solid #fd9604;
border-radius: 0 0 8px 8px;
box-shadow: 0 3px 3px rgba(0,0,0,.6);
opacity: 0;
transition: z-index 1s step-end, opacity 1s ease-in;
}
#skip_nav {
border-top: 0;
border-left: 0;
border-radius: 0 0 8px;
}
#skip_nav:focus, #menu_skip:focus {
z-index: 9;
opacity: 1;
transition: z-index .1s step-start, opacity .1s step-start;
}
That should make it behave nicely for you. It also tweaks the skipnav to have a fade-out when focus is removed, which is a trick that AIM use and recommend but which I had missed before (it means someone tabbing quickly has less chance of missing the skipnav if they're not expecting to see it). So, this should be better for everyone. :)
Thanks, Antechinus. The changes are great!
An update. The beta 5 release worked just fine for me, my comment was based on it being an added feature. I've never ever seen it on any other forum in my life. In fact, it's not even on popular social media apps, where if you click "go to top", a link appears saying "skip nav". I'm not sure where you got this idea, but it's completely strange to me.
QuoteWe used to have someone in exactly that situation regularly using this site. I've also run into people who rely on screen readers. They're not just hypothetical, and they do browse on mobile these days.
I know there might be 1 person in every n-thousand that may need accommodations, but as webmasters we need to accept that we cannot accomodate 100% of the population; 99.9% is good enough in most cases.
I got this idea from web standard accessibility guidelines. :D It has been part of them for at least a decade now. It's not hard to accommodate, and in a lot of situations it's even a legal requirement. Not so much for the average social forum, but if it's a business site then it definitely becomes a consideration.
In this case all that was required was two anchors and a little bit of CSS. It's not just handy for disabled people. Power users often use keyboard navigation too, even if they are perfectly capable of using a mouse.
Ideas for this are still percolating. I've been tweaking the message index some more, to get an arrangement that looks good to me on all screen widths without requiring spaghetti code. This one works with minimal CSS and mostly default markup, and IMO gives a good arrangement that flows well. It still needs a bit of adjustment for break points, and I can probably cut the CSS down a bit too. It may also benefit from removing some information on narrow screens (open to feedback on that, easy to change).
It did require a couple of minor edits to the template: one to remove the hard-coded line break in the stats cell, and one to add a conditional class to the last cell in each row (for the quick moderation options). I don't think it's worth allowing the icons option for quick moderation. It's arguably not as good for functionality as the checkboxes, even on desktop, and the clutter of tiny icons can't be good on a phone. So I've left the icons option in for now, but hidden by display: none; if selected in profile, just in case someone has the time and inclination to sort out a viable solution for them later.
I decided last night that the new post indicators were better as position: absolute; and offset to the left over the topic icons. This allows the topic headings to stay perfectly aligned with or without new content, and gives a good use for the space taken by the standard icon columns. The hover/focus style matches the default buttons.
I've also added the same style to the last post icons (basic CSS padding added to the standard gif, with background colour and border-radius). It's the same general idea as the way I handled the Inline Modify image, when I transferred that to the quickbuttons list. It gives a much larger and more obvious target for selecting the last post link, without requiring custom icons (this same tweak has also been added to such things as the help icons and tiny upshrinks strewn around the interface).
I think this thing is very close to being fully sorted. :)
Hi Antechinus, there's an issue with adding logos. If you add a logo, half of it is hidden, and isn't responsive either.
Looking forward to testing the next beta edition!
Aha! Yep I hadn't given those any thought yet. I know how to fix that. Will sort it later. :)
Quick fix:
Find:
/* The framing graphics. */
#header {
padding: 2px;
background-color: #fff;
border: 1px solid #aaa;
border-bottom: 0;
border-radius: 8px 8px 0 0;
}
#header .frame {
position: relative;
background-image: linear-gradient(#c8d6e7, #fff);
padding: 6px 20px 0 20px;
border-radius: 4px 4px 0 0;
}
#header .frame::after {
position: absolute;
display: block;
content: "";
top: 48px;
bottom: 0;
left: 5px;
right: 5px;
background-image: linear-gradient(#becbda, #fff);
border-radius: 6px 6px 0 0;
}
#top_section {
min-height: 60px;
}
/* The main title, restricted in line height. */
.forumtitle {
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
float: left;
}
/* Float these to the right. */
#siteslogan, #smflogo {
float: right;
line-height: 3em;
}
/* Upshrink image tweaks. */
#upshrink {
float: right;
margin: 1em;
}
/* Same for the SMF logo. */
#smflogo {
margin: 0 0 0 1em;
}
Replace:
/* The framing graphics. */
#header {
padding: 2px;
background-color: #fff;
border: 1px solid #aaa;
border-bottom: 0;
border-radius: 8px 8px 0 0;
}
#header .frame {
position: relative;
padding: 0 20px;
background-image: linear-gradient(#c8d6e7, #fff);
border-radius: 4px 4px 0 0;
}
#header .frame::after {
position: absolute;
display: block;
content: "";
top: 48px;
bottom: 0;
left: 5px;
right: 5px;
background-image: linear-gradient(#becbda, #fff);
border-radius: 6px 6px 0 0;
}
#top_section {
position: relative;
z-index: 1;
overflow: auto;
}
#top_section img {
max-width: 100%;
height: auto;
}
/* The main title, restricted in line height. */
.forumtitle {
display: inline-block;
line-height: 6rem;
font-size: 2.4rem;
font-family: Geneva, verdana, sans-serif;
}
/* Float these to the right. */
#siteslogan {
float: right;
padding: 10px 0;
line-height: 3em;
}
/* Upshrink image tweaks. */
#upshrink {
float: right;
margin: 9px 0;
}
There was a z-index issue with the pseudo that was used to mimic the default header gradient.
Damn, now I'm thinking about logos. :P
One of the most common requests is "How can I put a full-width banner on the default theme?". Which I and others have written instructions for, but which could still be so much simpler. It's so simple that it could have been done back in 2.0. RC days and, even IE6 would have been ok with it.
#top_section {
position: relative;
}
#siteslogan {
width: 300px;
position: absolute;
top: 1em;
right: 1em;
text-align: right;
}
.forumtitle img {
width: auto;
height: auto;
max-width: 100%;
}
This automatically takes the site slogan/smf logo/upshrink button out of the way of everything else in #top_section. That in turn means you can just throw any damned banner image you like at the theme setting in admin and it will just plain work. It will always fit the header on any size screen, providing you use an image wide enough for large monitors. The slogan and upshrink will just sit on top of it without pushing anything out of place.
Oh yeah: no need to float anything either, so no need to write code for floats or to clear floats, and no need to worry about how to centre the logo if they want to do that.
Just put .forumtitle {text-align: center;} anywhere in the CSS file.
This is such a no-brainer, and would have saved so many support requests, that it really should have been part of the standard CSS. :P
Which it wasn't, because some muppet was too busy debugging things in IE6 and RTL languages to think of it at the time. But no other muppets had the sense to think of it either, so this muppet is going to blame them. :D
Anyway, I will add it to this revamp thing.
max-width didn't come along until IE8 though...
Seriously though, great work.
Good point. I had forgotten some things about IE6. It would have had to have hidden overflow as a backup. That would have worked (although the image would still not have scaled for height). The absolute positioning of the slogan/upshrink would have been fine too. It's just one of those ideas that's so obviously good for idiot-proofing, once I thought of it, that I'm amazed it was never considered for default. It's the ideal way to prevent newbies from breaking their default theme layout.
The other thing that has occurred to me now is you have an admin setting for choosing to show an image or a slogan at top right, but what if you don't want either? Sure, you can swap the default SMF logo for a blank transparent image and get around it that way, but it seems a bit bonkers to have to do that. It would make more sense to have three options: SMF logo (or custom replacement image), text slogan, or nothing at all (ideal if running a full width custom banner in the h1).
ETA: Come to think of it, stuff it. I'm going to bite the bullet and do something that's been bugging me for a while now.
The basic index.template.php markup is cluttered and somewhat brittle. The full-width banner thing is a good example. The header section is marked up as #wrapper > #header > .frame > (#top_section + #upper_section + #main_menu). This means that if someone wants a full-width banner they will probably want to get rid of the side padding between #header and .frame, but then that requires editing padding for the other children of .frame. It's not the end of the world, but it's a nuisance and it can be made easier.
If the markup is changed to just #wrapper > #header > (#top_section + #upper_section + #main_menu) then suddenly any change to padding in #top_section leaves the other elements unaffected. Which is good. Furthermore, it has just occurred to me that it is easy to set #top_section up perfectly for full-width banners. All that it needs is 0 padding all round, with text-indent: 1em; on .forumtitle. This will set any header text in nicely from the left edge of the header, but will have no effect on an image. So if you just have the default setting of the forum name in text form it will look right, and if you suddenly switch that for a massive banner it will also automatically look right. No code edits required at all. Totally n00b-friendly. :)
Ok, got it sorted. Turns out it was slightly trickier than I expected with the text-indent. The point I'd forgotten is that text-indent only works on inline elements that are the direct children of a block level element.
In other words, setting text-indent 0.7em on the h1 will indent the text as expected. It does this by shunting the anchor over by 0.7em and it all works. If you just had plain text directly inside the h1 (no anchor wrapping the text) that would also work.
However, if you set the text indent on the anchor, and the anchor is at its default inline display, then the text will not be indented. Now it would be possible to get around this by setting the anchor to display: block; but the drawback of that is someone might not want it extending across the full width of the header (for example, if they only want a smallish banner). Leaving it at the default inline display allows it to shrink to wrap any size banner, which is good.
You might think the next dodge would be to declare the anchor as display: inline-block; but there's a catch to that too. While it will certainly make the text indent work, and will also allow the anchor to shrink to the size of the banner, inline-block has an automatic right margin of approximately 4px (one character space at standard font settings). This means that if your image expands to 100% width the 4 px margin will be added to that, giving a total width slightly over the desired 100% and introducing a minor break in your layout.
The solution is easy though. You simply add the text-indent to the h1, and then add a matching negative left margin to the image itself. The result is the text will sit where you want it, when you have text, and when you use an image it will never exceed 100% width and will have perfect lateral alignment. And, since the old .frame has gone now, if you do want to adjust any padding or whatever in the #top_section (for example, if you want a wider frame around your banner) it can be done completely independently of the user/news section.
Code looks like this:
/* H1 - The main forum heading, linked to the home page. */
/* In default text format. */
#forum_title {
margin-bottom: 20px;
line-height: 2em;
font-size: 2em;
text-indent: .7em;
}
/* As optional image banner. */
/* Note: For a full-width banner to fit the header perfectly, */
/* the negative left margin must match the text-indent above. */
#forum_banner {
max-width: 100%;
height: auto;
margin-left: -.7em;
border-radius: 6px 6px 0 0;
}
/* Default SMF logo, or site slogan, at upper right. */
#siteslogan {
display: inline-block;
position: absolute;
top: 10px;
right: 1em;
color: #346;
font-weight: 700;
line-height: 3em;
}
/* Header collapse/expand icon. */
#upshrink {
float: right;
padding: 7px;
border: 2px solid #0000;
border-radius: 50%;
}
#upshrink:hover {
background: #5a6c85;
border-color: #fff;
}
Screenshots show what happens when you switch the admin setting from text title to full-width image. The result is automatic. No tweaking of CSS required. :)
But Antechinus: wah wah wah YOU JUST SHRUNK EVERYTHING DOWN AND YOU HAZ NO IDEA WHAT YOU DOING, DIS IZ NOT RESPONSIVE
... as someone here once told me back in 2015. I find it funny that your messageindex is almost the same. Although my plan was to not edit the html.
(And yeah, I'm still bitter about that, apparently anything I ever do is a stupid idea anyway).
[/endrant]
Sorry to disturb your topic, carry on, there's some nice stuff in ther :D
I have no idea what you are talking about. :D
I started off intending to not edit the markup, but honestly there are just too many silly things that are so easy to fix. It just doesn't really make sense to not do some minor markup changes. Less stress all round.
It made sense for the intended purpose and the context. But it doesn't matter anyway.
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
Not sure what you mean with the pseudo. Maybe add it to your test copy and screenshot it. ;)
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:
#upshrink {
width: 22px;
/* Plus whatever other declarations you want to use. */
}
Quote from: Antechinus on September 10, 2019, 05:40:56 PM
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!
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. :)
you gonna drop a new zip? :P
:drool:
Actually, before you do package it, noticed an issue.
Before I package it, I noticed several issues. :D 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.
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.
Ha! That's the worst thing. :D
Anyway, have got the menu CSS rationalised. Have also put a warning for newbies:
/* 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:
<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:
.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. :P 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. :)
*sneaks into the topic, don't mind me, I'm just following this, though slightly confused, great work*
No worries. Feel free to ask questions if there's anything you're curious about. :)
Meh. Bloody themes. Whose idea was this anyway? :P
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. :P 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 :P) and then will do another zip.
I forget, are you packaging this as a separate theme or as a mod to apply on top of Curve, like the original one?
Quote from: Antechinus on September 13, 2019, 12:17:23 PM
Meh. Bloody themes. Whose idea was this anyway? :P
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. :P 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 :P) and then will do another zip.
Yeah, whose idea was that heh :D
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. :D
Quote from: Kindred on September 13, 2019, 12:24:08 PM
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).
Quote from: Bloc on September 13, 2019, 03:15:00 PMYeah, whose idea was that heh :D
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. :D
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". :P 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.
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. :D
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.
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?
Quote from: Study Force on September 14, 2019, 02:58:54 PM
Looking great. Can't wait to install!
Me too. ;) I'm especially interested in the full width banner in the example above, I think I could make good use of that setup..
Quote from: Study Force on September 14, 2019, 02:58:54 PMLooking 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?
It probably can, if you're prepared to throw enough code and determination at it. I'm not prepared to do that.
Obviously there's no point displaying a "next page" link when there's no next page, so the page index in Subs.php is coded to not echo it to the browser in that situation. I could recode it to echo an anchor with no href instead, but that will confuse somebody sooner or later.
The way it works is that the select has 40px padding left and right, and the anchors sit over that. This keeps it nice and compact if the browser doesn't allow styling of selects, and insists on forcing the default dropdown arrow. But obviously when there's no anchor you see the padding. It doesn't bother me. I'm happy with the overall size of that bullet staying consistent.
If you're not happy with it then you (meaning not me) are welcome to code something you prefer.
ETA: Hmm. Stuff it. Now I'm thinking again, and that always means trouble.
Personally I use a Gecko-based browser (or whatever they're calling Gecko these days) and that allows styling of selects. I think Webkit will also allow it if you declare -webkit-appearance: none; but since I've not been coding for a while I haven't tried that recently. No idea what Android does either. I could charge the battery in the old Android tablet I never use and see how it goes, but frankly cannot be bothered at the moment (serious dedication is a thing, y'know).
However, since I personally only give a rat's about Gecko (do they still call it that?) then I could style the selects up with a much smaller side padding. The anchors can still be positioned where I want them by simply changing the left and right declarations, so that's easy.
Naturally, if I do this, someone will rock up using a browser that does not allow styling of selects, and will demand that I sort a solution for them. :P At which point I may refer them to my previous answer. :)
Once I get my hands on it, I'll see what I can do to make it look more pleasant to my eyes.
Thanks for the explanation
Damn. I had an idea. :P
Obviously the function in Subs.php knows whether there's a next or previous page. So, I can use that to append a class to the page index wrapper. Something obvious and idot-proof like .pageindex_wrapper.first and .pageindex_wrapper.last would be ok.
That way it becomes stylable in the CSS without any extra logic shenanigans. You'd just do it like this:
.pageindex_wrapper. {
margin: 0 40px;
}
.pageindex_wrapper.first {
margin-left: 0;
}
.pageindex_wrapper.last {
margin-right: 0;
}
The reason you will need the switchable margins is that the anchors are absolute positioned, which means they don't have any ability to push other things sideways. All the pushing has to be done by the wrapper, so the margins have to be on that, and they have to be wide enough to keep things clear of the anchors when those are displayed (there will always be at least one).
Why not just static or relative position the anchors? Two reasons. First, absolute lets them hide default select ends if you can't style those away in whatever browser. Second, form elements like selects are notorious for inconsistent cross-browser and cross-platform behaviour.
Basically everyone just implements them in their own way, which makes predicting the height with any given font-size and line-height very tricky (read damned near impossible). But, if the anchors are absolute positioned they can be set to top: 0; and bottom: 0; and that makes them automatically stretch to the height of the wrapper, and the wrapper will be the height of the select, so it will always work.
Always work is good. :)
Ok, sorted. Now whatever you do, don't come up with any more ideas for improvements. :P
Gorgeous 👍👍👍
Quote from: Antechinus on September 15, 2019, 09:06:07 AM
Ok, sorted. Now whatever you do, don't come up with any more ideas for improvements. :P
I can't make any guarantees once you've uploaded the latest version, but it sure looks sweet!
What happens if you throw a 100 page topic at it? 1000 pages? Do you end up with a 1000 item dropdown?
Firefox (and derivatives) seem to default to auto overflow on the options list once you have a few dozen pages. That's still quick to scroll via keyboard, but yes 1,000 pages would be a bit much. TBH my instincts are to say that anyone who allows 1,000 page threads deserves what they get.
OTOH, it's a bit much with the default page index too. That's a PITA once you have 100 pages, so I'm not sure this would be any worse on long topics. However, if you have any ideas on how to better handle long topics I'm all ears. The only ones I can think of would be first page and last page buttons, which shouldn't be hard to code, but then they take up extra gui space
Have been doing a bit more tidying up on this. One of the things I have been trying to do is keep the index.css file size down, without cramping it for formatting or skimping on comments. It's been a bit of a thing for me to keep it no bigger than the default file (55.1 kB) despite all the extra trickery it has. Have managed to do it too. :)
But then I was thinking about editor.css. That only had about a dozen lines of codes in it, which seemed like a waste of an http request, but it's going to be called anyway due to the back end code. A bit of messing around made it obvious that a chunk of stuff in index.css could be moved over to editor.css, which will save a bit of processing when not using the reply/modify page. So editor.css is now 3.3 kB of useful bits, including a little bit of responsive, and index.css is down to 53.8 kB.
If you're clever with teh mathematics stuff you might be thinking that 55.1 - 3.3 =/= 53.8, and you'd be right. I added a bit to the code that was moved to editor.css. Thought that while I was messing with it I might as well freshen the editor page up a little bit. Got rid of the old background gifs, ditched the dividers, threw a CSS gradient at the button backgrounds, and tweaked things a bit to make them more finger-friendly. The gradient is the same one as used in the theme's header, and I think it fits well here. I'm liking it a lot.
The other bright idea I had was fixing one of my old sins, namely the default bottom border on BBC links. This tends to look pox on linked images. :P The reason I talked the team into it originally was that people thought the links in posts needed something to make them more noticeable, but I was finding a standard text-decoration: underline; in the links' #346 colour was too distracting when reading. It sits just below the text baseline, and slices through any letters which extend down from there. I find the effect much like trying to read text that has a strikethrough. So we decided bottom border was the way to go, because that sits clear of the text, and linked images have been pox ever since. :D
So today I was looking up some CSS bits and found out that text-decoration: underline; is a bit like CSS borders. You can choose any colour you like. It doesn't have to be the same as the link colour. Which I never knew, after years of frigging around with CSS. :P This means you can get a nicer and more subtle underline. The other thing is that these days we have box-shadow too, and if you declare a box-shadow with a zero blur radius it makes a nice straight line, and if you declare it as inset then it will make a nice underline beneath your text, but if an image is linked it will be behind the image background. As long as the image has an opaque background, no border will be visible. If the image is transparent across the bottom edge the inset box-shadow is visible, but not particularly obtrusive.
The upshot of this is that links in posts, etc now have an inset box-shadow by default, but on hover or focus they also get text-decoration: underline; which gives a double bottom border effect. I think this is a good solution. I find it easy to scan while reading, it gives a clear indication on mouseover, and linked images don't look like pox. I'm quite chuffed with this simple little bit of CSS. :)
/* @WIP: Styling for BBC tags */
.bbc_link:link, .bbc_link:visited {
box-shadow: inset 0 -1px 0 #aaa;
}
.bbc_link:hover, .bbc_link:focus {
text-decoration: underline #666;
box-shadow: inset 0 -1px 0 #666;
}
Double underline on links? :) Its a different look no doubt..but not something I would use I think.
At least it's not dashed or wavy. :D
It's only on hover or focus. Single underline the rest of the time. The double-underlined link in the middle of that screenshot had my cursor over it, but that doesn't show up in the screenshot.
I like it. It's clear, but not harsh or crude (providing the colours are chosen well). The other alternative would be to simply double the width of the inset box-shadow on hover or focus, which is simply a matter of changing the y-axis value to -2px.
ETA: Come to think of it, that may be better.
Ok fearless beta testers: you asked for it. Here it is. Another effing zip. :D
I'm getting cocky and calling this RC1. I think it's good enough for that.
As before, this is a collection of loose files which need to be dropped into the folder of an existing theme (default, or a copy thereof).
Also attached is a zip for the page index mod, which is now gloriously titled the Dangerous Marsupial Page Index. :P
However, it should not really be all that dangerous. I just called it that for fun. I have tested it, and it installs and uninstalls cleanly on any theme I had to hand, although for some it would benefit from custom CSS for select sizing, colour scheme, etc.
Do note that the mod has not yet been checked and approved by the SMF mod team.
Nice, I will have a play with it...
first thing I noticed is that the layout still has the same issue with the quick reply box that responsive Curve has: the quick reply box is not responsive...
Will need more details. You know how bug reports work. It's fine on my box, all the way down to 240px wide.
Just tested it on Opera (latest version) and on IE8 (because I could). Perfect in both.
ETA: Oh, if you're not testing it on local host, did you hard refresh to clear the old cached CSS?
Just checked the Responsive Curve mod code (v 1.0) and it doesn't contain anything that refers to the quick reply. So that bug you're seeing cannot be the fault of that mod. It must be coming from default 2.0.x code, or from interference from some other mod you have installed.
I am using Chrome, and Yes I have cleared cache.
This issue seems to occur in Chrome, not in other browsers... :'(
As I stated: this issue also occurs in responsive Curve, so indeed you will not find any corrections for it there...
I think I reported this in the responsive Curve thread a while ago, can't find the report back ATM...
Yeah I just had a look through that thread, and while there were grumbles about all sorts of things there were none about an overflow on the quick reply.
I'll grab Chrome and play with it. What width does it start breaking at for you?
Ok, downloaded and installed Chrome. Like Opera, it won't go below 480px wide on desktop. This seems to be hard-coded, in typical Google "We don't want this thing to be actually useful and we won't let you customise our precious interface" fashion. :P
However, the quick reply scales perfectly with Chrome, on Windoze 7, down to a screen width of 480px.
Aha! I had a bright idea, and installed TP 1.6.3 on my local 2.0.x site. Suddenly, the quick reply breaks in Chrome. Pretty clear where it's coming from then. Bloody mod authors. Go give them Hell. :D
TP does some stuff to textareas/quickreply..or at least it used to. Not sure now, but this might indicate it does still.
As always when testing: one with mods, one without(preferable this one first :D )
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.
.editor
{
height: 100px;
width: 635px;
max-width: 95%;
min-width: 90%;
margin: 0.25em 0 1em 0;
}
.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.
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'....
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.
https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc
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
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.
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.
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".
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 :(
That doesn't mean anyone has to use it. ;)
Anyway, have implemented that conditional to deal with av vs no av. It works. :)
You wish, I have clients (think gov and NGO) who have tons of internal systems and haven't even moved beyond the impending EOL of Windows 7 yet :(
Thank god estimations of IE mobile usage are below the 0.0% line. And opera mini is apparently meant to not work with anything so that's their problem.
I don't have to support it anymore than I want to. I spent hours debugging 2.0.x in IE6, simply because the team had made a commitment that it would work in IE6. By the time I was finished, 2.0.x had taken so long (due to a range of factors) that nobody cared about IE6 by the time it went Final. The result was all that time and energy was wasted.
I am not going through that again. Not for a project like this little "Curve clean up". ****** IE. In all its pestilential manifestations.
But I might, after everything else, including RTL for sane browsers, is sorted, make basic support for IE11 as the aforementioned "I'm with Stupid" variant. Every time someone wants it, they'll have to choose "I''m with Stupid". :D
Fair enough, I was just lamenting that I'm stuck with Incessantly Evil for a while yet.
Oh sure, I understand that is going to be the pits. At least you're getting paid for it though. Life's too short to waste it debugging IE for free.
I used to call it Infernal Themerooter.
Anyway, on a lighter and more interesting note, I've been playing with menus. Using display: none; on them is usually bad for a11y, unless you implement some other enhancements. No good for pure CSS drops. Nobody can find them if they aren't using eyesight and a mouse.
I twigged to something though. It's actually a really good idea for the hamburgered menus. Usually with something like the admin menu you'd want a skipnav thrown in to get past the humungous sequence of links. But if you use display: none; for the hamburgered menus only that's effectively a built-in skipnav. Anyone on a screen reader will still be fine, because they'll be notified of the checkbox trigger and its state, and will have the label read out to them. All they have to do is check or uncheck it when they want the menu, and otherwise they just go straight past.
Similar situation for someone like Crip. They can see when it hits focus on the trigger and select or not as they please. If they don't want the menu they just tap to the next link. Based on this, there would be a good arguments for having the menus permanently hamburgered on any res as an a11y measure.
Doesn't work with the standard "see it all the time" menu though, not if it's pure CSS, because then there's no way of triggering the change from display none to display block if you're not using eyesight and a mouse. So those are still better using left positioning, which is still easy to set up and perfectly reliable as long as you set your positioning in px rather than em. And skipnavs for those, of course.
Quote from: Antechinus on September 18, 2019, 08:13:24 AM
Oh sure, I understand that is going to be the pits. At least you're getting paid for it though. Life's too short to waste it debugging IE for free.
I used to call it Infernal Themerooter.
I like to call it the party pooper. Everyone is having a party with nice functions and IE comes smear it's ****** all over it just to ruin a nice thing.
I hate IE. Utterly loathe it. Although IE8 and IE9 weren't that bad for their day in that at least they implemented CSS2 properly, which was a big advance over 6 and 7. In fact they were better at it in some ways than browsers like Safari (the current Safari on iPhone is still unable to handle absolute positioning of pseudo elements). But they were still always woefully behind on some other things. And shipping IE11 with borked flexbox handling is just inexcusable.
At least flexbox *works*, despite the borked handling. Grid is way worse. The one thing you most want it to do doesn't work, which is automatic columns/rows... it tosses everything into #1 and if you want things to go elsewhere you need to specify it... one by one.
Might be better off using old school stuff then, if you have to support it. TBH I only threw some flexbox in this one because I realised it'd be handy for a few details. Don't actually need it. Not really. Nicer with it though.
Haven't played with grid yet.
Exactly, unless you know the amount of items (and it isn't more than a couple), it pretty much makes it useless :(
Well for one simple use case, it makes anything with two (or more) side-by-side things with floats work nicely as they should, without all the pain floats usually are. Flex doesn't do this too well because you can't tell it to wrap at specific points.
display: grid; item-1: column 1; item-2: column 2, aand you're good to go.
I haven't played a lot with it yet either, but even those simple cases are already well worth it... if you get to ignore the party pooper :D
Why even bother making IE11 or IE9-8-7 work? The less they are supported the sooner they will die. :D I am not supporting in any kind of way, modern browsers do things the correct way.
I have used grids extensively for a while, and they are great. Doesn't solve all problems, but combine with flex here and there and you never need to float anything. Not for layout purposes at least.
Sure, but there's nothing wrong with floats where they will do the job. If something is as simple as declaring overflow on a parent or sibling and float on a child, then that's minimal coding and there's no real reason not to use it. Grid is probably great for more complex things, but unnecessarily verbose for simple things.
Table-cell is another good one that has some of the benefits of flex. For normal purposes the only thing it won't do is the equivalent of flex-wrap, but then inline-block will often be just as good for that. The more tricks we have up our sleeves, the better.
I have no intention of offering any support for IE 8 or 9, but I checked and user stats for IE11 are actually quite significant. The previous beta of this thing (b5) would have been fine with IE11 as that didn't use flex at all. I only threw flex on #upper_section because it was useful for a touch of detailing, not because it was necessary to make things work. Floats were working just fine there, and I could have achieved the same small improvement as flex by using display: table-cell; instead. Both are flexy and won't break layout, both have automatic RTL support, and both are easily made responsive by declaring display: block instead;.
The main reason I went with flex is because of this: need help moving stuff around... (https://www.simplemachines.org/community/index.php?topic=569531.msg4031222#msg4031222)
Sticky post footers on short posts are something that has been requested by people for years, and I thought I could make it work with flex (not having tried flex at all before). The sticky footer tutorials I read didn't work for this application, which annoyed me, so I got in one of my determined moods and figured out how to make it work. :D Having used flex there I figured I might as well use it in the header too. But I could easily do the posts with table-cell or the original float, at the minor cost of not having sticky post footers on short posts, and IE11 would be fine with that.
The hamburger needs to be changed anyway because it's not just wonky in IE11. It's wonky in Safari/iShiz too. Which is getting a bit much to ignore (even though I'm pissed at Apple for not fixing longstanding bugs in Safari/iShiz).
Haven't checked what the hamburger consist of..pure CSS? Testing such a thing right now, as opposed to image or icontype, which I used in Tsunami.
Flex is still a bit of a mystery to me..but thats prob. becasue I don't use it much. For the case you linked I would simply use a main grid on poster and post areas: grid-template-columns: 20rem 1fr; and then a height: 100% and grid-template-rows: 2rem 1fr auto; on the post area. Meaning the post "header"(title++) would have a set height of 2rem(could be auto too) and the footer takes what it needs(signature etc) since its auto. The remaining height will be available to the post, as in "1fr". Mind you, haven't tested this :D but just to show what it would mean using grid instead.
Read in several articles that if you stick with flex for horisontal/one direction layouts and grids for 2-dimensional, you should have the best of both worlds.
Yup, I've read the same comment about flex vs grid. But, y'know, I'm kinda old and lazy, so don't really want to learn grid this week :D
And yes, the hamburgers were pure CSS. Code was like this:
.sidebar_toggle {
position: relative;
display: block;
width: 30px;
height: 11px;
margin: 4px 0 6px;
overflow: hidden;
text-indent: 100%;
border-top: 5px solid #77899d;
border-bottom: 5px solid #77899d;
}
.sidebar_toggle::before {
position: absolute;
top: 3px;
left: 0;
width: 100%;
content: "";
border-top: 5px solid #77899d;
}
Which was fine in most browsers, AFAICT, but both Safari on iShiz and IE11 on W7 couldn't handle that presentation of the pseudo.
They both insisted on applying the top positioning as if the toggle had been declared as border-box (which it wasn't). They placed the top of the pseudo 3px down from the top of the top border, instead of 3px down from the the top of the parent, where it should be.
They also insisted on applying extra width to the pseudo, as if the parent had left and right borders (which it doesn't). So a bit stupid, them there browsers. :D
I'd go with an image if you're worried about either of them, and are determined to have a hamburger.
Quote from: Antechinus on September 18, 2019, 04:36:01 PM
Sure, but there's nothing wrong with floats where they will do the job. If something is as simple as declaring overflow on a parent or sibling and float on a child, then that's minimal coding and there's no real reason not to use it. Grid is probably great for more complex things, but unnecessarily verbose for simple things.
Can you make a float identify the width of the content and only use that (while resizing every other row accordingly) and automatically resize everything else to fit? ;)
And if you're doing a pair in floats that's actually more verbose for the same end.
I never said you could. I said floats were still fine for simple things.
It's really not verbose for simple things though. And even if it were a bit, the annoyance of floats not ever matching the content (a random percent that is way above what you need, just to be sure it fits, while you leave a huge empty space in-between 99% of the time) is not nice at all.
Floats are still fine if you don't want to line anything up with them.
Also: I have a new theory: Antechinus is a bot. Or maybe that's an old theory.
/me runs
Quote from: Antechinus on September 18, 2019, 06:11:43 PM
Yup, I've read the same comment about flex vs grid. But, y'know, I'm kinda old and lazy, so don't really want to learn grid this week :D
And yes, the hamburgers were pure CSS. Code was like this:
.sidebar_toggle {
position: relative;
display: block;
width: 30px;
height: 11px;
margin: 4px 0 6px;
overflow: hidden;
text-indent: 100%;
border-top: 5px solid #77899d;
border-bottom: 5px solid #77899d;
}
.sidebar_toggle::before {
position: absolute;
top: 3px;
left: 0;
width: 100%;
content: "";
border-top: 5px solid #77899d;
}
Which was fine in most browsers, AFAICT, but both Safari on iShiz and IE11 on W7 couldn't handle that presentation of the pseudo.
They both insisted on applying the top positioning as if the toggle had been declared as border-box (which it wasn't). They placed the top of the pseudo 3px down from the top of the top border, instead of 3px down from the the top of the parent, where it should be.
They also insisted on applying extra width to the pseudo, as if the parent had left and right borders (which it doesn't). So a bit stupid, them there browsers. :D
I'd go with an image if you're worried about either of them, and are determined to have a hamburger.
Would using a couple of nested spans instead of :after work better? Of course it means adding some markup code..but it will avoid the whole issue. I have had some diffculties getting :after and :before code to behave as expected, that is, act like a proper block element. Probably because its, you know, a part of whatever its :after or :before to.
Probably could do it with extra markup, but at that point is it really any better than a background image that shifts X position on hover or focus? Has the advantage that you can change colour by editing the CSS instead of the image, but apart from that? Bear in mind that I want hidden text for a11y as well, so it's just more rigmarole if I start nesting markup.
Although I have to say that I am currently sold on visible text labelling, at least for the admin/profile/etc menus. Having two unlabelled hamburgers on screen at the same time is not really all that good, IMO.
ETA: Oh hey, here's a cunning idea, just for fun. CSS gradients can have stops anywhere you like. It wouldn't be at all difficult to set up a gradient that had solid top, middle and bottom bars with transparent blocks in between. Should only need 8 stops, which is not a lot of code at all. That would be easy to edit, and no positioning or width worries at all. No need for a pseudo or span either. This is probably the best solution, if you are wanting a hamburger.
Height of the hamburger is defined as 21 px overall (including borders) so this should work:
.class_stuff_here {
background-image: linear-gradient(#77899d 0, #77899d 5px, #0000 5px, #0000 8px, #77899d 8px, #77899d 13px, #0000 13px, #0000 16px, #77899d 16px);}
And it will just automatically fill with #77899d from 16px down to the bottom (21px).
Yeah, I figured you rather knock about the pseudos a bit more before giving in heh. :) This is all about keeping the markup and just changing the CSS. Whereas my current obsessiondirection is throwing both at the bonfire and start fresh up. Its kind of liberating..which I suspect is my biggest motivator for working with it lol.
Hey just check an edit I threw in. I reckon linear-gradient is the way to go. ;)
And this is not SMF markup anyway. I've been changing markup where I think it makes sense.
Gradients masking as a hamburger/symbol? Yes, tried that on a different scenario actually, its not too accurate tbh, sometimes the browser smushes the bars/gradients a bit, other times not. Could work well on smaller things I suppose. :)
I am using the spans I mentioned as block objects allowing them to transform to a cross when pressed/activated. Turns out theres a whole "science" about creating these kind of animations so I borrowed and tweaked:
https://jonsuh.com/hamburgers/
Meh. I think that's getting to the point where an image would be more sensible. That's a silly amount of code for a hamburger.
Well I would not throw all that in lol, just decide on the animation and optimize it. You know how it is, "libraries" tend to add every conceivable option. If you just pull the parts you need, its quite a nice hamburger effect. Bonus its using "button" as markup and its in line with mobile phones current direction of animating things. No need for javascript to do this kind of animation either nowadays. I was quite fond of Mootools for that reason, several years ago, now its all doable in CSS.
TBH I'm not that keen on the effect anyway, and it requires extra crud in the markup for a11y. I think I'll just stick with what I currently have.
Hey El Blocco, try this:
#testburger {
display: block;
width: 32px;
height: 26px;
margin: 4px 0;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #77899d;
background: repeating-linear-gradient(#77899d, #77899d 6px, #0000 6px, #0000 10px);
}
Something occurred to me: when you were doing ones that got mushed sometimes, where you using percentages or em for the stop positions? Because I can see how percentages might go a bit funny sometimes, but I think exact pixels should always be safe.
I think this code will be bulletproof. It's using exact pixels for the stripes, so I doubt it can get "mushed" at all. Seems to work at various zoom levels (with "zoom all" or "zoom text only") and it works perfectly on Pale Moon, Firefox, Opera and Chrome. It's quite neat code too. Not much of it, and only one element to worry about.
It doesn't work on Infernal Themebuggerer 11, but then nothing does anyway. :D That's what I threw in the first background declaration for. IE11 will read that but drop the gradient declaration, so IE11 will at least get a basic rectangle (if anyone is daft enough to use IE11) while actual browsers pick up the second declaration for the hamburger.
If anyone thought it important enough it would be easy to tweak the code to get a "hamburger bun" even on IE11. You'd just declare it as border-box and throw a top and bottom border on it. IE11 would display that. There just wouldn't be any meat in the bun (no middle bar). Then real browsers would just need an even simpler gradient, which only had one solid bar with transparent above and below. Hey presto, instant burger. :)
Seems you cracked it, its quite elegant coding for that symbol. :) I do like the effect so I am keeping mine :D but this just shows there so much you can do, half the fun is discovering it.
Had another play with it. I think this coding is better. It's about the same number of bytes, but it doesn't only work in browsers. It even works in IE11 too.
The other advantage is that it's easier to customise. You only have to edit border colour in three places. Gap between bars is set by padding. Bar thickness is set by border width. Should be friendlier for n00bs.
#beforeburger {
display: block;
width: 32px;
height: 6px;
margin: 4px 0;
padding: 4px 0;
overflow: hidden;
white-space: nowrap;
border: solid #77899d;
border-width: 6px 0;
}
#beforeburger::before {
display: block;
content: "";
border-top: 6px solid #77899d;
}
#beforeburger:hover, #beforeburger:hover::before {
border-color: #f88c00;
}
This is the same as what I use, although I build "bars" with the spans instead, using heights and rounded border-radius. I managed to shrink down the code to more minimal-sized than using the whole shebang from that link.
But got a bit inspired by your efforts in not touching templates, so for my current theme Origo I am not changing any admin templates, but not using any of CSS either, rather my goal is to have a separate admin css that only loads in those tempales I deem as "admin" - I could use the built-in call to admin.css but have to see if it will be loaded only in those places I'd like too. Anyways, this is a new challenge, but it will make me better suited for making new themes using only a "base" index.css and work from there, changing most used templates and its css - but the admin templates(which is drawn form default) get the same adm.css file across themes, meaning I don't have to re-invent the wheel for each new theme, which can be troublesome in regards to admin templates. Get them all working fine and share a more toned down, normal look, and let the others be anything.
Its kind of separating admin parts from the rest, but only so much as to how admin content is shown, the surrounding graphics/styles will draw from index.css of course.
EDIT: mispellings.
I added a border-radius to mine yesterday too. Just a basic border-radius: 4px; on the whole thing. It rounds the exterior corners nicely while leaving the other 8 as square. It fits really well with the hamburger concept IMO. Looks like a proper bun. :D
As for templates: I've edited 14 of them, although some are only really trivial edits. The rest I left alone because they're not that significant to average users. But I was sick of ridiculous things like PM's and post using different markup to do exactly the same job. That really should never have made it past beta. I may still do a bit more rationalisation. I think the best approach (for sanity) is to not try to revamp every template, but on the other hand to not be shy about editing templates where it really makes sense. The former stops you getting lost in template hell, and the latter stops you getting lost in CSS hell.
I think there's some benefit from an a11y perspective in leaving message index (and unread, etc) largely untouched, because those have proper table headers with scope="col" defined on the th's. This is probably the best format for them on screen readers, which will obviously ignore the CSS, and the CSS takes care of things for sighted users.
I like the idea of a separate and consistent admin setup. Default admin is a bit of a pig's breakfast, which is what got me started on Curve 2. In this current thing I edited the Current Theme page just because I was looking at it so much in testing, and it's so damned ugly in default form. So that's a customised Themes.template.php, but only with trivial changes. Looks like this now:
Looking very nice. :) The sidebar was always the better one IMHO..time it found its place again.
As we are sharing screenshots :D heres one of my current admin section. The thing to notice is that whats within the admin content area will remain the same, thats a separate css file, as mentioned earlier.
About the messageindex..you suggesting screen readers utilize the headers and apply them automatically to each topic? Must admit "scope" isn't very well known to me, its use that is.
Sure, might as well share whatever shots you feel like sharing. After all, this thread is really only about using CSS3 to replace main_block.png. All the rest is off-topic. :D
That looks pretty clean., once I shrunk it back to the point where the text is normal size on my monitor. How did you take the shot?
I think it might benefit from a little more definition between sections. Even something like a subtle hr, or similar.
And agree about the sidebar. I've even been thinking of removing the other option from my template. Sidebar makes much more sense if you're going with hamburger on smaller screens.
Re screenreaders: as far as I understand it, they use the table headers to tell people what each cell under them does. So all the cells under the "last post" header will be linked to that via the screen reader software, meaning people don't get lost while scanning a bunch of disconnected cells. I really should fire one up sometime and give it a run, so I get a better idea of some of the ramifications. So far I've been going from documentation and common sense. Being very visually oriented, it's hard to get enthused about turning off my vision for a while.
Hey I just had an idea. Those next/previous page links on the page index mod currently use absolute-positioned pseudos for the indicators. I should try revamping the code to make the pseudos standard inline ones, with some sort of padding or margin to push the necessary a11y text out of view. Basic text-indent probably won't work, because that will also shunt the pseudo around, but there is probably an easy solution that will leave the pseudo where I want it but hide the text. This would be better for cross-browser support, and may even save a couple of lines of code.
ETA: Brief article on scope="col", and a few other tricks - https://webaim.org/techniques/tables/data
Quotehose next/previous page links on the page index mod currently use absolute-positioned pseudos for the indicators. I should try revamping the code to make the pseudos standard inline ones, with some sort of padding or margin to push the necessary a11y text out of view.
The way it currently looks is fine with me. I think we should leave it
Is it ok on Safari/iPhone?
Quote from: Antechinus on September 22, 2019, 10:25:04 PM
Is it ok on Safari/iPhone?
Yes, it looks great. The hamburger menu is the only problem on this browser
Ok, in that case I won't worry about it. The burger will be fixed in the next RC.
Just finalising some tweaks for an RC2. Unless anyone freaks about the idea, I'm going to remove the default drop menu system from admin, etc.
The whole idea of having the theme responsive is that you don't have to change settings for different screens, but the default drop menu system doesn't work on narrow screens, so you'd have to switch to sidebar in profile settings. I could write even more CSS to automatically turn the drops into a hamburgered sidebar on narrow screens, but that seems like a waste of code given there's already a perfectly good sidebar menu (with nifty flyouts).
So the sane option seems to be to just remove the drop menu option and only have the sidebar. Simpler CSS, simpler template, and IMO better functionality even on desktop.
I'm definitely interested in testing out these changes.
Blerg..... I thought I finally got rid of those silly sidebars.... Sidebars went out with handlebar mustaches... :D :P
Ok, tell ya what. I'll go ahead and do it anyway. Anyone who doesn't like it can code all sorts of awesomeness to turn it into anything they like. :P
Sidebars are cool. :D Dropmenus are soooo 2010.
Quote from: Bloc on September 24, 2019, 12:48:31 PM
Sidebars are cool. :D Dropmenus are soooo 2010.
And honestly, quite a bother on many touch screens....
Quote from: Aleksi "Lex" Kilpinen on September 24, 2019, 12:50:17 PM
Quote from: Bloc on September 24, 2019, 12:48:31 PM
Sidebars are cool. :D Dropmenus are soooo 2010.
And honestly, quite a bother on many touch screens....
Safari does a decent job with dropdown menus, but android devices don't from my experience.
Well, I'm an android guy - been for years, and most dropdowns I can use without issues - but it isn't exactly easy or straight forward always. Depending on how the menu is built.
2 level dropdowns aren't really an issue.
Headaches are with 3 levels but we could ask why would someone try to do too much admin work on a phone? :P
Quote from: Diego Andrés on September 24, 2019, 02:19:29 PM
2 level dropdowns aren't really an issue.
Headaches are with 3 levels but we could ask why would someone try to do too much admin work on a phone? :P
Some people swear by their phones in everything..sad but true. :P :D
Granted, a sidebar won't be so great with 3 levels..but really, if you need to have 3 levels you are NOT thinking optimally...having everything but the kitchensink in the menu isn't considered good user experience. That *is* really 2010 thinking.
Three levels including the top one, or three levels of drops under the top one? The former is just about sane, but the latter is completely bonkers.
The existing hamburgered sidebars are ok with two sub-levels. I set up a second sub-level off the main menu yesterday, just to see how it went, and there's plenty of space as far down as 480 px wide. Gets a bit cramped on a 320, but any admin familiar with the system could still read enough of the links to tell what they were. Not sure there's any real advantage in having it though, even on bigger screens. I only tested it because index.template.php had the markup and logic for it anyway, but you could make a good case for removing it.
The only real problem with the sidebar is that in default form it's a bit long in admin if you're on a small screen. All the other areas (mod, pm, profile) only have short sidebars, so shouldn't be an issue. But if anyone really needs it I could add more checkbox toggles to each main section of the sidebar (you'd tap the title_bar section headers to toggle the view).
Oh, while I think of it: I made new .png icons for the user online/offline indicators. I could have done the indicators with CSS, but I decided I wanted the image alt text for a11y so went with traditional icons*. These are similar to the upshrinks I made earlier: bigger than required on desktop, and scaled in the CSS. Should be good on high-density screens. I've attached them if anyone wants them. They'll need a template edit to change the image names and file types, and CSS similar to this:
.poster_pm img {
width: 12px;
height: 12px;
margin: 0 4px -1px 0;
}
*Before anyone mentions it: no, the title attribute isn't much good for a11y. Screen reader support for it is pretty dodgey, whereas alt text is bulletproof.
Oh yeah, other changes for upcoming RC2.
Decided I didn't like the date over at the right and PM indicator text under the "New replies" link. I was dropping the greeting on smaller screens to match the user list details to the smaller avatar height, but someone pointed out this was a PITA if you weren't using an avatar and if you had multiple accounts for testing admin/mod stuff.
So I've revamped that area to keep the greeting on small screens, and drop the date/time instead. New PM indicators are now done as shown in the screenshots, with the bold italic "10 new messages" being a direct link to your inbox. This is much better use of screen space, IMO.
Hm, neat idea. :) The hamburger symbol in itself doesn't really account for new PM's..unless you want to just tack one extra icon on to the symbol itself. A separate text might look better..at least if theres screen estate for that. For my use I see the title being to the left of the hamburger so I really don't want added text in there. But I do need to give it some kind of visual that there are indeed new PM's. For now they are hidden away in the absolute positioned and out-of-sight sidebar.(on mobiles)
About 3 level menus...what was the inital purpose of having them? To get to a specific sublevel item quickly. Which is fine, but on a phone - or an already tall enough 2 levels sidebar - that isn't even something to consider. And I believe that by instead giving visual indicators there are indeed sublevels of the menu, either as yet another sidebar(not fond of that idea) or as tabs(as the sidebar + tabs which are already being used). The only place it makes sense is on a drop-down menu and those only work over a certain resolution or with enough device-pixel-ratio. In short: desktops only and large ones at that. So not really an option IMO, not because you cannot have both..but more phones/tablets are starting to come with bigger resolutions and device-pixel-ratio..but have no mechanism to hover over links.
QuoteA separate text might look better..at least if theres screen estate for that.
I realised that with the default SMF arrangement of title at the top of the screen, there's a lot of spare real estate to the right of the hamburger. Made sense to use it for something. :)
And don't touchscreens automatically treat CSS drops as click drops? I know Android does. Or at least it did last time I played with it, so there shouldn't be any need to hover.
PS: If anyone is wondering why I'm "Antechinus the wombat" on my test site, it's just to test a long username. Sticking with the maruspial theme and all that. :)
Ok, more crunchy goodness. :)
I got bored with the default news section. It's always been a bit meh, even on desktop, and it's pox on narrower screens. I didn't want to get into rewriting yet another template when the fixes required were comparatively trivial, so I got cunning.
I wasn't interested in calling a body class by board or topic ID, although that is still possible, and I wasn't keen on using a gnarly nested ternaries kerfuffle a la 2.1 to code the thing (nested ternaries fry my brain).
I've used a variation of the original coding Sinan recommended in response to a support request years ago (see: Re: Output template filename to class... (https://www.simplemachines.org/community/index.php?topic=431145.msg3036302#msg3036302)). This allows me to target gruesome bits by area and subaction in the CSS.
// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
if (!empty($context['menu_data_' . $context['max_menu_id']]['current_area']))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';
echo '
</head>
<body class="', implode(' ',$body_class), '">';
}
CSS to go with it is this:
/* Styles for the news section.
------------------------------------------------- */
.area_news td:nth-child(2) div {
min-height: 90px;
resize: vertical;
}
/* Lolz @ teh muppetry. :D */
.floatleftpadding, .floatrightpadding {
display: inline-block;
padding: 9px 4px;
}
Which is nice and simple and cleans things up well. The lolz are because .floatleftpadding are .floatrightpadding horrible classes left over from 2.0 alpha or beta. They only exist in this one place, and aren't even called in the default admin.css, but they just turn out to be ideal for cleaning up the presentation of the "Click here..." and submit buttons in the news area.
Image sizing is dealt with by a global declaration for the .bbc_img class, which automatically takes care of images in post or sigs or the news. The result is all cool on desktop, but still pox on phones, so the next bit of trickery is this:
/* Equates to 512px at standard browser settings. */
@media screen and (max-width: 32em) {
.area_news tr, .area_news td {
position: relative;
display: block;
}
.area_news td {
margin-right: 40px;
}
.area_news td:last-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
margin-right: 0;
padding: 8px 0;
}
}
Which makes it all quite usable, even down to 240 screen. Results shown in the screenshots. :)
@Antechinus I didn't realize until now that you were producing a completely responsive admin experience too. I like how you incorporated sinan's idea into the templates, I think there should be more ids or classes wherever possible, it makes customizing a breeze. Mediawiki is like that too
Hey, hold the bus. :D I am not producing a completely responsive admin section. That way lies madness. I'm just tweaking up some of the easy bits where I notice them. For instance, someone might want to do a quick update of news on a phone, but if they want to do serious error tracking or whatever they can use a bigger device. Although, having said that, a lot of admin is pretty good by default down to the old iPhone size (375px, IIRC).
Anyway, I've just found out that Sinan's idea introduces an undefined index error for max_menu_id in index.template.php, so I'll have to find a fix for that now.
Ah, the troublesome .table_grid.
Elegant solution to transform from 1-2-3 to 1-3 + 2-3 but you need to do similar on every instance of the class..and depending on what sort of info should be aligned horisontally and vertically. I haven't found a good approach to it, other than target each and everyone, unfortunelately. This should really been dealt with from the core files, deciding which columns needs to be on the same line and who doesn't. In other words use a css class of "keep_aligned" or something.
And why not edit on phones? Its only the design that makes it hard, not the function itself.
This is probably pretty ****** but if you want to use it :laugh:
I edited the stats_pie image changed the dent with a black background 20% opacity for the 20 icons
So now in css we can do something like this
.profile_pie {
background-color: #5682B3;
border-radius: 100%;
}
And the color will change for those horrible icons too
PS: Also didn't want to mess with the logic behind the usage of these images, whoever wrote the math for it and designed the icons was probably drunk because the rtl image isn't even the same mirrored :laugh:
Hey while you're here: any ideas on how to fix the undefined index error for $context['max_menu_id'] being used in index.template?
ETA: Re the stats pie, we could do that in proper PNG instead of png-8 these days, which might help the looks a bit. I still have a copy of the original PSD for the thing somewhere.
Doubt that's in a template file, that sounds like it's in Subs-Menu.php or Subs.php
What are you editing to trigger that
Oh it's basically the same head code as 2.1 index.template, except that I want to call areas and subactions for targeting CSS.
So:
if (!empty($context['menu_data_' . $context['max_menu_id']]['current_area']))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
And yes it comes out of Subs-Menu.php, but if I can get a workaround to stop it throwing errors in index.template that would be really handy.
ETA: Nevermind. I think I've got it. The problem is only when bouncing around areas that don't call the sidebar menu (like board index, search, whatever). If you're in admin or profile or pm's or moderation, the menu is called so it's happy and doesn't throw errors.
So all I need is a check to see if current_action is already defined as one of those areas, then echo the code for finding current_area if you're in an action which will have current_area available. Should work, and shouldn't throw undefined's.
Ok, sorted. Looks like this:
// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
foreach (array('admin', 'moderate', 'profile', 'pm') as $css_trix)
if (!empty($context['current_action']) && (($context['current_action']) === $css_trix))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';
echo '
</head>
<body class="', implode(' ',$body_class), '">';
Echoes the correct classes everywhere, and doesn't throw undefined errors anywhere. :)
Turns out a few simple adjustments make most of admin pretty decent on a 320 screen. I'd done a couple of the easy pages already (core features, etc) but the majority of it is standard settings lists, and simply thumping them with this sorts things pretty well:
/* Equates to 512px at standard browser settings. */
@media screen and (max-width: 32em) {
.action_admin .content {
padding: 0;
}
.action_admin hr {
color: #bbb;
background-color: #bbb;
box-shadow: 0 1px 0 #fff;
}
.area_news tr, .area_news td {
position: relative;
display: block;
}
.area_news td {
margin-right: 40px;
}
.area_news td:last-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
margin-right: 0;
padding: 8px 0;
}
.action_admin .settings dt,
.action_admin .settings dd,
dt.large_caption,
dd.large_caption,
.search_settings.floatleft,
.search_settings.floatright,
.msearch_details.floatleft,
.msearch_details.floatright,
.ban_settings.floatleft,
.ban_settings.floatright {
width: auto;
margin: 0;
float: none;
}
.msearch_details dt.righttext {
margin: 0 0 6px;
text-align: start;
}
.action_admin .settings dd {
margin-bottom: 9px;
padding-bottom: 4px;
text-align: right;
border-bottom: 1px solid #d4d4d4;
}
.action_admin .settings dd:last-child {
border-bottom: 0;
}
.subaction_mailingmembers .settings dd,
.subaction_sig dl:last-of-type li,
.subaction_bbc dl:last-of-type li,
.subaction_add dl:last-of-type div {
padding: 6px 0;
text-align: start;
}
.subaction_mailingmembers .settings label,
.ban_settings label {
line-height: 3em;
}
👌👌👌
Quote from: Diego Andrés on September 25, 2019, 01:59:23 AM
This is probably pretty ****** but if you want to use it :laugh:
I edited the stats_pie image changed the dent with a black background 20% opacity for the 20 icons
So now in css we can do something like this
.profile_pie {
background-color: #5682B3;
border-radius: 100%;
}
And the color will change for those horrible icons too
PS: Also didn't want to mess with the logic behind the usage of these images, whoever wrote the math for it and designed the icons was probably drunk because the rtl image isn't even the same mirrored :laugh:
I didn't give much thought to this yesterday (because I was thinking of how to fix that undefined error) but this isn't a bad idea. I think it could work well if the idea was switched around though, at least for themes with the default colour scheme, and have the dents done as white. That way it'd match the default pies that have lighter dents.
Then if the image is set to a pseudo element instead of the div, and set background-position to inherit, it will work for positioning and you can tweak opacity on the pseudo to adjust the lightness or darkness of your dents. So your proposed CSS to be adapted to something like this:
.profile_pie {
position: relative;
float: left;
height: 20px;
width: 20px;
margin: 0 1em;
text-indent: 100%;
overflow: hidden;
background: #6294ce;
border: 1px solid #6294ce;
border-radius: 50%;
}
.profile_pie::after {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-image: url(../images/stats_pie.png);
background-position: inherit;
opacity: .5;
}The screenshot shows an opaque white .png (ie: dents only) with opacity adjusted to match the default. The border on the parent is optional.
Oh, the other thing about doing it this way is it's much easier if you want to change the colour of the dents, because you can just open the .png in PS or GIMP and throw a basic colour overlay at the one layer.
The RTL .png being wonky is funny, because what has happened is the PSD uses duplicates of the same groups for LTR and RTL, but has flipped the positions of the RTL ones. This is actually more work than doing it correctly, because all that needed to be done was save the LTR version as .png, then flip that image horizontally and save that as the RTL version. It would have been perfect that way. :D
I'm assuming that's just temporary
Eh? No idea what you mean there.
Attachment mix-up. :o
No, I deliberately made them different sizes because otherwise there's no obvious way of telling which one does what. I figured different functionality should mean different styling in some way.
Come to think of it, I just noticed something really dumb about the stats page. In "Most Popular Boards By Activity" it has 100% of activity in
"Child Board Test", 79% of activity in "General Discussion". So that's 179% of activity in those two boards. Then there's another 50% activity in each of another two boards, for a total of 279%.
Brilliant. How the hell can someone have activity stats showing 2.79 times the maximum possible amount of actual activity? It makes no sense at all. The default stats are screwed. :P
It'd make more sense to ditch that entire section, since "boards by activity" is largely covered by "boards by posts" anyway, and at least the stats for the latter are accurate.
I noticed that a very long time ago, it makes no sense at all. I'm assuming it has been corrected in 2.1
I think the sanest option here is to get rid of that section, which will save on some responsive CSS. I'm also thinking the pies are really crap anyway, and it'd be better to just have bars like on the stats centre and poll results. I have those styled up nicely now, so using the exact same classes for the profile stats (which frankly hardly anyone ever cares about anyway) would make a lot of sense. Then there are no worries about the silly pies. It's all basic CSS and consistent across the GUI. :)
Righty-o. Occam's effing Razor (also known as KISS - keep it stupid, simple). :D
No moar piez. Pi are not squared or rounded or anything else. Pi = 0. :P
Gave it the same classes and styling as the revamped stats centre. Hey, it's another stats page so why not? Saves a crapload of grotty CSS and a couple of images that everyone has always hated.
Also ditched the "Your activity level is 5 million and 93 thousand 7 hundred and 53 percent!" for even less silliness. I think I could even like this page now (I've always hated it before).
😆 @ death_to_pies
I'm looking at the thing and thinking "Why on earth didn't we do it this way to start with?". D'oh.
ETA: Bloody hell, I just thought of something else. Default CSS has the .lefttext class for situations where it's necessary to override text-align: center; inherited from a parent element or whatever (th's are an obvious example, since they are centred text by default).
Default index.css defines the .leftext class as text-align: left; which you might think would be sensible. It's actually really dumb, because then you have to define it as text-align: right; in rtl.css and there's no need to do it.
All .lefttext has to declare is text-align: start; and it will revert to the natural text alignment for any language, which is really what's wanted in that situation. This means the class doesn't need to be touched for RTL support. It will just work.
I'm going to go through my CSS and change any instances of text-align: left; to text-align: start.
ETA again: w00t! The clever little munchkins have even included the opposite keyword in the specs. You can use text-align: end; too, which I just went and found out and am quite happy about. :D
This is very cool, because it means there's no need to re-declare any text alignment for RTL support. All declarations that used to use left can use start, and all declarations that used to use right can use end. Automatically turns out just how you want it, in any language. Yay! :D
Seriously, this should be default coding. It makes a lot more sense than using left and right.
There you go, they do sometimes get things right. :D
Be warned: IE and Edge don't support it. Everyone else has supported it for years. But it's not going to break usability in Edge anyway.
Hey rack your brains here a bit: I'm wondering which ul's in the SMF interface actually need padding or list-style.
I'm thinking not many. Offhand the only ones that spring to mind are bbc lists (which will have style declared inline anyway, and can have padding applied to the .bbc_list class) and the bullet list of stuff in the Help template. AFAIK, all the rest of them need to basically be the .reset class as a starting point.
I think it would save a substantial amount of crud in the CSS if the ul tag could be declared as a global reset instead of the .reset class, with the .reset class effectively becoming redundant in the markup. The reason being that there are quite a few ul's which don't have the .reset class in the markup, and then need CSS as if they were that class, and one global declaration is a lot simpler than editing a stack of templates or writing piles of pointless CSS.
The percentages of stats aren't wrong, you're reading them wrong.
Your posts account for 100% of the activity in the child board test, 79% of the activity in the other board etc.
Well, as you probably gathered, that made sense to nobody yesterday. :P It frankly doesn't seem like a particularly useful stat anyway, but I can easily drop the function back in if anyone is pining for it and likely to self-harm out of sheer, grinding despair. I do prefer it without the ruddy pies though.
And just as a FYI for anyone who wants to know: declaring a global reset on the ul tag seems to work very well.
ETA: Come to think of it, I might throw that function back in. Not because it's any real use to man or beast, but simply because the other one looks a bit bare and stretched on desktop. They can still stack on smaller screens. The currently-missing one could even be given a heading that explains it in terms that will make sense to most people. Radical notion. :)
Threw it back in. Also decided I liked it better with the "activity by time" thingy in its original position.
Not using the original images allowed dropping quite a bit of markup, both on this page and in the stats centre. While doing that I looked at the original logic. The default 2.0.x Stats.template.php has this sort of thing:
<div class="bar" style="width: ', $poster['post_percent'] + 4, 'px;">
<div style="width: ', $poster['post_percent'], 'px;"></div>
The second div is superfluous now, because it was only ever to do the left rounded end of the bar with the original image. That image is 400px wide, but the default coding restricts bar width to a maximum of 104px. IIRC this was because it had to support old browsers that didn't recognise media queries, so you were stuck with whatever you coded initially regardless of screen size.
This makes things look weird IMO, because on a wider screen (or even on tablet just after the stacking break point) you have bars which are supposed to be 100% but are nowhere near that width. So, I changed it to this:
<div class="bar" style="width: ', (.84 * $poster['post_percent']), '%;"></div>';
Which I think looks much better. It still allows enough space at the end of the bars for the necessary numbers, and scales nicely to any screen width.
The last block in the stats centre (time online) got a bit more breathing room due to the longer strings used there:
<div class="bar" style="width: ', (.67 * $poster['time_percent']), '%;"></div>';
Looks like the screenshots. I think this will do. :)
Quote from: Arantor on September 26, 2019, 11:41:56 AM
The percentages of stats aren't wrong, you're reading them wrong.
Your posts account for 100% of the activity in the child board test, 79% of the activity in the other board etc.
Makes more sense.
@Antechinus -- without changing the code, I think that's the most that can achieved with CSS alone in this profile page.
Lol. Umm, I have changed the code. :)
Careful now..you are now treading on dangerous grounds: changing actual templates :D That threshold was oh so easy to cross over...never looked back.
I've already told people I've changed a dozen or so of the things. They've even uploaded them to their test sites for testing. Beats me why anyone thought I wasn't mutating templates. The mind boggles. :D
Just hacked some more too. Display.template.php wasn't calling the same bar logic as Stats.template.php, with the result that it didn't work as well. Instead of having the logic in the template some clever bugger had locked it in Sources, and got it wrong. :P So I ditched the call for that and threw in a modification of the Stats logic. Works a treat now.
And, I've just found out there's bug in Poll.template.php. Meh. Bugz. :P
The Post.template.php fieldsets scale nicely for screen size. The Edit Poll section from Poll.template.php doesn't. Why not? Different markup innit. Same form ID. Same div ID. Different arrangement though.
Poll.template.php calls the #postmodify form inside the #edit_poll div, and it's screwed. Post.template.php calls the #edit_poll div inside the form and it works. And, the same form id has .flow_hidden on Post.template.php but not on Poll.Effing.template.poxsnotty.php. So guess what I'm going to do. :D
Ok, just for the heck of it: one responsive error log. Didn't take long, and needs hardly any CSS. No tables. Did it as a list. The old table was a pig's breakfast anyway.
Seems logical :) I am also looking at this table with a more sober mind, its after just a bunch of log items and could even hide things until you really need to see them(click-to-see).
I couldn't be bothered getting that tricky. It's just an error log. One thing I think I will do is move the checkboxes to the right. Was idly thinking about it, and in the rest of the gui such checkboxes are always at the right. Offhand the error log is the only one I can think of that has them at the left, so changing it to be consistent with the rest of the gui seems to make sense. And I may eye candy it a little bit more, but this is only meant to be a basic Curve clean-up y'know. :D
I was also thinking about the "ZOMG don't hack the templates" crowd. Well apart from anything else, the way we made 2.0.x in the first place was by hacking templates. :D And it leads to the next obvious thought: that while templates are generally gnarly for beginners, more experienced people can casually re-write them over a coffee or two just for amusement, and it can save on stupidly convoluted CSS at times.
Markup could probably be a bit better. I may revamp that slightly. Currently done like this:
function template_error_log()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
<form action="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';start=', $context['start'], $context['has_filter'] ? $context['filter']['href'] : '', '" method="post" accept-charset="', $context['character_set'], '" onsubmit="if (lastClicked == \'remove_all\' && !confirm(\'', $txt['sure_about_errorlog_remove'], '\')) return false; else return true;">
<script type="text/javascript"><!-- // --><![CDATA[
var lastClicked = "";
// ]]></script>
<div class="cat_bar">
<h3 class="catbg">
<a href="', $scripturl, '?action=helpadmin;help=error_log" onclick="return reqWin(this.href);" class="help"><img src="', $settings['images_url'], '/helptopics.gif" alt="', $txt['help'], '" /></a> ', $txt['errlog'], '
</h3>
</div>
<div class="plainbox">
', $txt['apply_filter_of_type'], ':';
$error_types = array();
foreach ($context['error_types'] as $type => $details)
$error_types[] = ($details['is_selected'] ? '<img src="' . $settings['images_url'] . '/selected.gif" alt="" /> ' : '') . '<a href="' . $details['url'] . '" ' . ($details['is_selected'] ? 'style="font-weight: bold;"' : '') . ' title="' . $details['description'] . '">' . $details['label'] . '</a>';
echo '
', implode(' | ', $error_types), '
</div>
<div>
', $txt['pages'], ': ', $context['page_index'], '
</div>';
if ($context['has_filter'])
echo '
<div class="plainbox">
<strong>', $txt['applying_filter'], ':</strong> ', $context['filter']['entity'], ' ', $context['filter']['value']['html'], ' (<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', '">', $txt['clear_filter'], '</a>)
</div>';
if (!empty($context['errors']))
echo '
<div class="plainbox">
<div class="floatright"><input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" /></div>
<label for="check_all1"><input type="checkbox" id="check_all1" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all2.checked = this.checked;" class="input_check" /><strong>', $txt['check_all'], '</strong></label>
</div>';
echo '
<ul id="error_log">';
foreach ($context['errors'] as $error)
{
echo '
<li class="windowbg', $error['alternate'] ? '2' : '', '">
<div class="checkbox_column">
<input type="checkbox" name="delete[]" value="', $error['id'], '" class="input_check" />
</div>
<ul>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=id_member;value=', $error['member']['id'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '" /></a>
<strong>', $error['member']['link'], '</strong>
</span>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=ip;value=', $error['member']['ip'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '" /></a>
<strong><a href="', $scripturl, '?action=trackip;searchip=', $error['member']['ip'], '">', $error['member']['ip'], '</a></strong>
</span>
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? '' : ';desc', $context['has_filter'] ? $context['filter']['href'] : '', '" title="', $txt['reverse_direction'], '"><img src="', $settings['images_url'], '/sort_', $context['sort_direction'], '.gif" alt="', $txt['reverse_direction'], '" /></a>
', $error['time'], '
</span>';
if ($error['member']['session'] != '')
echo '
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=session;value=', $error['member']['session'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '" /></a>
', $error['member']['session'], '
</span>';
echo '
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=error_type;value=', $error['error_type']['type'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '" /></a>
', $txt['error_type'], ': ', $error['error_type']['name'], '
</span>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=message;value=', $error['message']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '" /></a>
', $error['message']['html'], '
</span>
</li>
<li>
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=url;value=', $error['url']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '" /></a>
', $error['url']['html'], '</a>
</div>';
if (!empty($error['file']))
echo '
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=file;value=', $error['file']['search'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '" /></a>
', $txt['file'], ': ', $error['file']['link'], ' - ', $txt['line'], ': ', $error['file']['line'], '
</div>';
echo '
</li>';
echo '
</ul>
</li>';
}
echo '
</ul>';
if (!empty($context['errors']))
echo '
<div class="plainbox">
<div class="floatright"><input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" /></div>
<label for="check_all2"><input type="checkbox" id="check_all2" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all1.checked = this.checked;" class="input_check" /><strong>', $txt['check_all'], '</strong></label>
</div>';
else
echo '
<div class="plainbox">
', $txt['errlog_no_entries'], '
</div>';
echo '
<div>
', $txt['pages'], ': ', $context['page_index'], '
</div>';
if ($context['sort_direction'] == 'down')
echo '
<input type="hidden" name="desc" value="1" />';
echo '
<input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />
</form>';
}
With CSS:
/* Styles for the error log.
------------------------------------------------- */
.subaction_errorlog .plainbox {
margin: 2px 0;
padding: 4px 7px;
}
#error_log>li {
position: relative;
margin: 2px 0;
border: 1px solid #ccc;
}
#error_log>li:nth-child(2n) {
background: #f5f9fd;
}
#error_log .checkbox_column {
width: 34px;
padding-top: 2em;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-right: 1px solid #ccc;
}
#error_log ul {
margin-left: 34px;
}
#error_log ul li {
line-height: 2.4rem;
padding: 4px;
overflow: hidden;
border-top: 1px dashed #ccc;
}
#error_log ul li:first-child {
border: 0;
}
#error_log span {
width: 48%;
display: inline-block;
padding: 0 4px;
}
#error_log ul div {
padding: 4px;
}
/* 640px at standard browser settings. */
@media screen and (max-width: 40em) {
#error_log span {
width: auto;
display: block;
line-height: 2.6rem;
}
#error_log ul div:first-child {
border-bottom: 1px dashed #ccc;
}
}
Ok, this is better. Less markup too. Still stacks nicely down to 320.
function template_error_log()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
<form action="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';start=', $context['start'], $context['has_filter'] ? $context['filter']['href'] : '', '" method="post" accept-charset="', $context['character_set'], '" onsubmit="if (lastClicked == \'remove_all\' && !confirm(\'', $txt['sure_about_errorlog_remove'], '\')) return false; else return true;">
<script type="text/javascript"><!-- // --><![CDATA[
var lastClicked = "";
// ]]></script>
<div class="cat_bar">
<h3 class="catbg">
<a href="', $scripturl, '?action=helpadmin;help=error_log" onclick="return reqWin(this.href);" class="help"><img src="', $settings['images_url'], '/helptopics.gif" alt="', $txt['help'], '" /></a> ', $txt['errlog'], '
</h3>
</div>
<div class="plainbox">
', $txt['apply_filter_of_type'], ':';
$error_types = array();
foreach ($context['error_types'] as $type => $details)
$error_types[] = ($details['is_selected'] ? '<img src="' . $settings['images_url'] . '/selected.gif" alt="" /> ' : '') . '<a href="' . $details['url'] . '" ' . ($details['is_selected'] ? 'style="font-weight: bold;"' : '') . ' title="' . $details['description'] . '">' . $details['label'] . '</a>';
echo '
', implode(' | ', $error_types), '
</div>
<div class="errors_submit">
', $txt['pages'], ': ', $context['page_index'], '
<input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" />
</div>';
if (!empty($context['errors']))
echo '
<div class="plainbox errors_checkbox">';
if ($context['has_filter'])
echo '
<span class="floatleft">
<strong>', $txt['applying_filter'], ':</strong> ', $context['filter']['entity'], ' ', $context['filter']['value']['html'], ' (<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', '">', $txt['clear_filter'], '</a>)
</span>';
echo '
<label for="check_all1"><strong>', $txt['check_all'], ' </strong><input type="checkbox" id="check_all1" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all2.checked = this.checked;" class="input_check" /></label>
</div>';
echo '
<ul id="error_log">';
foreach ($context['errors'] as $error)
{
echo '
<li>
<div class="checkbox_column">
<input type="checkbox" name="delete[]" value="', $error['id'], '" class="input_check" />
</div>
<ul>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=id_member;value=', $error['member']['id'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '" /></a>
<strong>', $error['member']['link'], '</strong>
</span>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=ip;value=', $error['member']['ip'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '" /></a>
<strong><a href="', $scripturl, '?action=trackip;searchip=', $error['member']['ip'], '">', $error['member']['ip'], '</a></strong>
</span>
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? '' : ';desc', $context['has_filter'] ? $context['filter']['href'] : '', '" title="', $txt['reverse_direction'], '"><img src="', $settings['images_url'], '/sort_', $context['sort_direction'], '.gif" alt="', $txt['reverse_direction'], '" /></a>
', $error['time'], '
</span>';
if ($error['member']['session'] != '')
echo '
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=session;value=', $error['member']['session'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '" /></a>
', $error['member']['session'], '
</span>';
echo '
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=error_type;value=', $error['error_type']['type'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '" /></a>
', $txt['error_type'], ': ', $error['error_type']['name'], '
</span>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=message;value=', $error['message']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '" /></a>
', $error['message']['html'], '
</span>
</li>
<li>
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=url;value=', $error['url']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '" /></a>
', $error['url']['html'], '</a>
</div>';
if (!empty($error['file']))
echo '
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=file;value=', $error['file']['search'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '" /></a>
', $txt['file'], ': ', $error['file']['link'], ' - ', $txt['line'], ': ', $error['file']['line'], '
</div>';
echo '
</li>';
echo '
</ul>
</li>';
}
echo '
</ul>';
if (!empty($context['errors']))
echo '
<div class="plainbox errors_checkbox">
<label for="check_all2"><strong>', $txt['check_all'], ' </strong><input type="checkbox" id="check_all2" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all1.checked = this.checked;" class="input_check" /></label>
</div>';
else
echo '
<div class="plainbox">
', $txt['errlog_no_entries'], '
</div>';
echo '
<div class="errors_submit">
', $txt['pages'], ': ', $context['page_index'], '
<input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" />
</div>';
if ($context['sort_direction'] == 'down')
echo '
<input type="hidden" name="desc" value="1" />';
echo '
<input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />
</form>';
}
/* Styles for the error log.
------------------------------------------------- */
.subaction_errorlog .plainbox {
margin: 2px 0;
padding: 4px 7px;
}
.errors_submit {
overflow: hidden;
}
.errors_submit .button_submit {
float: right;
margin: 5px 2px;
}
.errors_checkbox {
text-align: end;
clear: both;
}
.errors_checkbox .floatleft {
text-align: start;
}
#error_log>li {
position: relative;
margin: 2px 0;
background: #fdfdfd;
border: 1px solid #ccc;
}
#error_log>li:nth-child(2n) {
background: #f5f9fd;
}
#error_log .checkbox_column {
width: 34px;
padding-top: 8px;
text-align: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border-left: 1px solid #ccc;
}
#error_log ul {
margin-right: 34px;
}
#error_log ul li {
line-height: 2.4rem;
padding: 4px;
overflow: hidden;
border-top: 1px dashed #ccc;
}
#error_log ul li:first-child {
border: 0;
}
#error_log span {
width: 48%;
display: inline-block;
padding: 0 4px;
}
#error_log span:first-child {
border-right: 1px dashed #ccc;
}
#error_log ul div {
padding: 4px;
}
/* Basic responsive tweaks.
----------------------------------------*/
/* 640px at standard browser settings. */
@media screen and (max-width: 40em) {
#error_log span {
width: auto;
display: block;
line-height: 2.6rem;
}
#error_log ul div:first-child {
border-bottom: 1px dashed #ccc;
}
#error_log span:first-child {
border: 0;
}
}
Ok, RC2 thingy. I think it's ready for that. This one isn't a pile of loose files. It's a standard installable theme zip, that won't overwrite any default theme files. Should be good to go on any site.
If nobody finds anything seriously wrong with it, I might just do the RTL stuff and call it finished.
I give this theme 10/10. It is a beautiful rendition of a theme that came out 10 years ago. Every new SMF install should start with this. There are a few things that I'd change, but I think Antechinus has done more than enough.
Quote from: Antechinus on October 01, 2019, 04:01:00 AM
Ok, RC2 thingy. I think it's ready for that. This one isn't a pile of loose files. It's a standard installable theme zip, that won't overwrite any default theme files. Should be good to go on any site.
If nobody finds anything seriously wrong with it, I might just do the RTL stuff and call it finished.
Thought I'd give it a trial run. I'm getting this error when clicking admin, profile etc,
Unable to load the 'generic_menu_dropdown_above' template.
Quote from: lurkalot on October 01, 2019, 02:18:13 PM
Thought I'd give it a trial run. I'm getting this error when clicking admin, profile etc,
Unable to load the 'generic_menu_dropdown_above' template.
That figures. I removed it. :D There was no point having that function in the theme as it's useless on mobile anyway.
Ok, will have to find a fix for that. It's trying to comply with a setting that doesn't exist in this theme. And which is not controlled by the theme as such, apparently. Just took a look in admin that that is about the only theme setting that is not configurable in admin. What genius thought that was a good idea? Way to go, SMF. :P I need my old sig back.
What it's going to need is something in the template that redirects that call to template_generic_menu_sidebar_above(). Should be easy. This should work.
// This contains the html for the side bar of the admin center, which is used for all admin pages.
function template_generic_menu_dropdown_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
template_generic_menu_sidebar_above();
}Will test that shortly (have to take the bins out first).
Quote from: Study Force on October 01, 2019, 01:50:01 PM
I give this theme 10/10. It is a beautiful rendition of a theme that came out 10 years ago. Every new SMF install should start with this. There are a few things that I'd change, but I think Antechinus has done more than enough.
Turns out Ant has to do more anyway. Might as well list any changes you think are worthwhile.
Ok, fixed. New zip attached. It's still called RC2. ;)
Quote from: Antechinus on October 01, 2019, 04:00:54 PM
Ok, fixed. New zip attached. It's still called RC2. ;)
Thanks. Works now. ;)
Just noticed that one has a very minor bug too. For the h5 tag it was inheriting straight from a global reset I put on all the h tags (h1 to h6 were set to 1em early in the file) instead of the sizing I used to the last post cells. That put text in the last post cells down to 10px, which is a bit silly. I've just changed the h tag reset to a base size of 1.2rem, which is what it really should be.
So there's another RC2 zip in my previous post. Third time lucky. :D
Hey while you're here, you're a support bot. How about removing the bugged zip from here (https://www.simplemachines.org/community/index.php?topic=569433.msg4033031#msg4033031)? I can't do it anymore.
Quote from: Antechinus on October 01, 2019, 04:21:18 PM
So there's another RC2 zip in my previous post. Third time lucky. :D
Hey while you're here, you're a support bot. How about removing the bugged zip from here (https://www.simplemachines.org/community/index.php?topic=569433.msg4033031#msg4033031)? I can't do it anymore.
Thank you. Theme looks cool, very nice work indeed. 8)
Re: removing the bugged zip, looks like d3vcho(); beat me to it while I was trying out your theme..
Cool. Thanks d3vcho(); :)
I did send in a mod report asking for it to be deleted, but I wasn't sure when someone would get around to reading it.
Oh question: how's the font-size on phones? I set it to 14px for screens <160dpi and 16px for anything higher density. I find 16px is too much on desktop or laptop, but from memory (last time I made a thing for phones) having the browser default size of 16px was perfect for them.
Quote from: Antechinus on October 01, 2019, 03:30:52 PM
Quote from: Study Force on October 01, 2019, 01:50:01 PM
I give this theme 10/10. It is a beautiful rendition of a theme that came out 10 years ago. Every new SMF install should start with this. There are a few things that I'd change, but I think Antechinus has done more than enough.
Turns out Ant has to do more anyway. Might as well list any changes you think are worthwhile.
I believe #forum_banner should be width: 100% rather than max-width: 100%; use the following image URL (https://studyforce.com/wp-content/uploads/2018/07/cropped-priscilla-du-preez-623040-unsplash.jpg) to see the difference when added as a logo.
In mobile view, we see [see attachment 1]. Notice the hanging slash. I believe each of those links should be coupled together in a span that has white-space: nowrap; to prevent separating from the link they're associated with.
I don't like the on-hover effect of the last link in the breadcrumb [see attachment 2], where the blue arrow appears leading to nothing. To eliminate, we can use a pseudoelement (last-child) to prevent it from showing up.
Quote from: Study Force on October 01, 2019, 05:32:47 PMI believe #forum_banner should be width: 100% rather than max-width: 100%; use the following image URL (https://studyforce.com/wp-content/uploads/2018/07/cropped-priscilla-du-preez-623040-unsplash.jpg) to see the difference when added as a logo.
That 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.
QuoteIn mobile view, we see [see attachment 1]. Notice the hanging slash. I believe each of those links should be coupled together in a span that has white-space: nowrap; to prevent separating from the link they're associated with.
Doesn't need a span there. I know how to fix that with a minor CSS edit. It's just something I missed in the media query for responsive. I'll sort it now.
QuoteI don't like the on-hover effect of the last link in the breadcrumb [see attachment 2], where the blue arrow appears leading to nothing. To eliminate, we can use a pseudoelement (last-child) to prevent it from showing up.
last-child is a pseudo class, not a pseudo element. The arrows are already done with pseudo elements.
.linktree li::after {
position: relative;
bottom: -2px;
color: #C8872B;
font-size: 2em;
font-weight: 700;
content: "\000bb";
}
.linktree .last::after {
visibility: hidden;
}
.linktree li:hover::after, .linktree li:focus::after {
visibility: visible;
color: #346;
}If you don't like the last one appearing on hover or focus, simply remove visibility: visible; from the last declaration. Personally I like the effect.
Note: Do not try to be clever and use display: none; either. The different font-size on the ::after means it's necessary to have the last one actually active in the markup even if it isn't visible, because otherwise things get jumpy (the linktree will want to be different heights on the home page vs every other page).
Ok, bugfix for the "hanging slash" thing.
Index.css:
/* 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;
}
/* 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.
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.
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.
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
Excellent work, looking forward to the next release.
You haven't even bug tested the last one yet. :P
I know because I found a couple of minor ones you missed.
Did you purposely add easter eggs into RC2 for me to find? :D
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
:laugh: :laugh: :laugh:
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.
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
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.
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
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.
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
In short, as usual gwen, I disagree with pretty much everything you just said.
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).
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
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.
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.
Marketing team assemble!
Wait what? :P
Ok, here's the next one. Same deal as before: an installable theme zip.
If you want any changes you'd better make be clear about what you want, and you'd better do it soon.
If there aren't any requests for sane amendments at this stage I am likely to tell people to get knotted at the next stage, because the next stage is just sort out the RTL support and call the bastard done. I have to stop somewhere about now, before I make an entire new theme, so from now on I will probably avoid looking for bugs myself.
Sane amendments would be things like:
- Should break points be adjusted? If yes, be specific.
- Do you want more information shown on small screens? If yes, be specific.
- Do you want less information shown on small screens? If yes, be specific.
- Do you want a pony for Christmas? If yes, hassle someone else. :P
First, I get a template parsing error after installing and set to use - can't use it :(
Generally: Sticky hover-off menu should be removed. Otherwise you see an intermittent overlapping effect.
Also, from RC2, overflow hidden should be added at capture view below
I like the theme. Just tested it with Tinyportal and noticed some things:
1. Because you have added the 1em padding to windowbg the tinyprtal block padding is now being doubled. Something TinyPortal users may have to deal with..
2. Secondly I noticed that you have setup some specific css for catbg a img, causing the icons in the titlebar going off...
Mind you, may be something we need to think about in TinyPortal, but since we take standard Curve as the basis this is now a bit off..
3. As you can also see in attached image the theme icon is the standard Curve Icon still. Maybe in Final you want to add anither thumbnail?
Did you use RC3?
Weird, I'm getting this...
Quote from: Study Force on October 04, 2019, 04:23:44 PM
Weird, I'm getting this...
Theme works fine for me as well, apart from the TP stuff @rjen pointed out, it looks great.
Quote from: Study Force on October 04, 2019, 10:18:20 AM
First, I get a template parsing error after installing and set to use - can't use it :(
I did say "be specific". :P I tested the zip by doing a fresh install on a 2.0.x local site. It should work, since it's the same zip with the same templates. If it's not working for you, I need details.
QuoteGenerally: Sticky hover-off menu should be removed. Otherwise you see an intermittent overlapping effect.
This is not clear either. There is no "sticky menu off hover" as far as I know. Please explain exactly what you mean.
QuoteAlso, from RC2, overflow hidden should be added at capture view below
That one is easy. :D It's still default SMF 2.0.x code there, but I can change it.
Quote from: @rjen on October 04, 2019, 01:43:49 PM
I like the theme. Just tested it with Tinyportal and noticed some things:
1. Because you have added the 1em padding to windowbg the tinyportal block padding is now being doubled. Something TinyPortal users may have to deal with.
Ok, easy to fix. I did it that way because it made the most sense for the main part of the forum. If you want a clear border around a common parent element, it makes sense to set padding on it rather than trying to mess with margins on all the possible child elements.
But if it's an issue with TP blocks then I can add an override for them. A few lines of code should do it.
Quote2. Secondly I noticed that you have setup some specific css for catbg a img, causing the icons in the titlebar going off...
Those are always crappy in 2.0.x. Half the problem is that there was no thought given to consistency of sizing with the default icons. It's one of those details that always gives me the irrits. But I can sort something out there too.
Quote3. As you can also see in attached image the theme icon is the standard Curve Icon still. Maybe in Final you want to add another thumbnail?
I'll add some ants. Nice giffy ones that crawl all over the thumbnail. :D
Can't get decent beta testers these days. :P I just noticed that code blocks blow posts apart for width in Firefox, Chrome and Opera. Pretty major and obvious thing, you might think. :D
"Ooo, the home page is pretty and I want a big banner". :P
But, this is weird, they don't have any problems in Pale Moon (which uses an older version of Firefox a its basis). I'm used to things that work in Pale Moon also working in Firefox, but obviously that's no longer the case. Anyway have fixed it. Will work now.
Am currently flabbergasted at 2.0.x markup again too. Just for variety. The login page has a form, which is good. It has text labels for the inputs, which is good, but they aren't real HTML labels that would actually be useful for a11y.
And, it's all split up into insane amounts of markup: one br, 3 dl's, 3 p's and an hr. For one little form. :D
Quote from: Antechinus on October 04, 2019, 05:17:48 PM
I'll add some ants. Nice giffy ones that crawl all over the thumbnail. :D
Lokkig forward to that image... ;D
Yo Ant! Right on man! Im diggin' the updates. I once tried lol https://idesignsmf.com/demo/index.php?theme=8 Nothing close to yours hahahha
Cheers, Mick. Some of your themes are pretty flash too. But yeah, not so much that one. Live and learn, they reckon. :D
ETA: Oh here's a funny story. After all my swearing about IE11, the next update will support IE11. No because I have any real interest in supporting IE 11, but because Mozilla have excelled themselves and created a browser as stupid as IE. To keep the posts hanging together with Firefox I had to ditch the fancy flexbox stuff and go back to using floats. :P
Which is fine. They work, and it's no more code overall, since I had to kick the poster area back to floated on small screens anyway. But I do miss the sticky post footers. They were cool.
Quote from: Antechinus on October 05, 2019, 10:18:47 AM
Cheers, Mick. Some of your themes are pretty flash too. But yeah, not so much that one. Live and learn, they reckon. :D
Hahaha that one I made it in 2012. Very basic default knockoff. Had it here on theme site but removed it a while ago. But yes, its a terrible one lol
Hey we should all get a collection together of our most gruesome experiments. That'd be fun.
Was just thinking, I'm missing Dziner Studio themes a bit at the moment. Some of their designs were excellent.
Quote from: Antechinus on October 05, 2019, 10:34:53 AM
Hey we should all get a collection together of our most gruesome experiments. That'd be fun.
Was just thinking, I'm missing Dziner Studio themes a bit at the moment. Some of their designs were excellent.
I miss em too! https://web.archive.org/web/20120129164423/http://www.dzinerstudio.com/index.php
Quote from: Antechinus on October 05, 2019, 10:34:53 AM
Hey we should all get a collection together of our most gruesome experiments. That'd be fun.
Was just thinking, I'm missing Dziner Studio themes a bit at the moment. Some of their designs were excellent.
Gruesome? https://custom.simplemachines.org/themes/index.php?lemma=2009 My very first theme in 2009. So ugly. I was experimenting then. lol
Outline was the first theme I started hacking. Nice and simple. Of course I had to go and make it complicated. :D It was good though because it got me in on the ground floor, so to speak, and then I just went from there as I learned more.
Quote from: Antechinus on October 05, 2019, 10:48:32 AM
Outline was the first theme I started hacking. Nice and simple. Of course I had to go and make it complicated. :D It was good though because it got me in on the ground floor, so to speak, and then I just went from there as I learned more.
oooooooo dzinerstudio sweet theme.
Yeah everyone fell in love with it. MayDay's detailing was brilliant stuff. Actually one of the things that got me into hacking templates was that I wanted a BoardIndex.template.php that was clean enough to do that theme justice. The standard 1.1.x template was all "little boxes on a forum, little boxes made of ticky tacky".
Quote from: Antechinus on October 05, 2019, 10:54:41 AM
Yeah everyone fell in love with it. MayDay's detailing was brilliant stuff. Actually one of the things that got me into hacking templates was that I wanted a BoardIndex.template.php that was clean enough to do that theme justice. The standard 1.1.x template was all "little boxes on a forum, little boxes made of ticky tacky".
Ah the good ol days. Tho, them themes used be fully loaded with custom images. These days i only use colors. Not even gradients, just flat.
Yeah but they were really good custom images. I like some eye candy sometimes. I can't do plain flat all the time., Not my thing, really.
Oh hey, here's something you might not have seen. I think I only posted it in the team boards. This was me getting bored with having to jump through corporate hoops for the SMF powers that be, and saying "F#$k it" to the official colors back with the first 2.1 Alpha builds. I always rather liked this version. Might have to turn it into something.
Quote from: Antechinus on October 05, 2019, 11:00:50 AM
Yeah but they were really good custom images. I like some eye candy sometimes. I can't do plain flat all the time., Not my thing, really.
oh yes, them two had Photoshop pat down.
Quote from: Antechinus on October 05, 2019, 11:03:59 AM
Oh hey, here's something you might not have seen. I think I only posted it in the team boards. This was me getting bored with having to jump through corporate hoops for the SMF powers that be, and saying "F#$k it" to the official colors back with the first 2.1 Alpha builds. I always rather liked this version. Might have to turn it into something.
Disaster Area, Bahahahaha!!! I like it. Tho not a fan of them text shadows but concept looks great.
Looking at the difference, i dig the gradients and fonts used brother. noticed you rid the menu icons too. A plus.
Yeah they got me into it too. Not that I had MayDay's skills, but it was a start.
Quote from: Mick. on October 05, 2019, 11:06:57 AMDisaster Area, Bahahahaha!!! I like it. Tho not a fan of them text shadows but concept looks great.
Yeah the text shadow on the forum name is not really a success. I'm going to try and convince them to do something about that before 2.1 goes Final. It still has some of my trial code in it (speaking of gruesome experiments and all that).
But yeah the rest of it is pretty tidy. I always liked this one more than the official version. The official version was (don't tell anyone) never really one of my favourites.
And I have to say that pigging around with this latest mutant has renewed my appreciation of Curve. I remember when we first saw it running live on a secret team test site. We all thought it was the most awesome thing on the planet. :D
Quote from: Mick. on October 05, 2019, 11:09:35 AM
Looking at the difference, i dig the gradients and fonts used brother. noticed you rid the menu icons too. A plus.
Ah yes. My old favourite: Segoe UI in 600 weight. Its a bastard that 600 weight has so little cross browser support, because aesthetically it's vastly more appealing than the standard 700. It has some nice extra oomph over 400, but without getting crude.
And yeah, menu icons. Bleh. The Silk set (I think that is what is used) are a bit too "kid's box of crayons" for my liking. I don't think they were in alpha, or at least not on the main menu. I think that came later.
Quote from: Antechinus on October 05, 2019, 11:12:41 AM
Yeah they got me into it too. Not that I had MayDay's skills, but it was a start.
Quote from: Mick. on October 05, 2019, 11:06:57 AMDisaster Area, Bahahahaha!!! I like it. Tho not a fan of them text shadows but concept looks great.
Yeah the text shadow on the forum name is not really a success. I'm going to try and convince them to do something about that before 2.1 goes Final. It still has some of my trial code in it (speaking of gruesome experiments and all that).
But yeah the rest of it is pretty tidy. I always liked this one more than the official version. The official version was (don't tell anyone) never really one of my favourites.
And I have to say that pigging around with this latest mutant has renewed my appreciation of Curve. I remember when we first saw it running live on a secret team test site. We all thought it was the most awesome thing on the planet. :D
I always used 1.0 series. When 2.0 came out, it pushed me to learn how it worked, make themes and mods for it. Curve 2.0 was the chit then lol.
Quote from: Antechinus on October 05, 2019, 11:16:27 AM
Quote from: Mick. on October 05, 2019, 11:09:35 AM
Looking at the difference, i dig the gradients and fonts used brother. noticed you rid the menu icons too. A plus.
Ah yes. My old favourite: Segoe UI in 600 weight. Its a bastard that 600 weight has so little cross browser support, because aesthetically it's vastly more appealing than the standard 700. It has some nice extra oomph over 400, but without getting crude.
And yeah, menu icons. Bleh. The Silk set (I think that is what is used) are a bit too "kid's box of crayons" for my liking. I don't think they were in alpha, or at least not on the main menu. I think that came later.
...and i made a menu icon mod for 2.0 bahahahaha. These days i hate it to only settle with fontawesome on my own site.
Yeah it was very cool at the time. I never liked the old Core theme at all. That's what got me into themes in the first place. I just thought Core was too damned ugly to use*, so I went to find something nicer.
And 1.1.x markup was horrible stuff. I know I ****** about 2.0.x markup, but it's still streets ahead of 1.1.x. That was nested table insanity. I couldn't believe what I was seeing when I built my first mobile theme out of it. I was going cross-eyed just trying to keep track of which damned tr I was inside and where the hell that was in relation to the top level table tag. :P
*Bloc disagrees with me on this. He's quite proud of what Core was at the time it was designed.
Quote from: Antechinus on October 05, 2019, 11:22:25 AM
Yeah it was very cool at the time. I never liked the old Core theme at all. That's what got me into themes in the first place. I just thought Core was too damned ugly to use*, so I went to find something nicer.
And 1.1.x markup was horrible stuff. I know I ****** about 2.0.x markup, but it's still streets ahead of 1.1.x. That was nested table insanity. I couldn't believe what I was seeing when I built my first mobile theme out of it. I was going cross-eyed just trying to keep track of which damned tr I was inside and where the hell that was in relation to the top level table tag. :P
*Bloc disagrees with me on this. He's quite proud of what Core was at the time it was designed.
Yup, the good ol days. Man I remember breaking my 1.o site on a daily. Bigguy from smfhelper helped me out when I was a noob. He came to my rescue every single time hahahahaha.
Now I just search and read or trial and error until stuff works.
Lol. :D I used to call it "learning by parse error". I had no idea about PHP, and was not at all interested in RTFM because I just wanted to make stuff that looked cool, so I learnt basic PHP syntax by crashing test sites and live sites until I figured out where all those apostrophes and things had to go. :D
Quote from: Antechinus on October 05, 2019, 11:31:01 AM
Lol. :D I used to call it "learning by parse error". I had no idea about PHP, and was not at all interested in RTFM because I just wanted to make stuff that looked cool, so I learnt basic PHP syntax by crashing test sites and live sites until I figured out where all those apostrophes and things had to go. :D
Ha! this----> '; killed me everytime. .....and using this ' instead of " or /' lol
Oh hell yes. Drove me bonkers half the time. And those question make thingies with all the weird stuff each side of them. WTF is all that supposed to do? Oh I get it. It's supposed to crash my site when I mess with it.
It's even funnier now, because it seems so easy. Although there is a still a lot of PHP that I don't know, but I know enough to do just about anything to a template and get away with it.
Anyway, I was playing with Curve's log in form today. It has always given me the irrits because it's such a mess in default form. Nothing really lines up or anything. I think this is a decent look that suits the old theme.
This is me wanting to get proper clickable labels for a11y, but also wanting it to look clean.
Quote from: Antechinus on October 05, 2019, 11:41:50 AM
Oh hell yes. Drove me bonkers half the time. And those question make thingies with all the weird stuff each side of them. WTF is all that supposed to do? Oh I get it. It's supposed to crash my site when I mess with it.
It's even funnier now, because it seems so easy. Although there is a still a lot of PHP that I don't know, but I know enough to do just about anything to a template and get away with it.
Anyway, I was playing with Curve's log in form today. It has always given me the irrits because it's such a mess in default form. Nothing really lines up or anything. I think this is a decent look that suits the old theme.
This is me wanting to get proper clickable labels for a11y, but also wanting it to look clean.
Nice! Yup. I too wanted to do something on the sign up page. something really pretty but havent found the time. https://codepen.io/idesignsmf/pen/zJrKdX
Yeah that's clean. Were you thinking of doing it like a splash page, with the background covering the whole screen? Or is that just the background for the trial run?
I was thinking about that page today myself. One thing that always used to bug me when I dropped the forum into maintenance mode was that I'd be running an update or installing a mod, and everyone would be hammering the log in form and filling up pages of the error log with failed log ins. Not the sort of crap I want to deal with when I'm tweaking critical code, y'know.
I had the idea that it would be cool to have a secret staff log in form, with hidden inputs, so that the average mugs would be staring at a page which did nothing (and didn't fill your error log!) but staff still had some sneaky way of signing in when necessary. I don't think it would be hard to code either, although obviously everyone relevant would have to know the tricks in advance.
Oh about placeholder text: I was thinking of using that myself to clean things up, but then I read this earlier today:
https://www.nngroup.com/articles/form-design-placeholders/
Wouldn't matter so much on some sites, and the SMF login form is pretty simple anyway, but handy to know for general use. So I decided to go with labels instead, then had to think of a way of styling them.
I wanted to replace this old template with a sweeter one https://www.idesignsmf.com/index.php?action=login
I always find myself redoing stuff that other have made. Like the contact mod, i made mine responsive and cool looking https://www.idesignsmf.com/index.php?action=contact
even my member list lol https://www.idesignsmf.com/index.php/topic,552.0.html
Quote from: Antechinus on October 05, 2019, 12:00:52 PM
Oh about placeholder text: I was thinking of using that myself to clean things up, but then I read this earlier today:
https://www.nngroup.com/articles/form-design-placeholders/
Wouldn't matter so much on some sites, and the SMF login form is pretty simple anyway, but handy to know for general use. So I decided to go with labels instead, then had to think of a way of styling them.
Oooo good read!
I like the memberlist. Sort of like my mod, but with really cool styling. That totally works.
With the contact page, it looks a bit funny on desktop. A bit too spread out. Hang on a sec and I'll whip up a cut and paste with an idea.
I use Chrome, Safari and this is how it looks...
Now i see how it looks on stupid Firefox. Ugh.
Just an idea. I think it needs a little more breathing room between the text and the top row of inputs. Not much more, just a bit. And the rest sort of like the shot could work. That's taken in Pale Moon, which is basically a mutant Gecko.
Quote from: Mick. on October 05, 2019, 12:08:38 PM
I use Chrome, Safari and this is how it looks...
Now i see how it looks on stupid Firefox. Ugh.
Oh hell that's completely different. Bloody browsers. :D
Y'know that look you have with Chrome or whatever is still a simple layout. It should be possible to get it looking like that in Firefox. Even if you had to break out the big hammer and wallop a few things with absolute positioning it should still be possible.
Quote from: Antechinus on October 05, 2019, 12:24:17 PM
Y'know that look you have with Chrome or whatever is still a simple layout. It should be possible to get it looking like that in Firefox. Even if you had to break out the big hammer and wallop a few things with absolute positioning it should still be possible.
Looks fine on safari too. Now i have to get into the css and mess with -moz to make it work. Ugh.
Now that I'm more awake I took a quick look at it, and it shouldn't need any vendor-specific stuff to make it work. The problem is that it's not loading contact.css in Firefox or Pale Moon. That's implying that your PHP is set up to exclude anything based on Gecko. There's probably some rogue user agent detection or similar going on. Not really the browser's fault. If Gecko-based critters can be given the CSS it should all work. :)
@ant; alright, I'll take a look in the morning. I'm pretty hammered atm
More daft tricks. I am going to have to start behaving myself soon. :D
Finally came up with a presentation for the recent posts that doesn't look like a pig's breakfast. I could actually like this one. Am thinking of putting them at the top of the board index, and only visible to guests. Logged in users rarely pay any attention to recent posts, and use the unread/replies pages instead. To my mind recent is only much use for guests, who don't get access to the unread pages, so having recent at the top makes sense for them. It's collapsible, same as the news fader, just in case someone wants it out of the way on a narrow screen.
Have also done a shuffle on the poster area on Display.template.php. This is purely to rationalise the markup for what I want it to do in terms of responsiveness (I'm doing that in quite a few places). The avatar and username h4 (and the PM button when you're logged in) are part of one poster div. The rest of the poster details are in the standard ul, but that has been given the .poster_details class, and it has clear:left as part of its CSS to make it stack. The .postarea div is set with hidden overflow, so it automatically sits beside the poster div and ul without needing to declare a margin.
When I want to shift things around, no frigging around with margins or absolute positioning is necessary. I just display: none; the .poster_details ul, remove the hidden overflow from .postarea, and add clear: both; to the .post div, and it all automatically drops into place. It works with or without an avatar, with no extra code required. Easy. :)
In terms of code flow this is much better than how it was before, and I quite like the looks of this setup.
Looking forward to the next release
Recent posts section is always a bit troublesome..you want it on one line ideally, but its really too much information when moving down in resolution. I am thinking about reducing the shown title and rather keep the other things present(apart from date perhaps) so it will still be just one line on mobiles too.
EDIT: the two-colum split is great for reducing space usage, but for me its gets bit jumbled and not that easy to scan/read quickly. More or less because I expect them to go under each other..seeing they are the same section and not an entirely different section(as in putting calendar items for example, side by side with recent posts).
I think that also is up to the admin to decide, sometimes they don't care about how it looks but how much information they can display.
Well, as long as you provide that option, sure...for my part I do not make assumptions of what admins would possibly want or not, I go from what I feel looks good and work from there. At least in free themes.
Quote from: Bloc on October 06, 2019, 12:51:59 PM
Recent posts section is always a bit troublesome..you want it on one line ideally, but its really too much information when moving down in resolution. I am thinking about reducing the shown title and rather keep the other things present(apart from date perhaps) so it will still be just one line on mobiles too.
This is why I have been asking people if they want more information on small screens, or less information on small screens, or if the amount of information on small screens is about right. Haven't had any answers yet though. They only seem to notice big banners. ;)
I suspect that nobody is actually using the thing, so nobody has yet got a real feel for how it all operates in general day to day use. I have been thinking the best option would be to simply release it via the theme site, at which point it is inevitable that everyone will complain about all the things they don't like. :D
Anyway, in the meantime I'm mainly just making what is there fit, as logically as possible. I'm going to rewrite the markup for the recent posts. At the moment it is all split down into spans, set to nowrap and with ellipsis overflow in case they get stuck in a tight corner. This means that when it wraps it all wraps in sensible chunks that won't fry your brain when you're scanning it. Title always hangs together in one chunk, ditto "by member name", complete date string, and "in Board ***". What I think would make more sense is to use a ul for each recent post, and do the chunks as li's. Whether done with li's or spans, it is very easy to drop chunks sequentially if you want to do that. I've generally been approaching the markup revisions on this basis.
QuoteEDIT: the two-column split is great for reducing space usage, but for me its gets bit jumbled and not that easy to scan/read quickly. More or less because I expect them to go under each other..seeing they are the same section and not an entirely different section(as in putting calendar items for example, side by side with recent posts).
TBH I find the default 2.0.x presentation impossible to scan. This is largely because of lack of line height, which is a problem generally with default Curve. 130% is ok with very short lines of text, but not adequate with long lines (because the brain needs a better indication of where the lines are, otherwise you get the infamous "ZOMG wall of text" syndrome"). And basic typography guidelines say that lines over 75 characters make for a poorer reading experience, which is something I found out for myself when I made that first mobile theme from Outline on 1.1.x. The exceptionally narrow content area (by forum standards) was in practice so easy and pleasant to scan that I ended up using the mobile theme on desktop a lot of the time. More scrolling, but quicker and more pleasant reading.
Personally I find the two column layout easy to scan. I just scan the first column, then the second. A bit like reading drop menus. On wide screens I think this is better than one very long line of text, but obviously stacking it all into one column is best on narrow screens. I think the optimum change point is somewhere around 768 wide. Anyway, having let the idea percolate a bit, I think I'll leave the recent posts in the info centre for now. There's a certain logic in having them up top, but they're still accessible in the default location and I think I prefer that look for this theme.
Quote from: Diego Andrés on October 06, 2019, 01:58:42 PMI think that also is up to the admin to decide, sometimes they don't care about how it looks but how much information they can display.
In which case they are the sort of admin who will make the site a nightmare for average users. It's one of the traditional problems with forum apps. The creators get obsessed with displaying all sorts of crap that just gets in the way.
I mean I'm all for showing as much needed info as possible (lol ore more than what is needed, I do tend to overshare and ramble ;) ).... but then I have to remind myself that it's just a preview
much like the poster info on posts, I had to remind myself that it's just that a mini profile.... so ditch things that aren't necessarily needed when replying to a topic (like, you may need to know gender, age, and location to help answer specific questions.... but you don't need a link to their social medias and websites, that can be found on their actual profile)
so then I guess the same would be for responsiveness.... as the screen gets small just show the pertanite stuff, maybe avatar but at least name of poster (then again that could be debatable, but as it is a forum, more community based, this is probably needed) thread title, maybe date started... everything else can be viewed in the post itself (but then I guess you run into the same issues of space limits)
one thing i'm noticing on my theme, is the breadcrumbs.... while I prefer to show the exact path (home > category > board > post) while on smaller screens this takes up a lot of room and should probably only show the last location (ie post, or board, or category depending on where you are at) hope that makes since
another thing
again nothing i'm staying here has anything to do with what Antechinus has been doing (maybe they fixed these things I donno, just thinking out loud here)
but another thing I'm noticing is the display.template
all of the buttons for postings and for moderation..... when getting smaller screen, these again take up a lot of room... i'd like to see them somehow shrink either in font size or become icons instead of text
I'm fine with people throwing ideas around. I do this sort of coding as an exercise in solving a puzzle that's more fun than crosswords.
It would probably depend on the site, but offhand I don't think gender, age and location are all that relevant a lot of the time. Handy to know gender to save embarrassment with pronouns, but apart from that it doesn't matter in most situations. I agree social media stuff (and email) is better in profile. Website is debatable (probably a context thing).
You need to have the poster name because some people don't have avs, so the name is a necessary fallback. And if coding for everyone you have to bear in mind that some people can't see avs anyway, so they need other information.
Breadcrumbs are a tricky one. They do chew a stack of space on a small screen, but then they're meant to provide a navigation map. Question is: does anyone actually need a complete map in that format? There could be an argument for dropping intermediate links, and just keeping the home link and the last level. That would be very easy to code. You could even have a clicky thingy (arcane technical terminology FTW) to show the intermediate links if you needed them, but chances are nobody would ever use it in practice regardless of how clever you felt about coding it.
And yeah, buttons. I've noticed that if you're on an admin or mod account the quickbuttons (quote, modify, etc) become a plague of monsters on a small screen. The moderation strip below all the posts isn't too bad IMO, because they're generally out of the way, but the ones inside posts are problematic. They should probably collapse to something more digestable. I have been thinking it wouldn't be hard to arrange that. Could use a similar trick to the main and admin menus, and throw them all into a clicky thingy once screen size is small enough to make it useful.
Quote from: Antechinus on October 06, 2019, 03:41:26 PM
I suspect that nobody is actually using the thing, so nobody has yet got a real feel for how it all operates in general day to day use. I have been thinking the best option would be to simply release it via the theme site, at which point it is inevitable that everyone will complain about all the things they don't like. :D
I do have it installed on one of my test sites, https://cctestsite.info/forums/index.php?theme=32 just to see how it behaves with TP installed. But confess I've mainly been playing around with it on my local, seeing how easy it is to change colours etc.
I wouldn't be able use it on my live sites because some people still use IE11 from their workplaces, and long text still breaks out of the side of post area. Example, https://cctestsite.info/forums/index.php?topic=3028.0
Just looking at it now: there's a good case to be made for dropping
everything below the post text into a clickable div, with the exception of attachments and sigs. Sigs can be switched off in profile settings anyway, if you don't want to see them, and I think attachments should always be visible as they are part of post content.
But all the other stuff (buttons, report links, IP shiz, edit times, etc) are good candidates for throwing into a skip. If you want to sort through the garbage, you can always open the lid.
One thing I have found with the buttons at the top and bottom of the page (reply, print, etc) is that by playing around with CSS you can change how they stack on small screens without changing the default generation order. So the Reply button, which is the one you want 99% of the time, can be made more accessible by sticking it out the front.
You can do this by using inline-block instead of float on the button li's, and setting text-align to the opposite of normal for the language in question. In essence:
.buttonlist {float: right; text-align: right;}
.buttonlist li {display: inline-block;}This looks normal when you have enough space for them all to fit on one line, but alters how they stack when they start running out of space. :)
Quote from: lurkalot on October 06, 2019, 05:41:16 PMI do have it installed on one of my test sites, https://cctestsite.info/forums/index.php?theme=32 just to see how it behaves with TP installed. But confess I've mainly been playing around with it on my local, seeing how easy it is to change colours etc.
Lol. :D Yeah that sort of thing is fun. I've been messing with all sorts of ideas, and I'm kinda keen on doing Prince of Darkness as a variant of this one.
QuoteI wouldn't be able use it on my live sites because some people still use IE11 from their workplaces, and long text still breaks out of the side of post area.
Fixed that. Will be fine in the next one. See screenshot. I had to fix it because Firefox had indigestion too. Pale Moon, Chrome and Opera were all happy as Larry, but the other two were having conniptions. :P
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
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
*ug why can I not type today, please excuse my bad english and typos, seems my dyslexia is really bad today for some reason*
[side note] for my forum a/s/l is sort of needed as it's religion based question and answers so being able to answer them would depend on location/language/age/gender, but yeah I know for most these aren't really needed that much....
Quote from: shadav on October 06, 2019, 06:04:27 PM
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
Quote from: shadav on October 06, 2019, 06:04:27 PMhm... 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.
Quote from: lurkalot on October 06, 2019, 06:24:54 PMThink 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.
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
Quote from: Antechinus on October 06, 2019, 07:06:00 PM
Quote from: lurkalot on October 06, 2019, 06:24:54 PMThink 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.
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
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.
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.
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):
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. :P 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 (https://www.proy.info/style-select-dropdown-using-css/). 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:
#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.
Quote from: shadav on October 06, 2019, 06:04:27 PMhm... 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.
Quote from: Antechinus on October 08, 2019, 04:48:23 PMthey'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' :D
Just saying ;)
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. :P But it's a bit long, and would get annoying after a while.
Quote from: Antechinus on October 09, 2019, 01:31:36 PM
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. :P But it's a bit long, and would get annoying after a while.
I get your point...and love the comments ;)
Ok, it works. Hiding things all over the place. I'm tempted to hide the whole forum just to wind people up. :P
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:
.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:
.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. :)
That looks so nice ^^
QuoteOk, it works. Hiding things all over the place. I'm tempted to hide the whole forum just to wind people up.
🤣🤣
QuoteWill tidy up a few things and get a zip sorted in the nest day or two.
Thanks
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? :)
ROFL. That's Bogan Ipsum (http://txtrdr.com/boganipsum/). 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. :D
My other favourite is Samuel L. Ipsum (https://slipsum.com/) (warning: contains naughty words) which is a selection of quotes from Pulp Fiction.
Just found something that could be useful: Lorem Ipsum HTML Generator (https://www.webfx.com/web-design/html-ipsum/)
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. :P
http://ephemer.kapsi.fi/FhtagnGenerator.php
That's awesome. :D
Hehe, the Cthulhu and Samuel ones are great. :D Serves 'em right for those that actually read the texts. *cough*
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
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?
Quote from: Antechinus on October 11, 2019, 05:46:52 PM
Have you got the Settings.template.php that came with the last one?
Yep attached. ;)
Ok. Looks alright. I assume the text is showing up on the current theme page too. Should be:
$txt['header_logo_width'] = 'Maximum width of logo image';
$txt['header_logo_width_desc'] = 'As % of theme width. Use any number up to 100. Defaults to 100% if left blank.';
Thanks for checking.
Strange thing is since I reported that error I can't reproduce it. I'll keep an eye on it and see if it reoccurs. ???
Might have just been a cache thing on the language file.
If the error pointed the index.template.php is possibly because the setting wasn't being checked with !empty which will led to an error if the value is actually not available (usually on a first installation) but won't come back to the error log once it's saved even as an empty field because it will exist in the db after that.
Quote from: Diego Andrés on October 11, 2019, 11:55:23 PM
If the error pointed the index.template.php is possibly because the setting wasn't being checked with !empty which will led to an error if the value is actually not available (usually on a first installation) but won't come back to the error log once it's saved even as an empty field because it will exist in the db after that.
Thanks. I think that was indeed the problem, because I was playing with that setting after I reported the error, which is why I can no longer reproduce it.
This is the relevant code from index.template.php:
<h1 id="forum_title" class="image_banner">
<a href="'. $scripturl. '">
<img id="forum_banner" style="max-width:',!empty(($settings['header_logo_width']) && ($settings['header_logo_width'] < 100)) ? $settings['header_logo_width']. '%;"' : '100%;"', ' src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name'], '" />
</a>
</h1>';
Yeah, that's not going to work for you.
<h1 id="forum_title" class="image_banner">
<a href="'. $scripturl. '">
<img id="forum_banner" style="max-width:',!empty($settings['header_logo_width']) && $settings['header_logo_width'] < 100 ? $settings['header_logo_width']. '%;"' : '100%;"', ' src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name'], '" />
</a>
</h1>';
You had the variable not being set check plus the size check rolled into the empty() check which meant it would always look at the size regardless.
Although the reported error above seems to have stopped I just visited the log again and now see two different ones.
8: Undefined index: menu_data_
https://cctestsite.info/forums/index.php?action=admin
File: /home/c-------/public_html/cctestsite.info/forums/Themes/Ant_Curve_CSS3_RC3/index.template.php - Line: 181
8: Undefined index: max_menu_id
https://cctestsite.info/forums/index.php?action=admin
File: /home/c-------/public_html/cctestsite.info/forums/Themes/Ant_Curve_CSS3_RC3/index.template.php - Line: 181
Quote from: Arantor on October 12, 2019, 07:24:29 AM
Yeah, that's not going to work for you.
<h1 id="forum_title" class="image_banner">
<a href="'. $scripturl. '">
<img id="forum_banner" style="max-width:',!empty($settings['header_logo_width']) && $settings['header_logo_width'] < 100 ? $settings['header_logo_width']. '%;"' : '100%;"', ' src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name'], '" />
</a>
</h1>';
You had the variable not being set check plus the size check rolled into the empty() check which meant it would always look at the size regardless.
Well it seems to be working perfectly on local. No errors at all, as far as I can tell. I've tested it with no banner, partial width banner, and full width banner. Set to one of those, go jumping all over the forum interface, check error log. All clear. Set to another option, repeat process. All clear. So if there's a problem I'm not sure how to track it down. What would you recommend?
It should look at the size. I can't see why you wouldn't want it to. If empty then default to 100%. If not empty and less then 100 then use given width.
Quote from: lurkalot on October 12, 2019, 08:04:05 AMAlthough the reported error above seems to have stopped I just visited the log again and now see two different ones.
8: Undefined index: menu_data_
https://cctestsite.info/forums/index.php?action=admin
File: /home/c-------/public_html/cctestsite.info/forums/Themes/Ant_Curve_CSS3_RC3/index.template.php - Line: 181
8: Undefined index: max_menu_id
https://cctestsite.info/forums/index.php?action=admin
File: /home/c-------/public_html/cctestsite.info/forums/Themes/Ant_Curve_CSS3_RC3/index.template.php - Line: 181
Those are only called if you are in an area which has the sidebar menu anyway.
// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
foreach (array('admin', 'moderate', 'profile', 'pm') as $css_trix)
if (!empty($context['current_action']) && (($context['current_action']) === $css_trix))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';
echo '
</head>
<body class="', implode(' ',$body_class), '">';The errors you are getting did exist in an earlier version, but as far as I know the code above fixed it. I've never seen those errors since I changed the code to only call those actions in the body class when they are relevant. Again, it's something I'm not seeing on local, so I'm not sure what to do about it.
Well, it would sort of work the way you were using it - empty() is a wrapper for 'does the result of all of the things inside the brackets end up false'. Except it's not really meant for expressions like that, and won't shield you against undefined errors when they're used that way.
As evidenced by the fact there were errors, even if you didn't get them.
As for the errors relating to undefined $context['menu_data_'] you need to check that $context['max_menu_id'] isn't empty before trying to use it in any context. Also, you *really* should be using {} around things in foreach - what exactly is your foreach (... as $css_trix) meant to be iterating over, exactly? It may not be what you think it is.
Quote from: Arantor on October 12, 2019, 03:39:38 PM
Well, it would sort of work the way you were using it - empty() is a wrapper for 'does the result of all of the things inside the brackets end up false'. Except it's not really meant for expressions like that, and won't shield you against undefined errors when they're used that way.
Ok, so needs to be more verbose. The catch is that I wanted to idiot-proof the result, so that if someone entered a value higher than 100 it would still default to 100% max-width. Without that, if someone happened to enter 372 (I know, why would you, but humans...) then the banner would break out of the header.
So IMO it needs a limit of 100 set somehow. And I am not doing it with bloody nested ternaries (coz I hate them) so will do it with nicely defined brackets and a few extra lines if necessary. Simple, one-step if/then ternaries are fine, but IMO once they get past that they're more trouble than they're worth and the more spacious formatting is better for maintainability.
QuoteAs for the errors relating to undefined $context['menu_data_'] you need to check that $context['max_menu_id'] isn't empty before trying to use it in any context. Also, you *really* should be using {} around things in foreach - what exactly is your foreach (... as $css_trix) meant to be iterating over, exactly? It may not be what you think it is.
Ok, well you know me and php acrana. :D I was just copying that from someone else's recommendation.
The $context['menu_data_'] and $context['max_menu_id'] are variables that are only called when the sidebar or drop menus are present and accounted for, so that means base action has to be one of admin, moderate, profile, or pm. Those are what I am intending to check for, because if you try to call those variables outside those actions you get the errors that Lurkalot has been getting.
In those actions $context['menu_data_'] and $context['max_menu_id'] should never be empty, because in those actions there is always menu content if you have access to those actions in the first place.
The only thing that did occur to me is that perhaps this is a problem with TP admin, if Lurkalot's test site has TP installed. But offhand I can't see how that would be a problem, since if TP admin isn't called in the array of possible actions then it should be ignored and the body just wouldn't get a class for it.
Quoteso will do it with nicely defined brackets
You just had the brackets in slightly the wrong place. Don't try to jam everything inside empty() and you're good - I posted the correct code.
QuoteThe $context['menu_data_'] and $context['max_menu_id'] are variables that are only called when the sidebar or drop menus are present
Other than the small fact that it isn't the case based on the available evidence of having errors. Don't test based on the action being right, simply test if $context['max_menu_id'] is !empty and you'll be good to go.
Ah I see it now. Early Sunday morning over here. Need more coffee and food. I was doubling up on my empties and stuffing it up that way. Dunno why I didn't see that before.
Re the other one: so instead of the current code block, which is this:
// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
foreach (array('admin', 'moderate', 'profile', 'pm') as $css_trix)
if (!empty($context['current_action']) && (($context['current_action']) === $css_trix))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';
I should just use this:
// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
if (!empty($context['max_menu_id']))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';
Yes, exactly. Better to rely on whether a menu exists, rather than on whether you happen to be on one of the pages 'it should exist on'.
Cool. Will throw that in the next one then. I'm thinking I'll call the next one RC3.14159, just as a memorial to the 2.0.x dev process. :D
Ok, for anyone who wants it, a corrected index.template.php for Mutant RC3. :)
Removed attached file as requested.
Quote from: Antechinus on October 12, 2019, 04:42:38 PM
Ok, for anyone who wants it, a corrected index.template.php for Mutant RC3. :)
Mutant RC3 ?
I'm assuming this file is the fix for those errors I reported above. Just installed it and now when logged in I have a rogue checkbox upper left of page. Looks kind of strange with TP as well, excessive padding between the blocks etc. Didn't get this with the previous index.template.php file. https://cctestsite.info/forums/index.php
Quote from: lurkalot on October 12, 2019, 05:42:41 PM
Quote from: Antechinus on October 12, 2019, 04:42:38 PM
Ok, for anyone who wants it, a corrected index.template.php for Mutant RC3. :)
Mutant RC3 ?
I'm assuming this file is the fix for those errors I reported above. Just installed it and now when logged in I have a rogue checkbox upper left of page. Looks kind of strange with TP as well, excessive padding between the blocks etc. Didn't get this with the previous index.template.php file. https://cctestsite.info/forums/index.php
looks like the hamburger
Oh yeah, I forgot I made some other changes on local too. :D Sunday morning, y'know.
Hang on and I'll edit the corrected code into an actual RC3 template, and post that.
Do me a favour and delete the other one. Bloody edit time in this board is way too short.
Ok, this one will work. ;)
Quote from: Antechinus on October 12, 2019, 06:11:49 PM
Ok, this one will work. ;)
Thanks will upload that now. ;)
I'm a bit distracted this morning as I'm trying to multi-task. It's not going well. :D
Solution: don't multitask, it rarely goes well anyway.
Have been distracted by other things, but will have another bash at this over the weekend.
Quote from: Antechinus on October 16, 2019, 05:02:44 PM
Have been distracted by other things, but will have another bash at this over the weekend.
Thanks, looking forward to the next zip. ;)
Me too, and strangely I was thinking about this on my drive home
So much for that weekend. :D Ok, will make an effort soon.
Quote from: Antechinus on November 05, 2019, 05:21:04 PM
So much for that weekend. :D Ok, will make an effort soon.
Thanks
Ok, have dragged this thing out of hibernation. After being off coding for the Dark Side I'm getting enthused about mutant Curve again.
From memory (because I wasn't smart enough to take notes) all that needed to be done was rewriting the .poster area in PersonalMessages.template.php, to match the new markup and CSS that went into Display.template.php during my last feeding frenzy. So I'll knock that off tonight and do a quick look around for any other glitches. :)
ETA: Ha. Just found one. PM button isn't hidden when ignoring posts. Fixed.
...and textareas need sorting for locked topics (background-color is being overridden). Fixed.
...and linktree needs a ::before on the "Post reply" span inside li.last. Fixed.
👍 Thanks, Antechinus
Have sorted PersonalMessage.template.php. Will do a final check tonight my time, then zip the beast up again.
One zipped beast.
It's fun rebuilding the GUI during "RC". Fits perfectly with 2.0.x history. :D
Quote from: Antechinus on November 20, 2019, 03:52:29 PM
One zipped beast.
It's fun rebuilding the GUI during "RC". Fits perfectly with 2.0.x history. :D
Any plans on making this official with a submission to the theme site?
By the way, I've tested this and it works flawlessly.
Great job, my friend!
Quote from: Biology Forums on November 21, 2019, 10:40:41 AMAny plans on making this official with a submission to the theme site?
Sure. It still needs a bit of tidying up in a few places, and RTL support added, but once those are done I'm fine with submitting it.
Found another minor bug: profile summary page needs tweaking in the user info area.
Honestly, this thing does not work flawlessly yet. It's getting close, but it's not flawless. Go and see how many bugs you can find, because I'm sure there are others.
Quote from: Antechinus on November 21, 2019, 04:33:20 PM
Found another minor bug: profile summary page needs tweaking in the user info area.
Honestly, this thing does not work flawlessly yet. It's getting close, but it's not flawless. Go and see how many bugs you can find, because I'm sure there are others.
Yes, out of the box, it isn't perfect. The positioning and size of an uploaded banner needs to tweaked by the end-user. If the banner is too large, it just feels out of place. I don't think there's any way to rectify that, unless the banner is sized to a specific width to height ratio. Only then could it be resized nicely using CSS with respect to its aspect ratio.
I also don't like how the avatar is positioned. It feels like it's floating out into nowhere, especially given the line-height of the text to its right (see attachment). Furthermore, there needs to be a default avatar for members without one; it feels empty when in topic view after someone has posted who doesn't have one assigned already.
I'd expect anyone making a banner to make it so it looks good. They shouldn't need to tweak position if they sort out the graphics. If someone is determined to make a badly proportioned banner, I'd call that their problem.
The avatar in your screenshot is very much an edge case. Usually they're square, or slightly taller than they are wide.
Not having a default avatar is standard for most forum apps. I can't really see it being a problem if someone chooses to not have an avatar. I'm more interested in actual broken presentation.
QuoteNot having a default avatar is standard for most forum apps.
It's really not. XenForo does it, IPB does it, fairly sure the latest iterations of vBulletin do it, MyBB does it, Discourse does it, NodeBB does it. As far as I can see, it's phpBB and SMF that don't.
Most of the latter (and eventually, XF) do it with the 'coloured first letter of the username' approach.
Ok. Well I'm not coding the bloody thing to haul out the first letter and apply colours to it. Too much spaghetti, and I don't fancy that look anyway.
My 2c is people can choose to have an avatar or not, just as people can chose to display avatars or not. Can't see anything wrong with that.
I'm calling feature lock on this thing. I've already been through coding specifically to allow avs or no avs. If anyone wanted avs all the time, they should have called for it back then instead of calling for code to handle both alternatives.
And that's fine, just that it isn't anywhere near the default expectation any more.
As for the coloured letters, can't do worse than Discourse for whom generating the letters on demand was so painful, they made a dedicated service that just served coloured letters on coloured backgrounds, the so-called avatar CDN.
In that case the theme works as intended. I think you did more on this than any other theme designer ever has. For that, we appreciate your effort
Quote from: Arantor on November 22, 2019, 03:41:30 AM...can't do worse than Discourse...
That's all that needs to be said. :D
Well, I like that look lol. So much I used in my newest theme project for Elkarte. And its not much coding tbh.
Don't you start. :P
Hi Antechinus, when do you plan on releasing this to the theme site?
At the moment I'm waiting on Arantor to have time to nut out a bit of code. Once that's sorted I'll do all the RTL stuff, and a final check for any glitches, then submit it.
just installed the antechinus curve and diggin' it. fantastic job so far, mate! (https://www.tradgang.com/tgsmf/Smileys/tg/thumbsup.gif) (https://www.tradgang.com/tgsmf/Smileys/tg/thumbsup.gif)
Suppose I'd better finish it for Christmas then.
Quote from: Antechinus on December 12, 2019, 02:24:16 PM
Suppose I'd better finish it for Christmas then.
Please. ;)
And thank you, that would be great.
TBH you probably won't notice any difference between the current RC and the finished version. From the perspective of most people, the current RC is effectively a finished product. All that's holding it up is RTL support, which is not going to be relevant to your site anyway (or to most other sites).
But I'll still finish it.
Damn, spend the last 2+ hours going over this topic! GREAT JOB! 8)
Some of the looks of this theme is similar to how I've envisioned Crip Zone themes for 2.1. Been playing with a new dedi for the hosting and getting it situated but will definitely try this out shortly!
Funny how one thing turns into something completely different! The story of my life! LOL I multitask WAY too much, story of my life. But it keeps me busy and I tend to learn a lot more! Once you stop learning, you stop living! ;)
Hey question: is anyone actually going to want RTL support for this thing? I can do it (it's more tedious than difficult) but is it worth the bother?
2.0.x is getting closer to EOL (for all practical purposes) and RTL languages are very much in the minority, and even 2.0.x in vanilla form has minimal support for most of them. I'm half inclined to just ignore RTL support unless someone specifically demands it. If nobody demands it, it's obviously not required.
2.0 will not go EOL until a new version post 2.1 is released. so 2.0 will be supported for many years to come.
Yes I understand that, but my thinking was that in practice 2.0.x will get little use once 2.1 is stable. Anyone who sticks with 2.0.x is unlikely to be the sort of person who will want a custom theme either. They will be sticking with 2.0.x due to having already customised their site just the way they like it, and not wanting to do a whole lot of extra work.
I was in this position with 1.1.x vs 2.0.x. Even though I wrote code for 2.0.x I never actually ran it as a live forum, because it wasn't worth the hassle at the time. So I'm wondering if anyone will bother much with this theme anyway, and for how long, and if any of them will ever need RTL support.
Ok, I've got everything I need working on the new box (I hate W10 :P) so will look at integrating the 2.0.16 monster changes into this thing to make sure it all plays nicely. Will also fix any other minor bugs if I spot them. If anyone else has spotted some, let me know.
99.9% of custom themes have little or no RTL support anyway, and nobody has asked for it yet. Have decided that if anyone actually wants RTL support they can ask for it, in which case I'll do it without feeling I'm wasting my time.
Not meaning to hijack this topic but...
There's something wrong here. I have notifications set to this topic and others here and have been noticing that lately I'm getting emails for these very late. This last post is dated Jan 5th. I just received an email notifying me of this topic 6 hours ago today, Jan 18th! This is not the first time that I've noticed this but thought it was just something on my end.
All of my other emails from everywhere else are sent in a timely manner. I'm not sure if it has to do with the last two upgrades or not.
You mean at this site? No idea. Better ask under site stuff.
Brings up a good point though, in that so far I haven't checked the last RC of this beast for compatibility with 2.0.16 and 2.0.17.
I should get onto that. Have been meaning to, but keep getting sidetracked.
Yes, this site. This time I got the notification in a timely manner. Sometimes it seems to work and other times it takes days to get a notification. Very weird.
I know what you mean. I get sidetracked a lot doing way too many things at the same time. LOL Hard to keep up at times but I like staying busy.
EDIT: I should add that the email account I used on this site is a gmail account. So maybe it's something on their end? I'll look into it further and make a proper topic about it. But it's not only this topic that this has happened to me.
Ok, hauled this thing out of the swamp again. Since Bloc (smartypants) said he'd got the first letters of usernames working as fallback avatars without much code, I had a think about it. Turns out to be a no-brainer.
All it needs is something to pick up the lack of an avatar image, and then set an extra class on the anchor and call the member name as anchor content. So quick test PHP/HTML in Display.template.php looks like this:
// Show the member's avatar?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">
', $message['member']['avatar']['image'], '
</a>';
}
else
{
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar no_avatar">
', $message['member']['name'], '
</a>';
}
And CSS additions are just:
.poster_avatar.no_avatar {
height: 100px;
width: 100px;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto 8px;
padding: 22px 0 0;
background: #738599;
color: transparent;
font-size: 60px;
line-height: 100px;
writing-mode: vertical-rl;
text-align: center;
text-orientation: upright;
text-decoration: none;
border-radius: 50%;
}
.poster_avatar.no_avatar::first-letter {
color: #fff;
}
Which looks like the attached image. No problem. And is a lot easier than the way Discourse did the same job. :P
Of course there has to be a catch, and of course the catch has to be that Microsoft browsers are stupid, and don't support things that every other browser has supported for yonks.
In this case the thing they don't support is text-orientation, which is useful because it stacks the letters of the username vertically and thereby allows text-align: center; to take care of lateral positioning of the visible letter.
MS browsers, which only exist to make other browsers look like sane options, will require a left padding bodge to centre the letter laterally. Which can be done, as the typical only-for-MS-crud declarations we have known and loved since the internet was in nappies, but at the moment I'm not sure I give a rat's. :P
DO note that Edge is retired and is replaced with Chromium (this update should be mostly automatic for anyone who is not in a corporate controlled update environment)... that may have addressed some of the problems with MS browsers.
Excellent. :) I've been thinking for years that MS should get the hell out of trying to make browsers, and leave that to people who are good at it.
Turns out Bloc was smarter than I was this time, but then he cheated by learning more PHP than I did.
Best way to do it seems to be to use PHP to filter out the first character of the username, which then saves on CSS.
Current template code looks like this:
// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">
', (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image'])) ?
$message['member']['avatar']['image'] : '<span class="no_avatar">'. (substr($message['member']['name'],0,1)) . '</span>', '
</a>';
With CSS being:
.no_avatar {
display: block;
height: 80px;
width: 80px;
margin: 0 auto 4px;
background: #738599;
color: #fff;
font-size: 56px;
font-family: roboto, verdana, sans-serif;
line-height: 80px;
text-align: center;
text-decoration: none;
text-transform: capitalize;
border-radius: 8px;
}
/* 768px at standard browser settings. */
@media screen and (max-width: 48em) {
.no_avatar {
height: 40px;
width: 40px;
font-size: 28px;
line-height: 40px;
border-radius: 4px;
}
}
/* 640px at standard browser settings. */
@media screen and (max-width: 40em) {
.no_avatar {
height: 44px;
width: 44px;
font-size: 30px;
line-height: 44px;
border-radius: 5px;
}
}
Which can probably be simplified a bit, once I go back and sort the whole file instead of just tacking test code on the end. :)
Nice. 8) I have a question though. Do these "fallback avatars" change colour dependant on group, like other systems do?
Not at the moment, but I suppose they could. That shouldn't be hard to arrange. Obviously I won't know which groups people are going to use, so couldn't include colours for any and all possibilities. I can include a class for membergroup, and can include colours for default groups, but people would have to do their own CSS for any extra groups they created.
At the moment I'm pondering how best to do CSS sheets for variants, which I think I have figured out, so I'll play with colours by group on the "fallback avs" too.
This works. It's a bit verbose, but I can't really see a cleaner way of doing it. You could try and jam it all into ternaries, but it'd end up a bit of a pig's breakfast. I think the more spacious formatting is more sensible in this case.
// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">';
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
', $message['member']['avatar']['image'];
}
elseif (!empty($message['member']['group']))
{
echo '
<span class="no_avatar ', $message['member']['group'], '">', (substr($message['member']['name'], 0, 1)), '</span>';
}
elseif ($message['member']['post_group'] != '')
{
echo '
<span class="no_avatar ', $message['member']['post_group'], '">', (substr($message['member']['name'], 0, 1)), '</span>';
}
echo '
</a>';
Then you just do the CSS as:
.no_avatar.Administrator {
background: #d73d00;
}
.no_avatar.Newbie {
background: #dbcc4c;
}
Or whatever colours you happen to prefer. :)
Have expanded this a bit. Turns out you need two different syntaxes: one to deal with fallback avs in Display.template.php and Profile.template.php, and another to deal with fallback avs in index.template.php (ie: the theme header). Gets to be quite fun. :P
Display and Profile call the group name, which depending on what they are called can require escaping some characters. The CSS can still deal with any name under the sun though, as long as it is written correctly. Unicode characters (https://mathiasbynens.be/notes/html5-id-class) and even emojis (https://mathiasbynens.be/demo/crazy-class) are no problem. If you want a poo emoji as your group name, it will still work.
The avs in the theme header have to call the group id number instead, so to deal with a particualr group in all locations requires writing CSS like this:
/* Default groups are set to match the colour of their default "stars". */
/* Note: It is necessary to use two different syntaxes:
one for avatars in Display.template.php and Profile.template.php,
and another for the avatar in the theme header (index.template.php).
These should be kept as pairs in each declaration. */
.no_avatar.Administrator, .no_avatar.group_1 {
background: #d73d00;
}
.no_avatar.Global.Moderator, .no_avatar.group_2 {
background: #006bd9;
}
.no_avatar.Moderator, .no_avatar.group_3 {
background: #80c800;
}
/* These can be split up into different colours, but */
/* each line should be kept as a pair of declarations. */
/* Note that some characters need to be escaped with a backslash. */
/* Default post count groups would also work as .no_avatar.Member for the first syntax, */
/* since they all contain the word "Member" and share the same background. */
/* The expanded version is shown as an example of how to deal with more complex cases. */
.no_avatar.Newbie, .no_avatar.group_4,
.no_avatar.Jr\..Member, .no_avatar.group_5,
.no_avatar.Full.Member, .no_avatar.group_6,
.no_avatar.Sr\..Member, .no_avatar.group_7,
.no_avatar.Hero.Member, .no_avatar.group_8 {
background: #dbcc4c;
}
Template code is now this:
// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<p class="avatar">
<a href="', $scripturl, '?action=profile">';
if (empty($options['show_no_avatars']) && !empty($context['user']['avatar']))
{
echo '
', $context['user']['avatar']['image'], '</a>';
}
elseif ($user_info['groups']['0'] != '')
{
echo '
<span class="no_avatar group_', $user_info['groups']['0'], '">', (substr($context['user']['name'], 0, 1)), '</span></a>';
}
elseif ($user_info['groups']['1'] != '')
{
echo '
<span class="no_avatar group_', $user_info['groups']['1'], '">', (substr($context['user']['name'], 0, 1)), '</span></a>';
}
else
{
echo '
<span class="no_avatar">', (substr($context['user']['name'], 0, 1)), '</span></a>';
}
echo '
</p>
// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">';
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
', $message['member']['avatar']['image'], '</a>';
}
elseif (!empty($message['member']['group']))
{
echo '
<span class="no_avatar ', $message['member']['group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
elseif ($message['member']['post_group'] != '')
{
echo '
<span class="no_avatar ', $message['member']['post_group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
else
{
echo '
<span class="no_avatar">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
// Show avatars, images, etc.?
if (empty($options['show_no_avatars']) && !empty($context['member']['avatar']['image']))
{
echo '
', $context['member']['avatar']['image'];
}
elseif (!empty($context['member']['group']))
{
echo '
<span class="no_avatar ', $context['member']['group'], '">', (substr($context['member']['name'], 0, 1)), '</span>';
}
elseif (!empty($context['member']['post_group']))
{
echo '
<span class="no_avatar ', $context['member']['post_group'], '">', (substr($context['member']['name'], 0, 1)), '</span>';
}
else
{
echo '
<span class="no_avatar">', (substr($context['user']['name'], 0, 1)), '</span>';
}
And before anyone asks: personally I'm not a fan of avs on the board index and message index, so those are not (this means not) happening. If you want those, you can code them yourself. There are plenty of examples around.
I'm not in favor of using style in the template but would be easier for coloring the background since you can use the group color in there as a variable too and many ppl use it to customize the poster info sometimes
I'd rather leave it in the CSS. ;) They can still edit it if they want to. Thing is you might not want the actual group colour for the fallback avatars. I found that picking something off the group stars, and then tweaking it a bit, gave a better look than just plain CSS red or blue or whatever. This way you can have the fallback avs matching for general looks, but with better colour balance sometimes.
Also, if someone wants fancy stuff like gradients or whatever, easier if it's all in the CSS.
Decided to have a crack at the memberlist too. This is more or less the same presentation as my old memberlist mod, but done on the default tabular markup, so no need for a mod. It has minor markup tweaks (to add in the avatar and a couple of classes here and there) and then CSS to suit.
This is both more flexible than the old mod, due to the use of media queries to set block widths, and should also be better for a11y since it still has all the default table column scopes, etc. It should also accept custom profile fields without much drama (may need slight CSS tweaks). I think it makes more sense this way than trying to drop chunks out of the default table presentation, and it was a bit of fun to set up too. :)
I'm half inclined to do the memberlist sorting options in a similar way to how I did them back on the ancient 1.1.x Outline mobile theme. They make a lot of sense done that way, and it probably wouldn't be that difficult to set up. A bit tricky keeping valid markup with the table, so would have to adapt it slightly, but the general idea should be workable.
https://www.simplemachines.org/community/index.php?action=dlattach;topic=431813.0;attach=174758;image (https://www.simplemachines.org/community/index.php?action=dlattach;topic=431813.0;attach=174758;image)
Did them. Better like this. It's a basic hover drop like the main menu (which will obviously automatically act like a click drop on mobile). This will make it easy to pick a letter on mobile and on desktop. The overall presentation of the memberlist has been tidied up a bit too.
Also changed the up/down buttons. The SMF ones have always annoyed me, because they're never where I want them when I want them. I use this sort of button quite a lot, on any site that has them available, and if the site only has an up button I'm always cursing them for not have a down button as well. And if I can't access them anytime on any page that annoys me too. :P
My preference for desktop is to have them vertically along the left edge of the screen, because on desktop that's the most idiot-proof place for them. I can just casually throw the cursor over that way with my brain in neutral, and in full screen mode the edge is as far as it can go, and somewhere in the top half or bottom half will hit the relevant button.
This isn't so good for mobile devices, due to the often severely-limited screen width, so I've put them at the bottom of the screen. I could have had them at the side on wider screens, changing to the bottom on narrow ones, but that might confuse people when going from portrait to landscape mode.
If I want them at the side on desktop then I, or anyone else, can run a simple override in Stylus. Or a variant could be made to put them at the side, or even a basic user setting could be added to do the job. But at the moment they're just sitting at the bottom. There are no longer any up/down links hiding in the thread pages, etc.
Gonna look at getting another zip done over the weekend. This thing is very close to being worth submitting. :)
Ok feral web denizens: I've got this thing as finished as it is going to get for some time, unless someone finds a particularly nasty bug. I even went nuts and fitted the theme out with RTL support, after grumbling that I wasn't going to. :D
The theme, and the associated page index mod, have both been officially submitted to the Theme Site and Mod Site.
Submission pages are here - Ant's Mutant Curve (https://custom.simplemachines.org/themes/index.php?lemma=2941) - and here - Dangerous Marsupial Page Index (https://custom.simplemachines.org/mods/index.php?mod=4247).
This just happened, so obviously they will take some time to be approved.
I have tested these beasties pretty thoroughly, so they should be safe around children and small animals.
If you are feeling a bit daring and don't want to wait for the official approval, zips for the theme and the mod are attached.
All code in both is totally rippable. Feel free to steal any of it and do wotcha like. :)
Ha. Found a few validation errors in it. Only trivial stuff, which doesn't seem to break anything, but I decided to double check everything and fixed them anyway.
Won't bother putting up another zip at the moment. Funny thing is that the theme site doesn't allow you to upload any corrected zips before the theme is approved. No options for that at all. I can download the first zip I uploaded, but there's no way I can upload a replacement.
So due to that bit of cleverness the approvals peeps are going to look at the contents sometime, and then get back to me and tell me it won't pass coz it has validation errors, at which point I will say "I know that, but your theme site wouldn't let me fix them".
Hey ho. :D
There should be an 'Edit' button on the top left
Aha. Hidden in the header bar. Same colour as the title. Found it. Good job on the camouflage. :D
Ok, new zip is upped. Ignore the first one. Waste of time. The new one should be good to go.
Hey, Ant, where's the current zip? Installed Curve_CSS3_RC3.14159.zip on a forum 2-3 weeks ago, maybe I'll update it. Recolored it to match Grasslands Curve variant that forum was using, would rather not have to do it again. Have another forum using Curve Multi Color, they need responsive and responsive curve mod doesn't work. Would like to show them your theme (have to recolor for them, too).
The current (hopefully final, with no errors, coz I can't find any) zip is attached to this post.
Just be aware that it's not going to be totally n00b-proof for mod installation. Most should go in pretty easily, but some will need a little bit of persuasion here and there. I've tested Digger's Highslide mod and Dougie's Inline Attachments mod, and they're fine if you give them a bit of help (will post instructions at some point). Haven't tested many others yet.
If you don't want to update RC3.14159 there's no real need to, since it works anyway. This one just has a few more fancy bits (fallback avs, memberlist, etc) and the support for RTL.
I'm idly messing with a few variants at the moment. In the mood for something simple, now that I've good a good base together. :)
PS: If someone with team permissions could ditch the older zip with the validation errors (first attachment in this post (https://www.simplemachines.org/community/index.php?topic=569433.msg4046022#msg4046022)) that would be cool.
Is it a theme or a mod?
It's a theme.
What do you think of this verification gimmick?
http://www.thekrashsite.com/mlc/index.php?action=register
Sometimes I scare myself. (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.thekrashsite.com%2Fpics%2Feek.gif&hash=47a7f570d6bf6d5cfe83418f6485d47ce689555d)
Yeah that's pretty scary. :D
Make it bouncy and flash.
I've put that on a couple of forums, tonight another one asked be about color blind people using it (something I had avoided thinking about). Nothing that a js kluge can't fix.
Quote from: Sir Osis of Liver on February 09, 2020, 11:41:41 PM
What do you think of this verification gimmick?
http://www.thekrashsite.com/mlc/index.php?action=register
Sometimes I scare myself. (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.thekrashsite.com%2Fpics%2Feek.gif&hash=47a7f570d6bf6d5cfe83418f6485d47ce689555d)
very cool! i want one! :)
PM me, I'll be on a while tonight.
Where is the Last Post column in board index? Gotta have that.
Same place it has been in this theme for for months. :D
General Discussion
Feel free to talk about anything and everything in this board.
Latest: At vero eos et accusamus... February 08, 2020, 05:48:27 AM by antechinus the wombat
Ok, I see it now. Have to close my left eye to see anything small this time of night, helps to know where it is.
Doing a green version here (http://www.thekrashsite.com/mlc/index.php) to match Curve Multi Color green they're using here (https://mlcforum.theherosspouse.com/index.php). Think I'll compact the user info block a bit, seems a bit spread out.
Yeah I was a tad worried about the most heavily-used links on the site (unread and new replies) being cramped for finger space on mobile. Figured I should give them enough line height so that anyone could just stab a finger at them and only hit one. Basically, a triumph of functionality over aesthetics. I agree they do look better if scrunched down in height a bit.
I'm messing around with variants. Only changing CSS, to get a few quick and easy things that look smooth. Just for the heck of it thought I'd try my hand at this new-fangled flat design thing. Personally I can't quite bring myself to go total flat though, so there are a few bits of eye candy thrown in.
Have four roughed out at the moment, with the Teal and Coffee being most advanced. The other two (Slate and Sage) are right for general colour scheme, but still need link colours and a couple of other things sorted.
This is me just testing out stuff to see what can be done on the same markup. The ones shown are just more or less "basic Curve" layout but I've also been testing things like full-width footers and headers. It can all be done, without much drama.
Incidentally, after you posted that question I was reminded of Bloc's old Millenium theme, which was using a similar board index arrangement back in 2006 or so. Just for the heck of it I threw that on local, and once the menu coding and text strings are swapped for 2.0.x versions it all hangs together remarkably well. Wouldn't be hard to get it fully 2.0.x kosher, and it's more or less much mobile-friendly out of the box.
Would be nice if you build into a multi-color theme. Got most of the obvious stuff done on the green version, will play with the header tomorrow. I don't use a phone so there's no way for me to test the small screen functionality. I can view it in FF emulations, but they're not 100% reliable, and larger than an actual phone. Did a couple of customizations with mobile-desktop, text menu links are spaced apart pretty well, but unread posts/new replies are close together. No one's complained, no idea if anyone has used the links (I never do).
Gonna pack it in for the night. Real nice theme overall. (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.thekrashsite.com%2Fpics%2Fthu.gif&hash=f4392e100b91a27ad55c137fafc83bec6aefd9cf)
Trying a few more tricks.
I resurrected Bloc's old Emerald theme* on local, because I always loved the thing even though I've never run it live on an actual site. It's also set up by default to be pretty much ideal for use on mobile. It was one of Bloc's early experiments with minimalism, and stacks the board index content vertically instead of having the table cells laid out horizontally.
However here's not much point attempting to convert all the templating and CSS to 2.0.x. It makes more sense to take the overall look and feel, and do that on a 2.0.x base. This makes it a good test case for this new "mutant Curve boilerplate". Trying out these variants (and some mod installations) is useful for seeing if all my ideas are actually the best compromise in practice.
While doing this I found a handy use for CSS filters (https://developer.mozilla.org/en-US/docs/Web/CSS/filter). The hue rotate filter is really useful for tweaking icon colours without having to make new images. For example, this takes a Curve-coloured icon and turns it into a perfect match for Emerald:
.catbg img {
filter: hue-rotate(322deg);
}
.catbg img:hover {
filter: hue-rotate(270deg);
border: 2px solid #ddd;
}
And obviously similar things could be done with the other filters, if necessary. This should be good for tweaking 2.0.x's stacks of little images which don't have $context['theme_variant'] attached them in the templates, and therefore can't be swapped via variant unless you do an awful lot of template hacking. With a bit of cunning CSS trickery it should be possible to nail most of the ones that need help, because you'll be able to change their look via the variant CSS files. :)
At the moment I haven't got around to detailing everything, but so far it's looking like this...
*Note for grumpy legal types: El Blocco has kindly put his old themes on GitHub (https://github.com/blocthemes/older-themes) under the BSD 2-Clause License, so me nicking Emerald is ok as long as I keep the credit for the dude himself. Which I will obviously do, since I happen to like the bloke anyway so don't really want to annoy him. I realise it's unusual for me to not want to annoy someone, but stranger things have happened.
Hey, where's the Go Down link? I don't see it. :(
Oh, n/m, I took them out earlier, thought they looked clunky. Still think so, most people won't know what they are. Maybe I'll try to fix them.
I did fix them. That's why I made them that way. :P
(The default ones have always given me the ******s)
Radical notion: if someone doesn't know what the things with up and down arrows on them are (coz that's really mysterious stuff) they could always, y'know, try clicking them and seeing what happens. It is the web. Clicking things it how it works. I often click unfamiliar things to see what happens. Try it. :D
(There is a limit to how much deliberate helplessness I am prepared to put up with)
They're behind status bar when it pops up, and if you go down to click them and miss (every time :P), taskbar pops up and covers them. They're pretty, though, just not practical.
Best place for them on desktop is up the left edge of the screen, but that's not so good on mobile due to the limited screen width. But I still find them easy enough to use at the bottom of the screen. If you're missing them every time, that suggests PIBCAK. :D I have a status bar and taskbar on my box too, and haven't had any issues.
I could whip up some code to have the positioning user-selectable. I had thought of doing that but haven't implemented it. It's not difficult to do, but at this stage I'd rather just give people CSS for the alternatives and let them make up their own minds.
ETA: Ok, on second thought I'll do it. Sort of. I was concerned about the position changing when people switch from landscape to portrait mode, but that can already happen with the main menu anyway (depending on the resolution of your device, of course). If someone has a 768x1024 tablet (in CSS pixels, regardless of actual device ratio) then switching from landscape to portrait will jump the menu from conventional display to hamburgered, so there's already a change in layout. Not to mention the further changes as resolution continues to decrease.
So if we accept that magic bunnies will be popping up all over the place anyway in this new responsive era I can switch the up/down buttons around too. This is a bit more CSS in some ways, but a bit less in others, so overall not much difference. So I'll do that, but skip silliness like additional profile settings. Desktop users will get the best position for desktop, and phone/tablet users will get the best for them. Easy.
Ok, have done it. Anyone on a screen wider than 896px (56em browser default) gets the up/down links at the left side of the screen. Anyone on a narrower screen, which in practice will be touchscreen 99% of the time, gets them in the bottom corners.
This should keep everyone happy. If you are still not happy, change the code yourself to whatever makes you happy. If nothing makes you happy, seek medical advice.
Having got that out of the way, I came up with a useful little usability tweak for the drop menus. A problem with these it that if the parent menu is taller than the rest of the screen content, as can happen on admin pages, the last drop menu ends up jammed against the bottom of the screen (see first screenshot).
Note that this drop menu has a bottom margin set, but it's not active against the body tag due to the menu being absolute positioned. The body tag just behaves as if the drop menu had no bottom margin.
The way around it, which I frankly should have thought of literally years ago, is to put a pseudo element on the bottom of the drop menu. This is a recognisable chunk of stuff for the body tag, even though it isn't markup as such, so it bumps your drop menu up by a nice amount (see second screenshot).
This has an extra advantage for anyone using a mouse, in that it provides a run-off zone beneath the drop menu. This means if you overshoot a bit while scrolling down the list of links, which we all do sometimes, you have some leeway before the menu disappears on you. As long as your cursor is still within the area of the appended pseudo element, the drop menu will stay open indefinitely (see third screenshot).
IMO this is going to be a better usability fix than a long mouseout delay, because you can still get rid of the menu in a hurry if you want to (just move the cursor sideways, out of the pseudo). Obviously the concept could be extended to provide a run-off area at the sides too, which I may end up implementing.
(BTW, normally you could just append the pseudo as .submenu::after {}. In this case I was already using both .submenu pseudo elements to do the little pointers at the top of the drop menu, so .submenu::after wasn't available, so I stuck an ::after on the last li in the list instead.)
Reverted to text up/down links, will take a look at that when I get a chance. Right now I'm wrassling with message index template, it's giving me all kinds of grief with Advanced Topic Prefix mod, which is a must have for this forum. Seems the table structure is quite different. Trying not to make any major changes that will bork mobile view.
The table structure is the same as default, but the presentation is altered by the CSS. The presentation uses a variety of tricks, none of which are particularly esoteric once you get your head around them. Obviously it will help if you already have your head around them.
Can't see that mod on the mod site, but if you have a copy handy I'll take a look at it.
It's a paid mod, can't post it here. Been picking at code for 2-3 hours, can't remove the prefix icons. If I can find where they're added, I can maybe fix the formatting. If you look here (https://mlcforum.theherosspouse.com/index.php?board=1.0) you can see how they work correctly in Curve Multi Color. Go here (http://www.thekrashsite.com/mlc/index.php?board=1.0) and you can see the problem. Had to remove icon2 from MessageIndex.template.php because it was displaying the prefix icons twice, one on top of the other. The mod makes a lot of edits in a lot of files, had to do a couple of manual edits to install it in AMC. Beats me. :P
Ok. Can be sorted without much drama, although frankly if you paid someone for the mod I reckon they should be prepared to support the damned thing.
Looks like all it really does is ditch the default message icons and replace them with your custom prefix icons. Only catch being your custom icons are much bigger, so throw things out of whack. Easy option: use CSS to scale your custom icons down a bit, so they fit in the table cell. Could also make that cell a bit wider, which gets a little trickier with the responsive stuff as there are a few things to keep track of, but it's quite possible. It's just a matter of checking the width you set on icon2 against the left margin on .subject and .lastpost (margin is the same width in both cases).
So if you want to add 20px to the width of icon2 at all resolutions you just do that (checking through the media queries to see when it changes). Then you just add 20px to the left margins on the other two classes.
Or you could leave the margins on .subject and .lastpost the same on larger screens, and ditch the icon1 column. It's frankly not much use anyway, because who really gives a damn about "hot topic" ratings"? Then you can just double the width of icon2. It will still need an increased margin on .subject and .lastpost on small screens, but that will be obvious.
ETA: Pro tip: make all your icons the same size, even if this means extra blank pixels on some. Or at least make them all the same height. Different widths you can deal with. The icon1 and icon2 cells are set to text-align: center; anyway. However different image heights, for images that are meant to be the same class, is a sure fire way to get things out of alignment. If they are all the same height, one tweak sorts them all out.
Just got on, will take a look. It's not my forum, not my icons, not my mod. AFAIK Nibogo supports his mods pretty well, but this seems to be a theme problem. Mod displays icons correctly in Curve and Curve Multi Color (that's what they're using now). So far haven't even been able to find td widths in css or the mod icons in the template. The td containing icon2 must be removed or you get duplicate overlapping mod icons. Only way to remove mod icon is to remove the topic title. It seems to be in the third cell, not the second.
Ah. He has probably done something with hooks then. Those can be a damned nuisance to track down. Another of those things that is wonderfully convenient when it wants to do what you want it to do, but otherwise is not quite so convenient in practice as it is in theory.
Regarding td widths:
.topic_table .icon1, .topic_table .icon2 {
width: 36px;
text-align: center;
position: absolute;
top: 10px;
left: 0;
}
.topic_table .icon2 {
left: 36px;
}
.topic_table .subject {
position: relative;
margin: 0 21% 0 72px;
padding: 4px 0 0;
}
And:
.topic_table .lastpost {
position: relative;
margin: 0 21% 0 72px;
padding: 0;
}
There are a couple more lines of relevant code down in the media queries at the end of index.css. All of this is easily found by searching for the relevant parent class (.topic_table) which you can get from your browser's document inspector:
if (!$context['no_topic_listing'])
{
echo '
<div class="pagelinks_inline">
', $context['page_index'], '
</div>
', template_button_strip($normal_buttons, 'right'), '';
// If Quick Moderation is enabled start the form.
if (!empty($context['can_quick_mod']) && $options['display_quick_mod'] > 0 && !empty($context['topics']))
echo '
<form action="', $scripturl, '?action=quickmod;board=', $context['current_board'], '.', $context['start'], '" method="post" accept-charset="', $context['character_set'], '" class="clear" name="quickModForm" id="quickModForm">';
echo '
<table id="messageindex" class=" topic_table">
Sorry I haven't gotten to this. Wasted the past 3-4 hours trying to determine why the topic prefix mod, which was installed and working on prod forum as recently as yesterday, is now uninstalled but custom icons are being correctly displayed as icon2 in Curve Multi Color as before. Only the row of sort icons that mod adds are missing from top of table. If I install the mod it duplicates post icon in topic title. There are two of each, one .gif and one .png, same images next to each other. I can replicate it on my clone install by installing mod and copying /images/posts/ from prod default Curve and CMC. Without mod custom icon .gifs are available in post editor and display correctly in second table cell next to topic title. When mod is installed (you can see it here (http://www.thekrashsite.com/mlc/index.php?board=1.0) in CMC) identical custom icon .png is added neatly to left side of topic title, and you see the row of icons that sort topics across top of table. I've spent the afternoon trying to determine why this is happening, still don't know. Can't find added icon in the code, no idea why mod was installed and working in prod forum, now it's not, icon filenames are not in db. I'm done for today. :P
This throws an undefined index error for post_group -
PersonalMessage.template.php
// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" class="poster_avatar">';
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
', $message['member']['avatar']['image'], '</a>';
}
elseif (!empty($message['member']['group']))
{
echo '
<span class="no_avatar ', $message['member']['group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
elseif ($message['member']['post_group'] != '')
{
echo '
<span class="no_avatar ', $message['member']['post_group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
else
{
echo '
<span class="no_avatar">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
It does? Ok, will take a look tonight.
By the way, support thread is over here now: https://www.simplemachines.org/community/index.php?topic=572053.0