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

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
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:

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

Post by 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
    down-arrow.png (814 Bytes) Viewed 42670 times
    • Choose View Compiled CSS
      compile.png
      compile.png (4.79 KiB) Viewed 42670 times
  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
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: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by 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/
🆓 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: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by 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
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: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by 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. 8-)
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. ;)
🆓 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
GoesOn
Registered User
Posts: 413
Joined: Sun Mar 05, 2017 7:31 pm

Re: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by GoesOn »

.
Last edited by GoesOn on Sat May 13, 2017 8:10 pm, edited 1 time in total.
English is not my native language :!:
User avatar
Brf
Support Team Member
Support Team Member
Posts: 53379
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by Brf »

GoesOn wrote: Fri May 12, 2017 8:15 pm 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
Registered User
Posts: 413
Joined: Sun Mar 05, 2017 7:31 pm

Re: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by GoesOn »

.
Last edited by GoesOn on Sat May 13, 2017 8:11 pm, edited 1 time in total.
English is not my native language :!:
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: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by 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
Registered User
Posts: 413
Joined: Sun Mar 05, 2017 7:31 pm

Re: [GUIDE] Easily Re-Color ProSilver 3.2 (color.css Generator)

Post by GoesOn »

.
Last edited by GoesOn on Sat May 13, 2017 8:11 pm, edited 2 times in total.
English is not my native language :!:
User avatar
david63
Registered User
Posts: 20646
Joined: Thu Dec 19, 2002 8:08 am

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

Post by david63 »

GoesOn wrote: Sat May 13, 2017 2:00 am 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.
David
Remember: You only know what you know and - you don't know what you don't know!

I now no longer support any of my extensions but they will start to become available here
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: [GUIDE] Easily Re-Color ProSilver 3.2 (colour.css Generator)

Post by 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
Registered User
Posts: 413
Joined: Sun Mar 05, 2017 7:31 pm

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

Post by GoesOn »

.
Last edited by GoesOn on Sat May 13, 2017 8:12 pm, edited 1 time in total.
English is not my native language :!:
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: [GUIDE] Easily Re-Color ProSilver 3.2 (colour.css Generator)

Post by Hanakin »

Not at all just knowing HTML and CSS does not mean you have to figure out how we are using it alone 😉
GoesOn
Registered User
Posts: 413
Joined: Sun Mar 05, 2017 7:31 pm

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

Post by GoesOn »

Hanakin wrote: Sat May 13, 2017 8:04 pm 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 ;-)
English is not my native language :!:
User avatar
Armstrong
Registered User
Posts: 104
Joined: Sun Mar 25, 2007 2:26 am
Location: Oxford UK / Aix France.
Name: Neil Armstrong
Contact:

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

Post by 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.
Post Reply

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