[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
Steve
Registered User
Posts: 1480
Joined: Tue Apr 07, 2009 7:48 pm
Name: Steven Clark
Contact:

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

Post by Steve »

I'll give you a hint, the class bg1 bg2 class is found in colours.css and that contains the background colour. So just add a border and your done. ;)
@ The Chief Medical Officers guideline for men is that: You are safest not to drink regularly more than 14 units per week.
- I drank that today++ :lol: 🍺
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 »

but it is even easier load your forums in your browser and right click on the element you wish to change. Depending on your browser the next part may differ, in chome you click inspect in other browsers is developer something

this opens an in browser code inspector.

You can select the html code you want and it highlights on the page it also shows you the css for this element along with the file and line number associated with it.

as you can see in the screenshot
Screenshot 2017-06-03 20.11.09.png
the class that controls the background color is found in the colours.css file on line 131 .bg2

its actually two classes for the colors as they alternate both bg1 and bg2
User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 5850
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.
Contact:

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

Post by thecoalman »

Thanks for this, you have saved me a ridiculous amount of time. :D
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison
User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 5850
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.
Contact:

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

Post by thecoalman »

This is bug in the generator? I was getting repeated images in quotebox. , Line 441 and another instance just below it.

Code: Select all

  background-image: url("./images/quote.gif");
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison
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 »

It's a version compatibility issue the generator has not yet. been updated to 3.2.1
User avatar
Galixte de EzCom
Registered User
Posts: 1106
Joined: Mon Oct 04, 2004 11:14 pm
Location: France
Name: Raphaël M.
Contact:

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

Post by Galixte de EzCom »

Hi,
Hanakin wrote: Fri Aug 18, 2017 11:21 pm It's a version compatibility issue the generator has not yet. been updated to 3.2.1
could you update your tool to phpBB 3.2.1?
Communau EzCom
📖 « Traductions d’extensions & styles pour phpBB 3.2.x & 3.3.x ».
📋 Lists of all extensions identified for phpBB 3.1.x & 3.2.x.
📋 Lists of all styles identified for phpBB 3.1.x & 3.2.x.
Image Tu as un forum et tu veux aussi un site web ? Regarde par ici.
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 »

it should be uptodate
User avatar
Galixte de EzCom
Registered User
Posts: 1106
Joined: Mon Oct 04, 2004 11:14 pm
Location: France
Name: Raphaël M.
Contact:

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

Post by Galixte de EzCom »

Thanks, I didn’t think because it’s indicated on this page: https://codepen.io/hanakin/details/OpXaBx/: “Updated MARCH 22, 2017”. ;)
Communau EzCom
📖 « Traductions d’extensions & styles pour phpBB 3.2.x & 3.3.x ».
📋 Lists of all extensions identified for phpBB 3.1.x & 3.2.x.
📋 Lists of all styles identified for phpBB 3.1.x & 3.2.x.
Image Tu as un forum et tu veux aussi un site web ? Regarde par ici.
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 »

Hanakin wrote: 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";
    
I don't understand these instructions. How do you input the colors? Where do I put the HTML color codes, like this for instance: #336699

And which parts of the forum theme do those lines affect? This is very vague. Which ones correspond to the header, frame, background, list, etc? These instructions aren't user friendly at all.
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 »

It’s a quick tool it’s not meant as a precise tool. It’s very simply laid out for you choose a primary color and replace the text that says “your color here” with said color then repeat for the remaining three.

Those four colors affect every color for the entire theme! I believe you may want to look up the definition of color scheme...

hopefully that helps clear Things up
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 »

Hanakin wrote: Thu Nov 23, 2017 12:01 am It’s a quick tool it’s not meant as a precise tool. It’s very simply laid out for you choose a primary color and replace the text that says “your color here” with said color then repeat for the remaining three.

Those four colors affect every color for the entire theme! I believe you may want to look up the definition of color scheme...

hopefully that helps clear Things up
But how can I select colors when I don't even know what those lines reflect or connect to? I mean which parts of the forum is each line associated with? That's the "missing link" here in your equation. :P

How do you choose a color? Like this "red" or do you enter the HTML color code, which is a 6 digit number?

These are crucial things. Why are your instructions lacking them? Very strange.
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 »

It’s not missing anything you seem to just not understand the point of this! It’s not tool to edit colors it’s a tool to Re-Color everything based on a color scheme!

Every color in ProSilver is based on those 4 colors variables.

For ProSilver that equates to

Blue
Light blue
Red
Dark blue

So with that said you come up with any four colors which you should get from your inspiration source whatever that is either a preexsisting logo or website color scheme or find them on a color scheme generator site. Then enter them in any format you want (name, hex, Hsl, RGB)

It is what it is use it or don’t
User avatar
warmweer
Jr. Extension Validator
Posts: 11195
Joined: Fri Jul 04, 2003 6:34 am
Location: Van Allen Bel ... gium
Contact:

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

Post by warmweer »

WWu777 wrote: Thu Nov 23, 2017 12:53 am ...
But how can I select colors when I don't even know what those lines reflect or connect to? I mean which parts of the forum is each line associated with? That's the "missing link" here in your equation. :P

How do you choose a color? Like this "red" or do you enter the HTML color code, which is a 6 digit number?

These are crucial things. Why are your instructions lacking them? Very strange.
Apologies offered if I sound rude, but the necessary info is in this topic which should be read from the beginning.
Also (I mentioned it before), I think you should also read up on "localhost" so that you can try various things offline without risk to your live forum.
Hanakin's tool doesn't do anything to your forum by itself. It offers and easy way to get the necessary code to paste into specific files at a specific place, and then it's up to you to see what the combination look like on your (copy of the) forum.
Spelling is freeware, which means you can use it for free.
On the other hand, it is not open source, which means you cannot change it or publish it in a modified form.


Time flies like an arrow, but fruit flies like a banana.
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 »

Can't you just edit these lines in the colours.css file? I remember that's all I did in phpbb 3.0. But I can't remember exactly what I did. It was years ago.

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background-color: #4e65aa;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

.navbar {
	background-color: #ced0de;
}

.forabg {
	background-color: #31447c;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

.forumbg {
	background-color: #4e65aa;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 »

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";
Ok can you guys tell me which part of the forum (e.g. header, background, posts background, etc.) these variables correspond to?

primary
accent
secondary
ui

Thanks.
Post Reply

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