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: 112
Joined: Mon Mar 23, 2009 10:29 pm
Contact:

How to change color palette?

Post by zorni » Thu Nov 16, 2017 11:28 am

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
Christian 2.0
Former Team Member
Posts: 4440
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: How to change color palette?

Post by Christian 2.0 » Thu Nov 16, 2017 3:50 pm

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.
🚀 Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, Gaming phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 667
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin » 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.

zorni
Registered User
Posts: 112
Joined: Mon Mar 23, 2009 10:29 pm
Contact:

Re: How to change color palette?

Post by zorni » Fri Nov 17, 2017 5:53 am

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
Christian 2.0
Former Team Member
Posts: 4440
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: How to change color palette?

Post by Christian 2.0 » Fri Nov 17, 2017 5:31 pm

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.
🚀 Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, Gaming phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 667
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin » Mon Nov 20, 2017 4:49 am

not really as you can manually enter a value

User avatar
Christian 2.0
Former Team Member
Posts: 4440
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: How to change color palette?

Post by Christian 2.0 » Tue Nov 21, 2017 1:04 am

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.
🚀 Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, Gaming phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

User avatar
3Di
Registered User
Posts: 12382
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: How to change color palette?

Post by 3Di » Tue Nov 21, 2017 3:20 am

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.
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades
My development's activity º PhpStorm's proud user

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 667
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin » Tue Nov 21, 2017 8:12 am

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 » Tue Mar 06, 2018 4:44 am

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
Infrastructure Team Member
Infrastructure Team Member
Posts: 667
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to change color palette?

Post by Hanakin » Wed Mar 07, 2018 1:45 am

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 » Thu Mar 08, 2018 6:11 am

Thanks!
I see( So I can only change the range of colors within the existing palette, right?

Post Reply

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

Who is online

Users browsing this forum: No registered users and 4 guests