How to change color palette?

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
zorni
Registered User
Posts: 119
Joined: Mon Mar 23, 2009 10:29 pm
Contact:

How to change color palette?

Post by zorni »

Hey,

I'd like to change the colors from the standard color palette, to colors which are much better readable in our forum (we're using our own, custom style).
Anyone knows how to do this?

Just to make sure, that everybody understands what I mean:

Change those colors:
Image

with those for example (the real list is much longer)

Image
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: How to change color palette?

Post by PlanetStyles.net »

It's not to easy I'm afraid :(

The colour palette is dynamically generated in phpBB/assets/javascript/core.js:

Code: Select all

/**
* Get the HTML for a color palette table.
*
* @param {string} dir Palette direction - either v or h
* @param {int} width Palette cell width.
* @param {int} height Palette cell height.
*/
phpbb.colorPalette = function(dir, width, height) {
	var r, g, b,
		numberList = new Array(6),
		color = '',
		html = '';

	numberList[0] = '00';
	numberList[1] = '40';
	numberList[2] = '80';
	numberList[3] = 'BF';
	numberList[4] = 'FF';

	var tableClass = (dir === 'h') ? 'horizontal-palette' : 'vertical-palette';
	html += '<table class="not-responsive colour-palette ' + tableClass + '" style="width: auto;">';

	for (r = 0; r < 5; r++) {
		if (dir === 'h') {
			html += '<tr>';
		}

		for (g = 0; g < 5; g++) {
			if (dir === 'v') {
				html += '<tr>';
			}

			for (b = 0; b < 5; b++) {
				color = '' + numberList[r] + numberList[g] + numberList[b];
				html += '<td style="background-color: #' + color + '; width: ' + width + 'px; height: ' +
					height + 'px;"><a href="#" data-color="' + color + '" style="display: block; width: ' +
					width + 'px; height: ' + height + 'px; " alt="#' + color + '" title="#' + color + '"></a>';
				html += '</td>';
			}

			if (dir === 'v') {
				html += '</tr>';
			}
		}

		if (dir === 'h') {
			html += '</tr>';
		}
	}
	html += '</table>';
	return html;
};

/**
* Register a color palette.
*
* @param {jQuery} el jQuery object for the palette container.
*/
phpbb.registerPalette = function(el) {
	var	orientation	= el.attr('data-orientation'),
		height		= el.attr('data-height'),
		width		= el.attr('data-width'),
		target		= el.attr('data-target'),
		bbcode		= el.attr('data-bbcode');

	// Insert the palette HTML into the container.
	el.html(phpbb.colorPalette(orientation, width, height));

	// Add toggle control.
	$('#color_palette_toggle').click(function(e) {
		el.toggle();
		e.preventDefault();
	});

	// Attach event handler when a palette cell is clicked.
	$(el).on('click', 'a', function(e) {
		var color = $(this).attr('data-color');

		if (bbcode) {
			bbfontstyle('[color=#' + color + ']', '[/color]');
		} else {
			$(target).val(color);
		}
		e.preventDefault();
	});
};
I reckon your best option would be to use custom BBcodes, or hack out the current system and build in a new one from scratch. Neither impossible, but a little time intensive.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin »

This really just needs to be a dropdown with an infinite color picker such as https://codepen.io/hanakin/pen/mqBgbm?editors=1100

I need to work on for the new theme anyway so Ill start hacking away at it.
zorni
Registered User
Posts: 119
Joined: Mon Mar 23, 2009 10:29 pm
Contact:

Re: How to change color palette?

Post by zorni »

I didn't think it was that complicated, thanks for your feedback! So I'll wait and see what Hanakin is doing whith this dropdown palette, which would be cool. If you need someone to test it, just let me know.
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: How to change color palette?

Post by PlanetStyles.net »

Hanakin wrote: Fri Nov 17, 2017 2:19 am This really just needs to be a dropdown with an infinite color picker such as https://codepen.io/hanakin/pen/mqBgbm?editors=1100

I need to work on for the new theme anyway so Ill start hacking away at it.
I wouldn't say it's necessary to implement something that complex, especially given that phpBB already supports custom colours through entering a hex code. Thinking from a usability point of view it's impossible for users to pick the same colour twice using a palette such as the one you've linked to, so end-users trying to use consistent colours will always have varying results.

No need to reinvent the wheel here, it's probably enough to define a standard palette such as the native one, but enable an ACP option for Admins to modify, add or remove preset colours.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin »

not really as you can manually enter a value
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: How to change color palette?

Post by PlanetStyles.net »

Hanakin wrote: Mon Nov 20, 2017 4:49 am not really as you can manually enter a value
Indeed, but hex code knowledge is very limited amongst end users without design experience.

End-user experience needs to be prioritised above whatever looks cool to implement.
User avatar
3Di
I've Been Banned!
Posts: 17538
Joined: Mon Apr 04, 2005 11:09 pm
Location: I'm with Ukraine 🇺🇦
Name: Marco
Contact:

Re: How to change color palette?

Post by 3Di »

I read the OP's request as to have a textual drop-down with all of this colors (doable in PHP, I do own the code already but not yet used)..
https://www.w3schools.com/colors/colors_names.asp

As per the above code/result of hanakin and related comments, I implemented such a color picker simply using The HTML5's type color and a "drop" of js, that allows as well to have a list of preset colors (which I didn't coded though).
Example here:
https://github.com/3D-I/pia/blob/master ... ml#L52-L74
Just few lines.
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Buy me a coffee -> Image
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin »

no one is saying it can not have presets, but presets should be limited to a handful of carefully selected colors and not a wasteful grid like it is now, but we should also allow for custom colors. ie

http://xiaokaike.github.io/vue-color/

I am still working on it it's in no way done yet. Its probably going to end up being something similar to sketches color picker when I'm finished
Inala
Registered User
Posts: 6
Joined: Mon Mar 05, 2018 3:37 pm

Re: How to change color palette?

Post by Inala »

Actually I do not understand anything in javascript, but I still need some changes with this default phpbb palette.
Can anyone tell me just what to look for, where can I change colors in assets (or anywhere else) or how can I change default pallete to some color picker? Is it possible?
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin »

its not possible! the grids is created based on a math function
Inala
Registered User
Posts: 6
Joined: Mon Mar 05, 2018 3:37 pm

Re: How to change color palette?

Post by Inala »

Thanks!
I see( So I can only change the range of colors within the existing palette, right?
Peeagepeebeebee
Registered User
Posts: 45
Joined: Fri Jan 18, 2019 4:34 am
Location: Germany

Re: How to change color palette?

Post by Peeagepeebeebee »

zorni wrote: Thu Nov 16, 2017 11:28 am Change those colors:
Image
Sorry, for reviving this topic, but that above color picker seriously sucks and is so terrible 90’s web design. I mean
  1. who can distinguish the colors in their shown arrangement? But first and foremost
  2. who the heck needs that many colors (in hardly distinguishable shades)!?
What we need is a drop-down menu or color switch with 8-16 colors max.
This is about text, we are not drawing pictures here! :D
spello
Registered User
Posts: 126
Joined: Sat May 28, 2011 11:12 am
Contact:

Re: How to change color palette?

Post by spello »

The best way is to introduce color by its name, like [color=green] (it already works)
list:
https://www.w3schools.com/colors/colors_names.asp
https://www.quackit.com/html/codes/colo ... _names.cfm

Moreover, phpBB's picker could be replaced with standardized HTML <input type="color">
see:
https://www.w3schools.com/tags/att_input_type_color.asp
https://developer.mozilla.org/en-US/doc ... nput/color
input type color with list: https://developers.google.com/web/updat ... lt-choices
Post Reply

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