Skip to main content ↑ ↓
Seriously Gruesome Started by Spuds · · Read 9378 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Seriously Gruesome

I took the CSS file that @Antechinus posted a few months back and converted it into a _variant theme of the default. 

Please note it only went as far as Ant did in making that theme ... All I did was rename the file and do a little formatting and consolidation to make it even a bit more gruesome that it was!  I was curious since most of the changes in that CSS were around the colors/borders and dealing with coloring SVG icons w/o creating new ones.

Anyway I put it on the site for kicks, its under the variant selection for the default theme, so now in addition to Light, BeSocial we now have gruesome! You should see it in the pull down so https://www.elkarte.net/community/index.php?action=profile;area=theme  then select choose theme then variant.  Just for fun :D

Re: Seriously Gruesome

Reply #1 –

It doesn't work well in mobile though...

Re: Seriously Gruesome

Reply #2 –

I only coded it for desktop. I didn't bother with responsive, since at the time I was only using it on my box. I think (can't remember) it still has some responsive bits, but I wouldn't expect it to work everywhere on mobile without a lot more testing and editing.

Edi: Took a quick look at it. It's sort half there, but doesn't work as well as the original in Stylem/Stylus. Quite a few bits are wonky.
Last Edit: December 21, 2020, 03:38:07 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Seriously Gruesome

Reply #3 –

I hope to see it in a reponsive mode in the future. It's already a nice alternative dark theme.

Re: Seriously Gruesome

Reply #4 –

I can set it up on a test site and fix the presentation bugs on desktop pretty easily. A lot of the current problems are probably due to the cascade order of the default files. That would be why it looks half finished even on desktop.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Seriously Gruesome

Reply #5 –

Here is the file that i put on the site ...

Re: Seriously Gruesome

Reply #6 –

It may not be relevant. If it's being done as a variant I'll have to go through everything I coded and see how it plays with the default file structure. It's been yonks since I played with Elk coding in any detail, so offhand I can't recall how flexible it is.

TBH doing it as a separate theme would probably be easier, but it's probably doable as a variant too.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Seriously Gruesome

Reply #7 –

Yeah I just put it in as a variant since the file seemed to be predominantly a color file.  It was mostly around colors/padding/borders and all the fancy things you did for the icons etc.   So I tossed it in as a variant and it did really well, at least I think so.  I did not try it on its own so I could be way off from what was intended.

Re: Seriously Gruesome

Reply #8 –

A lot of the basics are ok, but things like the editor and profile sidebar menu are pretty screwed. I'll have a look at it on a test site later.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Seriously Gruesome

Reply #9 –

Much later.  :D
Anyway... I've been playing around with a few things on SMF and phpBB (welcome to the Dark Side, our cookies are crap).

One bit of trickery I've been messing with is the old (often requested) idea of making sigs stick to the bottom of posts, even if there is only one line of post content and a large .poster area, but without forcing the sig to be below the .poster area (IOW, not using a basic clear: both; on the sig).

This was pretty much impossible before flex and grid were available. With flex or grid it's easy. IMO grid is looking like a better option for posts, because posts are a two-dimensional layout anyway and you can do more tricks with less markup if you use grid. Both have slightly dodgy support for IE11 (which is being patched for security until 2025) but the workarounds aren't a big deal. For grid it's only a few extra lines of CSS with -ms-prefix stuffz.

With old school floats or display: table-cell; or whatever, it made sense to have two main chunks (.poster and .postarea) for ease of layout. With flex you need an extra div just inside .postarea to get sticky sigs on some browsers (ie: more markup) which is not so great. But, if you use grid,  it is best to get rid of .postarea and just have its contents (.keyinfo, .messageContent, nav, footer) as direct children of .post_wrapper. This gives not only less markup, but more flexibility in layout with less CSS hassle.  8)
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Seriously Gruesome

Reply #10 –

I've looked at both grid and flex and kept going back and forth, never figuring out which was the right direction to go.  Glad you figured it out!  

Have any more details about your cookie comment?  We are pretty lite on them so do you mean not saving enough of user state or other?

Re: Seriously Gruesome

Reply #11 –

That was a joke based on this meme:



The point being that phpBB is the Dark Side, and I'm not that impressed with their cookies. :P
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Seriously Gruesome

Reply #12 –

Well I was a bit slow on the old uptake yesterday!  Sometimes the old brain misfires :D

If you get the signature trickery working please share!

Re: Seriously Gruesome

Reply #13 –

Ok. Might play with some Elky basics and get a bit of a clean up going. The siggy stuff is easy with a minor markup change. :)
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Seriously Gruesome

Reply #14 –

Was thinking about the board index too. The original markup was to allow a range of presentation options with the CSS we had available back then. Not that anyone has ever been adventurous enough to use the options anyway. :P

These days the board index (and probably message index too, IIRC) could have the markup simplified, and with flex would be even easier to re-jig for various presentations. Or it could use grid, which is nearly as easy on desktop and might be more useful on mobile.

TBH it's all a bit of a mess at the moment. For example, class="wrapper" was always for setting overall width, but now for some weird reason it's set on the aside that holds the search form and on section#header.

Then in posts the ul.poster is floated, but the aside wrapping it isn't, so that collapses and just sits there looking silly. It would make more sense to put the class and the float on the parent aside rather than the ul. Someone just got all excited about new HTML5 tags without considering what was there before and how it would make sense to integrate it all.

None of this is hard to fix in principle. :)

ETA: Oh yeah, and flex makes sticky footers on the main pages easy too. IOW can be sticky on index?action=help, even on a large screen. You just mark it up as header + main + footer and do CSS like this:

Code: [Select]
body {display: flex; flex-direction: column;}
header, footer {flex: 0 0 auto;}
main {flex: 1 1 auto;}
Sorted. No muss. No fuss. Then your .wrapper divs go directly inside those three parents and Bob's your uncle.
Last Edit: February 07, 2021, 12:54:42 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P