[GUIDE] Easily Re-Color ProSilver 3.2 v1.5 (colour.css Generator)

[Hanakin]

Version 1.5 There is a newer version of this guide which can be found here: viewtopic.php?f=591&t=2500736

1. Go here: https://codepen.io/hanakin/pen/OpXaBx
2. Edit the following values at the top of that window (You can use any color type won't matter hex, rgb, hsl, hsb)
   

   Code: Select all

   // ProSilver 3.2 colour.css Generator
   
   // EDIT THESE COLORS (Main Color Scheme) 
   $color-primary: "your color here";
   $color-accent: "your color here";
   $color-secondary: "your color here";
   $color-ui: "your color here";
   

3. Click the Down arrow icon
   down-arrow.png
   • Choose View Compiled CSS
     compile.png
4. Copy everything from the CSS Editor at the top of that window until the following
   

   Code: Select all

   /************************************************************************\
   /* DELETE EVERYTHING PAST HERE
   /************************************************************************/
   

   (everything after is not needed for prosilver)
5. Replace your phpBB/styles/prosilver/theme/colours.css file contents with it.
6. Save the file
7. Purge your cache from your admin panel and your browser

Enjoy

The page will update with the color changes you make after a few seconds to visualize your colors.

P.S. There are many more specific SCSS variables for all the colors on this pen if you are so inclined you can edit more specifically. Hover they all are modifications of the main color scheme variables.

Check out the 2.0 Beta version here: viewtopic.php?p=15188706#p15188706

[3Di]

Thanks for sharing, may I ask some info about those vars?
Wich parts of the style do they affect, one by one? Visive examples will surely do.

Code: Select all

// ProSilver 3.2 color.css Generator

// EDIT THESE COLORS (Main Color Scheme) 
$color-primary: "your color here";
$color-accent: "your color here";
$color-secondary: "your color here";
$color-ui: "your color here";

Edit: nvm, I figured it out. I guess.

Code: Select all

// EDIT THESE COLORS (Main Color Scheme) 
$color-primary: hsl(200, 85%, 50%) !default;
$color-accent: adjust-hue($color-primary, 145%) !default;
$color-secondary: adjust-hue($color-primary, 10%) !default;
$color-ui: desaturate(adjust-hue($color-primary, 20%), 65%) !default;

An usefull FF add-on: ColorZilla color picker
https://addons.mozilla.org/en/firefox/addon/colorzilla/

[Hanakin]

everything? It not easy to explain but from a design color theory perspective you start any design with a set of colors 3-6 colors. All colors in a design should be based of these.

I took this and reversed it to backwards engineer a base color scheme and found the closest to each of these for every color in colours.css then used sass color functions to dynamically build approximate equivalents to everything from these four colors.

So if you come up with a color scheme from any of the many color scheme generator sites

https://coolors.co/262322-63372c-c97d60-ffbcb5-f2e5d7
https://color.adobe.com/create/color-wheel/

and plug in the values you can completely re-color the entire theme.

To make it work I also had to make several other variables for the individual components so you can edit these as well too.

Eventually when i get enough time, I may wrap it in an app which will let you color and visualize each of the components. Until then this is still pretty useful as is

[3Di]

I see, interesting. And yes, perhaps a sort of tool (app) like Colorize-it! will give you a winner, but in the meantime, what I am trying (I am a neophite here) to accomplish (my goal) is to emulate the color scheme of GitHub (32 css colors) to finally colorize my prosilver, for the sake of my own eyes.
Getting older my long sessions against the monitor are creating probs, I use f.lux, in fact.

I will try and do my best in my spare time in order to reach my goal, if you - by any chance - already got an advice, hint or tip, well.. I will appreciate.

Thanks again for the hard work, here and there.

[GoesOn]

.

[Brf]

what am I doing wrong?

What are you trying to do? Here is what I am seeing in your colors.css:

Code: Select all

html, body {
	color: #536482;#FF101F
	background-color: ;
}

There is a misplaced color-code there.

[GoesOn]

.

[Hanakin]

Are you familiar with CSS? The generator is just that is takes the color values you enter In the variables at the top and populates all the CSS using these variables.

You have to delete/replace everything after the : with the color you want. Not just add it to the end of the line.

As for any references to color that has nothing to do with the name of the file colours.css it will still work.

[GoesOn]

.

[david63]

No I am not!

Perhaps I could suggest that before you start changing things left, right and centre that you at least read a few basic tutorials on css - there are many available on the Internet - Mr Google will be your friend.

[Hanakin]

I still have no clue what you want so I can not help you other than to point out that

This is wrong

Code: Select all

--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;#FF101F
	background-color: ;

It should be

Code: Select all

--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #ff101f;

But as David said please read up on CSS and HTML it's extremely simple to grasp, very straightforward and sort a nessecity for everyone these days anyway.

Also it appears that you are manually editing your colours.css file rather than using the tool in this thread. As this topic is meant for support for the tool. You should be using the tool. If you are unclear as to the steps payed out in the first post for how to use this tool ask for clarification about whatever is unclear. Again it's very straightforward with the understanding that this tool is only meant to set a basic color scheme and generate a new colours.css file based on that color scheme.

I.e. If you want to change all the blues to green, mind everything is a shade of blue in the default theme. Then you need to set you secondary color to the green you want. Primary is for your light colors, ui is for your darker colors, and accent is for your complementary color to your primary color. Those four colors need set.

[GoesOn]

.

[Hanakin]

Not at all just knowing HTML and CSS does not mean you have to figure out how we are using it alone

[GoesOn]

Not at all just knowing HTML and CSS does not mean you have to figure out how we are using it alone

I am fascinated by how much you are helpful should you know. All praise to you!Do not feel compelled to answer

[Armstrong]

This is, indeed, a most fascinating thread.

However... I look for a way to make the background of posts white.
Any clues anyone. I am sure this an old and ancient question.

Actually pushing this further, I would like to see a dark outline to the borders of the post. Its a shame that php and css isn't as straight forwards as basic HTML. I loved the way html spoke to you.