phpBB • Free and Open Source Forum Software

Gumboots · by **Gumboots** » Fri Nov 08, 2019 10:11 am

I just noticed that most of the theme/colours CSS files have a hover colour defined for links. but that this gets overridden by the default colours.css for .arrow-left:hover and .arrow-right:hover, with the result that they display the default light blue.

I've already changed it on my copy. Just needs the second line of yellow.css to look like this:

Code: Select all

a:hover, a:hover .icon.icon-blue, .arrow-left:hover, .arrow-right:hover { color: #a1d74e; }

And similarly for the other seven files (with the relevant hex code, obviously).

PlanetStyles.net · by **PlanetStyles.net** » Fri Nov 08, 2019 12:55 pm

Hah. It looks like the yellow hover colour is coming through as Green too

I'll fix this up so it's included in the next maintenance update, but won't submit a version release until then

PlanetStyles.net · by **PlanetStyles.net** » Fri Nov 08, 2019 1:06 pm

I also got to playing with something to make the icons a bit nicer with the yellow colour scheme. What do you think?

(Place at bottom of yellow.css)

Code: Select all

/* Anti eye-burning fix for icons */
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	color: #171b24;
}

Gumboots · by **Gumboots** » Fri Nov 08, 2019 1:57 pm

Yeah I noticed the green on hover too. Wasn't sure if that one was deliberate. Doesn't look too bad actually.

I've just been toning down the yellow though. I find high contrast links on dark backgrounds too much for my eyes. I like things more mellow. To me, the yellow looks good with the links set to #c4b500. That still meets WCAG AAA.

Gotta say I prefer static icons too. I like the general design of them, but if they're constantly flashing it gives me the irrits, so for my use I'll knock out the animations.

PlanetStyles.net · by **PlanetStyles.net** » Fri Nov 08, 2019 2:14 pm

Fair enough.

Thanks as always for your feedback

Gumboots · by **Gumboots** » Fri Nov 08, 2019 2:38 pm

A lot of this stuff is personal preference. You can't please all of the people all of the time, so you gotta please yourself. I think someone wrote a song about that.

Gumboots · by **Gumboots** » Sat Nov 09, 2019 4:29 am

Had an idea. As far as I can tell, your dark.css is overriding everything in the default colours.css. Obvious question arises: why bother having dark.css? Why not just empty colours.css and put the current content of dark.css in there? One less file to mess with, and should make for less verbose declarations. Unless I'm missing something, of course.

I'm going to experiment with it. With the way things are going I think I can get some very pleasant light variations without much effort, but obviously there's not much point having file called dark.css for those. I could change the name to light.css of course, and adjust colours to suit, but that's when I started thinking it might make more sense to just use colours.css and be done with it. Food for thought.

PlanetStyles.net · by **PlanetStyles.net** » Sat Nov 09, 2019 1:24 pm

Correct.

The override was very deliberate. It's much less effort to create a hacky override .css file than to replace every individual value in colours.css . Also, if I simply did a find/replace-all for the hex values in colours.css, I've got no idea which elements have been recoloured. The dark.css approach gives me this control.

Prosilver's CSS is in a horrific state, and as such I didn't consider it worth the time doing this the 'proper' way. A hacky outcome on top of already filthy code is kind of okay.

I'm encouraged by the direction Hanakin's heading with the 4.0x default style. His modern approach will negate the need for hacky solutions like this to begin with

Gumboots · by **Gumboots** » Sat Nov 09, 2019 10:26 pm

Fair enough. I went through it last night, just out of curiosity. Well ok, a bit out of OCD too.

I didn't try a find/replace on the content of colours.css. I just did a compare on colours vs dark, and deleted anything from colours that was defined in dark. That knocked about 40% off colours.css, which from my perspective should make things easier when running the document inspector. Less stuff to sort through. That's the main reason I did it. But I think I'll try just adding the content of dark to the end of colours, or maybe the other way around: add the content of colours to the beginning of dark (mostly to save jumping between files while I'm messing around).

One idea worth considering: adding a (blank) custom.css that loads after {STYLESHEETS}. Obviously anyone can do that themselves if they want to, but newbies might not know how to add the call for it. Handy things to have though. Anyone can just save a copy of their tweaked version before any upgrades, and FTP it into place after upgrading.

By the way, I checked out your site demos. Nice work. Milk and Volare are my favourites. Very classy stuff. For the site I'm running I don't want to scare old (ancient) members with anything too far from the default phpBB gui, but if they were more adventurous...

Gumboots · by **Gumboots** » Mon Nov 11, 2019 1:43 am

Ok, I have more or less bowed to your greater wisdom on the subject of animated icons. Sort of anyway.

I'm experimenting with a slower pulse effect, like a very slow heartbeat, that animates the opacity instead of a box-shadow. Sort of "give them a nudge, but don't get on their case", or at least that's how it feels to me. Code is like this:

Code: Select all

.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	animation: UnreadPulse 3.6s infinite;
	background: #29542e !important;
	color: #fff !important;
}
@keyframes UnreadPulse {
	0% {
		opacity: .75;
	}
	60% {
		opacity: .75;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: .75;
	}
}

This is for a light variant, with an #eee forabg background and green links (the unread icons are a light grey). Works quite well. Will try it with the dark ones too, and see what I can come up with.

Not that I'm suggesting you change the style's default CSS. This is just for variations to suit myself, and someone else might like it.

phpBB • Free and Open Source Forum Software

Prosilver Dark Edition

Small bug? .arrow-left:hover and .arrow-right:hover - Prosilver Dark Edition

Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

Re: Small bug? .arrow-left:hover and .arrow-right:hover

advertisements