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

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

WWu777
Registered User
Posts: 514
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:58 pm

Ok I get it now. You select the primary color and then the rest will be automatically adjusted to it right? It seems that way. How do you lighten the background though? Which variable in the block do you change below?

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;
Also, the colours.css file only has 1100+ lines. So when you replace them, there will be more lines up to 1399 lines right? So the replacement will increase the lines that were there?

Update:

Ok I followed the instructions and applied them to my forum. It worked. However, there is an extra white border around my forum. Do you know why? How do I remove it? Here's what I mean, see here:

http://www.happierabroad.com/forum/index.php

As you can see, my forum has an extra white border around it. How do I get rid of it? Why is that there?

Also, the background within the posts and forum lists is too gray. I'd like to lighten it to dirty white or very light gray. How do I do that? Thanks.

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 569
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 Nov 24, 2017 12:06 am

yes everything is auto calculated from those 4 color values (That is the definition of a color scheme! again please just google it) in the entire theme for the 9th time... This is meant for 3.2.1 it generates a new colors.css file if you follow the instructions. It works just trust it! All the instructions are there if you can not figure it out from there then you probably should not be attempting any of this

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

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

Post by WWu777 » Fri Nov 24, 2017 12:51 am

Hanakin wrote:
Fri Nov 24, 2017 12:06 am
yes everything is auto calculated from those 4 color values (That is the definition of a color scheme! again please just google it) in the entire theme for the 9th time... This is meant for 3.2.1 it generates a new colors.css file if you follow the instructions. It works just trust it! All the instructions are there if you can not figure it out from there then you probably should not be attempting any of this
Ok thanks. But this thing created an extra border around my forum. How do I get rid of it?

Also, another bigger problem is that it caused all the quoted block of text in posts to fill up with tons of black quote signs, so that you can't even see the quoted text anymore. What happened? You can't even see the quoted text now. See attached screenshot. Wtf? How do you fix that?
Untitled.jpg
I believe it is connected with this block of code from colours.css below. How do I fix it? It appears that the quote.gif image is the one that repeats.

Code: Select all

/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
  background-color: #f4f1d7;
  background-image: url("./images/quote.gif");
  border-color: #f1efda;
}

.rtl blockquote {
  background-image: url("./images/quote_rtl.gif");
}

blockquote blockquote {
  /* nested quotes */
  background-color: #f7f4d4;
}

blockquote blockquote blockquote {
  /* nested quotes */
  background-color: #f4f1d7;
}

/* code block */
.codebox {
  background-color: #ffffff;
  border-color: #cbcbcb;
}

.codebox p {
  border-bottom-color: #dedede;
}

.codebox code {
  color: #4db355;
}

/* #DEPRECATED
.syntaxbg		{ color: #ffffff; }
.syntaxcomment	{ color: #FF8000; }
.syntaxdefault	{ color: #0000BB; }
.syntaxhtml		{ color: #000000; }
.syntaxkeyword	{ color: #007700; }
.syntaxstring	{ color: #DD0000; }
*/

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 569
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 Nov 24, 2017 6:06 am

it appears the link on the first page was for the wrong version try it again

User avatar
david63
Jr. Extension Validator
Posts: 13122
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 » Fri Nov 24, 2017 6:42 am

WWu777 wrote:
Fri Nov 24, 2017 12:51 am
Also, another bigger problem is that it caused all the quoted block of text in posts to fill up with tons of black quote signs, so that you can't even see the quoted text anymore. What happened? You can't even see the quoted text now. See attached screenshot. Wtf? How do you fix that?
Hard refresh your browser.

There are dozens of posts about this problem and how to solve it if you had taken the trouble to search for the problem.
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 as they will be ignored

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

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

Post by WWu777 » Fri Nov 24, 2017 12:06 pm

david63 wrote:
Fri Nov 24, 2017 6:42 am
WWu777 wrote:
Fri Nov 24, 2017 12:51 am
Also, another bigger problem is that it caused all the quoted block of text in posts to fill up with tons of black quote signs, so that you can't even see the quoted text anymore. What happened? You can't even see the quoted text now. See attached screenshot. Wtf? How do you fix that?
Hard refresh your browser.

There are dozens of posts about this problem and how to solve it if you had taken the trouble to search for the problem.
Where? I already tried. I searched "quotation marks repeating" but nothing came up. How do i even describe this problem? Its hard to explain. Where are there dozens of posts on this problem?

Of course i hard refreshed my browser. It goes without saying. Other forum members noticed it too.
Hanakin wrote:
Fri Nov 24, 2017 6:06 am
it appears the link on the first page was for the wrong version try it again
You mean if i redo it the problem of repeating quotation marks will be no more?

If it was the wrong version then how come others didnt report the same problem with the repeating quotation marks? I feel like I'm in the twilight zone again.

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

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

Post by WWu777 » Fri Nov 24, 2017 5:55 pm

Hanakin wrote:
Sat Mar 11, 2017 9:13 pm
Copy Lines 1 - 1399 from the CSS Editor at the top of that window (everything after line 1399 is not needed for prosilver)
Dear developer, thanks for updating the link with the correct one. However, do you still copy line 1 to 1399 from the css output code? Because line 1399 is in the middle of a code and would make it incomplete. Or do you copy the code up until the badge block again? If so, then the last line is 1017. So do we copy line 1 to 1017? If so, then you should edit the instructions right?

Should the badge code be at the end? I mean this one:

Code: Select all

.badge {
  background-color: #862d34;
  color: #ffffff;
}

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 569
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 Nov 24, 2017 9:40 pm

copy everything up to where it says

Code: Select all

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

the quote problem is a caching issue from 3.2.0 to 3.2.1 as mentioned above. The other issues were related to the wrong link. They are small issues and probably went unnoticed.

User avatar
thecoalman
Former Team Member
Posts: 2328
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.

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

Post by thecoalman » Mon Nov 27, 2017 12:06 pm

WWu777 wrote:
Fri Nov 24, 2017 12:51 am

Ok thanks. But this thing created an extra border around my forum. How do I get rid of it?
Dedending on the browser you are using directions may vary but you can use the developer tools to find what rules are used for the CSS. In Firefox you simply right click what you want to view and select "inspect element". Om the right hand side it will list the CSS rules for that element, it will even tell you what file and what line.

Post Reply

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

Who is online

Users browsing this forum: No registered users and 4 guests