• Welcome to Simple Machines Community Forum. Please login or sign up.

[Preview] Ice Cream theme [SMF 2.1 RC4]

Started by Antechinus, September 11, 2021, 11:14:29 PM

Previous topic - Next topic

Antechinus

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

You cannot see attachments on this board.

You cannot see attachments on this board. 

Mick.


Shades.


ShadesWeb.com - Custom Logos
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

gecitli

http://www.webtiryaki.com
webmaster forumu
Free & Premium Responsive Themes for SMF.

TwitchisMental

That is looking pretty good. I like the layout that you have given to the board index and category sections.

Antechinus

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;
}

Antechinus

I think this is starting to get somewhere. :)

You cannot see attachments on this board.

Antechinus

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.

You cannot see attachments on this board.

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.

Speed King

I think the first screenshots look better.
Some minimal contrast warm/cold colors is needed :)

Antechinus

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.

SychO

This is looking neat, love where it's going, it's clean.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Antechinus

Yup, I'm liking it. Usually I get obsessed with eye candy. This one is going pretty minimalist, just for something different. :)

Bloc

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

Antechinus

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.

Mike66

Nice work  8)
How do you chance the board icons Ant?

TurtleKicker


Antechinus

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). 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.

Antechinus

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.

Wellwisher

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!

Advertisement: