Different group colors per every style - how?

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
Talk19Zehn
Registered User
Posts: 846
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Different group colors per every style - how?

Post by Talk19Zehn »

We want now to use brightness and contrast for coloured username, groupname ( phpBB dark styles )
We want override coloured username, groupname ( phpBB dark styles )

Hello, as a test ...
Your style names and the colours (compare the example in the lower part of the HTML ( line 47ff )) are to be adapted according to your wishes. I have used for dark designs a

change_coloredoption_username.html

with the following content for my own dark styles.

Examples:

Code: Select all

<!--
	We want now to use brightness and contrast for coloured username, groupname ( phpBB dark styles )
-->

{% if T_TEMPLATE_NAME eq "FlyVisits" %}
<style>
	.username-coloured,
	.group-coloured,
	.online-list em a,
	.profile-details dd span[style*="color"],
	.section-memberlist td a[style*="color"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
}
.online-list em a {font-weight: bold !important;}
</style>
{% endif %}

{% if T_TEMPLATE_NAME eq "Myth of Atlantis" %}
<style>
	.username-coloured,
	.group-coloured,
	.online-list em a,
	.profile-details dd span[style*="color"],
	.section-memberlist td a[style*="color"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
}
.online-list em a {font-weight: bold !important;}
</style>
{% endif %}

{% if T_TEMPLATE_NAME eq "graphitdark" %}
<style>
	.username-coloured,
	.group-coloured,
	.online-list em a,
	.profile-details dd span[style*="color"],
	.section-memberlist td a[style*="color"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
}
.online-list em a {font-weight: bold !important;}
</style>
{% endif %}

<!--
	We want override coloured username, groupname ( phpBB dark styles )
-->

{% if T_TEMPLATE_NAME eq "Rainbow-AOP" %}
<style>
	.username-coloured[style*="#AA0000"],
	.group-coloured[style*="#AA0000"],
	.online-list em a[style*="#AA0000"],
	.profile-details dd span[style*="#AA0000"],
	.section-memberlist td a[style*="#AA0000"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
		color: royalblue !important;
}
	.username-coloured[style*="#00AA00"],
	.group-coloured[style*="#00AA00"],
	.online-list em a[style*="#00AA00"],
	.profile-details dd span[style*="#00AA00"],
	.section-memberlist td a[style*="#00AA00"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
		color: darkseagreen !important;
}

.online-list em a {font-weight: bold !important;}
</style>
{% endif %}

{% if T_TEMPLATE_NAME eq "ongraydarkchild" %}
<style>
	.username-coloured[style*="#AA0000"],
	.group-coloured[style*="#AA0000"],
	.online-list em a[style*="#AA0000"],
	.profile-details dd span[style*="#AA0000"],
	.section-memberlist td a[style*="#AA0000"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
		color: coral !important;
}
	.username-coloured[style*="#00AA00"],
	.group-coloured[style*="#00AA00"],
	.online-list em a[style*="#00AA00"],
	.profile-details dd span[style*="#00AA00"],
	.section-memberlist td a[style*="#00AA00"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
		color: darkkhaki !important;
}

.online-list em a {font-weight: bold !important;}
</style>
{% endif %}

I uploaded this to the template directory of the dark styles ( see examples ) and entered it in the overall_header.html of these dark designs:

find:
<!-- EVENT overall_header_stylesheets_after -->

then add after in a new line

<!-- INCLUDE change_coloredoption_username.html -->

I don't have any other idea at the moment. It is quite possible that further background colours would have to be changed in sequence: e.g. User Control Panel

Code: Select all

/* Friends list */
.cp-mini {
	background-color: #yourcolor;
}
Approaches for light-coloured designs are also conceivable. In fact, there may be limits to personal responsibility. So everything is non-binding, as the colours are decisive.

Regards
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB
User avatar
Gumboots
Registered User
Posts: 692
Joined: Fri Oct 11, 2019 1:59 am

Re: Different group colors per every style - how?

Post by Gumboots »

Obviously you can do things any way you like, but this seems unnecessarily convoluted:

Code: Select all

	.username-coloured[style*="#AA0000"],
	.group-coloured[style*="#AA0000"],
	.online-list em a[style*="#AA0000"],
	.profile-details dd span[style*="#AA0000"],
	.section-memberlist td a[style*="#AA0000"] {
		-webkit-filter: brightness(1.1) contrast(1.3);
		filter: brightness(1.1) contrast(1.3);
		color: royalblue !important;
}
If you are going to declare a custom colour override anyway, there's little point in playing with filters on top of that. It would be simpler and cleaner to just declare a colour that looks how you want it to look.

The easiest way of doing this is by using HSL colour codes, which are supported by all browsers these days, and which allow very easy tweaking of hue, saturation and lightness individually. These are the factors that will be tweaked by filters anyway, so you might as well do it directly. You can get HSL values for any colour from your browser's document inspector.

As an example: the named colour royalblue is #4169e1 in hex, or hsl(225, 72.7%, 56.9%). Call it hsl(225, 73%, 57%). That's close enough that nobody will ever be able to tell the difference.

If you want it a bit brighter, just increase the 57%. If you want it a bit more/less saturated, just increase/decrease the 73%. If you to shift it a bit towards the green part of the spectrum, just decrease the 225 to whatever looks good. Increase the 225 if you want to shift it a bit towards the red end of the spectrum.
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
User avatar
Talk19Zehn
Registered User
Posts: 846
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Different group colors per every style - how?

Post by Talk19Zehn »

Hello at All,

yes, a variety like the state of colour applications is a powerful task.

ACP / USERS AND GROUPS / GROUPS -> Manage groups

Administrators / Group colour: The colour value to find (HEX) find EXAMPLE ...

#AA0000

The replacement with the following colour value:

Code: Select all

color: royalblue !important;
In HEX (RGB): EXAMPLE ... royalblue

Code: Select all

color: #4169E1 !important;


Global moderators / Group colour: The colour value to find (HEX) find EXAMPLE ...
#00AA00

The replacement with the following colour value:

Code: Select all

color: darkseagreen !important;
In HEX (RGB): EXAMPLE ... darkseagreen

Code: Select all

color: #8FBC8F !important;

===== :?

It was worth a try, unless further ideas are put forward that show the way in a globally comprehensive, future-oriented way.

BTW: Everything is open and the colour, the constellation decides. Developments W3C, browser, monitor, pc (colour calibration) and much more.

HSB or HSL?
HSL colours can be predicted: H-values (Hue, colour tone) between 0 and 30 deliver red, from 30 it becomes orange, up to 60 yellow. Green ranges from 60 to about 150, followed by blue up to 270, and violet and purple tones bring up the rear with high H values.

Larger values for Lightness lighten the hue, and intense purer colours emerge at high saturation. Is that right, is one perhaps subject to a misconception?

The HSL colour selector makes it easy to combine colours - e.g. for a colour palette. Select the basic colour, adjust the brightness with the lightness slider and three or more colours of the same saturation and brightness form a harmonious palette. The W3C has chosen the HSL colour space. If you overlook the "B", for example, Photoshop colour picker, you get the same colour tone with the HSB values from Photoshop, but a different saturation and a different brightness, if the values are taken over in CSS as HSL. To manipulate what is happening around the colour wheel a little, the HSB colour space is sometimes referred to as HSV.

Not only Photoshop users, but also web applications confuse HSB and HSL, so that visible differences and colour differences can occur. The colour picker of Mac OS uses HSB, jQuery colour pickers also mostly use HSB, but do not necessarily mention this.

The W3C has opted for the HSL colour space. If you overlook the "B" in the Photoshop colour picker (and what is the difference between Lightness and Brightness?), you get the same hue with the HSB values from Photoshop, but a different saturation and a different brightness if the values in CSS are taken over as HSL.
The colour picker in Mac doesn't even say if it's on the side of HSL or on the side of HSB ..., could that be?

Obviously I probably missed something that could be adjusted globally in phpBB.

Or take also otherwise a look: This and much more in this category might be of interest:

https://www.w3schools.com/colors/colors_picker.asp

and others ... (CSS Color Module Level 4) ... :)

Best regards


Edit: 03 Jun 2022 / BBCode Code
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB
User avatar
Gumboots
Registered User
Posts: 692
Joined: Fri Oct 11, 2019 1:59 am

Re: Different group colors per every style - how?

Post by Gumboots »

My point was that there is no need to unnecessarily complicate the issue. It's a very simple matter once you have the relevant selectors. Just use HSL colour values, adjust them to suit, and don't bother applying filters on top of them. Easy. No more needs to be said.
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
Post Reply

Return to “[3.3.x] Styles Support & Discussion”