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

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 549
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

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

Post by Hanakin » Sat Mar 11, 2017 9:13 pm

  1. Go here: http://codepen.io/hanakin/pen/OpXaBx?editors=0110
  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 2773 times
    • Choose View Compiled CSS
      compile.png
      compile.png (4.79 KiB) Viewed 2773 times
  4. Copy Lines 1 - 1399 from the CSS Editor at the top of that window (everything after line 1399 is not needed for prosilver)
  5. Paste it in your phpBB/styles/prosilver/theme/colours.css file
  6. Save the file
  7. Purge your cache from your admin panel
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.

User avatar
3Di
Registered User
Posts: 11812
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

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

Post by 3Di » Mon Mar 13, 2017 1:32 am

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/
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 549
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 » Mon Mar 13, 2017 4:48 am

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
Registered User
Posts: 11812
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

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

Post by 3Di » Mon Mar 13, 2017 5:22 am

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. ;)
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
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 » Fri May 12, 2017 8:15 pm

.
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: 50714
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 » Fri May 12, 2017 8:40 pm

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 » Fri May 12, 2017 8:43 pm

.
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
Infrastructure Team Member
Infrastructure Team Member
Posts: 549
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 » Sat May 13, 2017 12:58 am

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 » Sat May 13, 2017 2:00 am

.
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
Jr. Extension Validator
Posts: 12972
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

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

Post by david63 » Sat May 13, 2017 6:57 am

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!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email or as they will be ignored

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 549
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 » Sat May 13, 2017 10:17 am

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 » Sat May 13, 2017 7:42 pm

.
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
Infrastructure Team Member
Infrastructure Team Member
Posts: 549
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 » 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 😉

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 » Sat May 13, 2017 8:09 pm

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: 73
Joined: Sun Mar 25, 2007 2:26 am
Location: Oxford UK / Aix France.

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

Post by Armstrong » Sat Jun 03, 2017 8:01 pm

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”

Who is online

Users browsing this forum: No registered users and 2 guests