This is something I'm messing around with as a live override for this site, running in Stylus. After doing my dark variant of the 2.1 default I felt like playing with the light variant some more, and since the dark one went fairly heavy on eye candy I felt like stripping stuff out of the light one to see what evolved.
It's interesting because the presentation I'm after requires a bit of thinking to deal with the default 2.1 markup, and is giving me ideas for (shock! horror!) actual PR's to hopefully make theming easier by the time 2.1 goes Final (consistent markup where possible, a few more handy classes here and there, etc).
Anyway it's turning out ok, and I looked at it and thought "Hey, it's smooth, and cool, and soft. I've made a theme out of ice cream." :D
Ice_cream_1.png
Ice_cream_2.png
Very nice dude! I dig the box-shadows ;)
Very nice! 8)
Very nice
That is looking pretty good. I like the layout that you have given to the board index and category sections.
I like that layout more than the default. To my mind stats are just filler on wider screens. Most of the time they're not of any real interest, and what you want are the posts. So IMO it makes sense to put the stats at the right (easy change with flex order) and right-align the stats text to give a clean finish against the board margin.
This works well visually with the left-aligned last post content. Sort of gives a clean finish to both sides of everything to do with posts. Bundles it all up nicely, if you know what I mean. TBH I think that layout should be default, but it's such an easy change with CSS that it doesn't really matter much.
I do the same thing on message index and the unread pages. Code is basically this:
/* --------------------------- */
/* Board and topic stats divs. */
.board_stats {
order: 4;
flex: none;
width: 120px;
padding-top: 11px;
font-size: .8125rem;
text-align: end;
}
/* ------------------------------- */
/* Board and topic last post divs. */
.lastpost {
order: 3;
flex: none;
margin: 0;
width: 320px;
padding-top: 11px;
font-size: .8125rem;
}
I think this is starting to get somewhere. :)
Ice_cream_3.png
Lolz. This is fun. :D You can drop any of the standard emoji set* into the content attribute of a pseudo element, to make custom icons with very little effort. These are bog standard Windows ice cream emojis, restyled with the same trickery that is applied to the forum title content.
Ice_cream_4.png
The code for the board icons looks like this:
.board_off {
filter: opacity(.3);
}
.board_icon .board_on, .board_icon .board_on2, .board_icon .board_off {
position: relative;
background-image: none;
}
.board_on::after, .board_icon .board_on2::after, .board_off::after {
position: absolute;
top: -7px;
right: 2px;
background: #415681;
background-clip: border-box;
color: transparent;
font-size: 2.125rem;
line-height: 1.5;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 1px #fff5;
content: '🍨';
}
*See: https://emojiguide.com for examples.
I think the first screenshots look better.
Some minimal contrast warm/cold colors is needed :)
I am deliberately playing for cool and icy. Summer here can be hell on Earth. Cool and icy is good sometimes. ;)
Anyway it's still WIP. The basic idea is sound, and it will evolve into something usable.
This is looking neat, love where it's going, it's clean.
Yup, I'm liking it. Usually I get obsessed with eye candy. This one is going pretty minimalist, just for something different. :)
Had to comment - this one looks really nice! Love how things come full circle heh.
Plus: now you just have to make a dark version of it. :D
I suppose I will have to finish it now. I'm not sure how it would go as a dark version though. That's pretty much diametircally opposed to how I thought of the thing. This is light, and fairly stark and glacial. To me dark themes are (usually) warmer and richer.
Nice work 8)
How do you chance the board icons Ant?
I love the recessed 3D touches. :)
Quote from: Mike66 on November 02, 2021, 07:51:02 AMNice work 8)
How do you chance the board icons Ant?
The board icons are just emojis from the standard HTML5 emoji set (see code in this post (https://www.simplemachines.org/community/index.php?msg=4097867)). So they are all CSS, and therefore easy to change. Only catch with that is the emojis will look different on different operating systems, so I will probably change them to something more consistent.
Quote from: TurtleKicker on November 02, 2021, 12:17:31 PMI love the recessed 3D touches. :)
If you mean the theme title and the board icons, that's done with a transparent color and CSS background-clip with a text-shadow. quite easy, and you can get a good range of effects by playing with it.
One could say this is a very "cool" looking theme. P ;D ;D I love it. The typograhgy is nicely spaced out, it looks simple, clean and fresh. Love the button states. The colour scheme has made me super moist. Why can't smf 2.1 use this theme as default. Pfft. VERY NICE WORK!