[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
Steve
Registered User
Posts: 992
Joined: Tue Apr 07, 2009 7:48 pm
Location: UK ,up north!!
Name: Steven Clark
Contact:

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

Post by Steve » Sat Jun 03, 2017 8:32 pm

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. ;)

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 720
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 » Sun Jun 04, 2017 12:14 am

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: 2797
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 » Fri Aug 18, 2017 2:18 pm

Thanks for this, you have saved me a ridiculous amount of time. :D

User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 2797
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 » Fri Aug 18, 2017 5:39 pm

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");

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 720
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 » Fri Aug 18, 2017 11:21 pm

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: 944
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 » Sun Oct 29, 2017 2:13 pm

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.1.x & 3.2.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
Infrastructure Team Member
Infrastructure Team Member
Posts: 720
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 » Sun Oct 29, 2017 6:12 pm

it should be uptodate

User avatar
Galixte de EzCom
Registered User
Posts: 944
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 » Sun Oct 29, 2017 6:59 pm

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.1.x & 3.2.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: 554
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 » Wed Nov 22, 2017 8:03 pm

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
Infrastructure Team Member
Infrastructure Team Member
Posts: 720
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 » 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

WWu777
Registered User
Posts: 554
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 » Thu Nov 23, 2017 12:53 am

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
Infrastructure Team Member
Infrastructure Team Member
Posts: 720
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 » Thu Nov 23, 2017 10:55 am

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
Registered User
Posts: 1034
Joined: Fri Jul 04, 2003 6:34 am
Location: Van Allen Belt ... well actually Belgium

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

Post by warmweer » Thu Nov 23, 2017 12:12 pm

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.
A bug is a feature that hasn't made it to the manual (yet)

WWu777
Registered User
Posts: 554
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 » Thu Nov 23, 2017 11:25 pm

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: 554
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

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

Post by WWu777 » Thu Nov 23, 2017 11:33 pm

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”

Who is online

Users browsing this forum: No registered users and 3 guests