[RC] Platinum for phpBB 3.3.13

[Tastenplayer]

@Seneekikaant
Hash changed in stylesheet.css for the custom css files (common.css)?
("common.css?v=1.1.9"); eg. ("common.css?v=1.1.10");

[Seneekikaant]

Assuming all the code is correct & added, sounds like a cache issue where old files are still being loaded..

Try flushing board & browser cache.

there were 2 other files that also needed editing. but you're right, after editing any html files I have to purge the cache, CSS is a bit more lenient, at least on my test server that isn't behind cloudflare. Thanks for the help

@Seneekikaant
Hash changed in stylesheet.css for the custom css files (common.css)?
("common.css?v=1.1.9"); eg. ("common.css?v=1.1.10");

I'm still using 1.1.9, I wasn't aware there was a 1.1.10

[dbrewood]

there were 2 other files that also needed editing. but you're right, after editing any html files I have to purge the cache, CSS is a bit more lenient, at least on my test server that isn't behind cloudflare. Thanks for the help

Can you please detail which files you had to change in the end? Possibly what the changes were?

Oh I can't see a 1.1.10 version either.....

[jrolson]

I would recommend using letters at the end of the numbers like so... 1.1.9b, 1.1.9c, ect. whenever you make changes to these files.
(You can change it to anything as long as it's something different.)

Another option is to use the date of file modification as the version number... example: (22.10.22) year/month/day

Using 1.1.10 might be a conflict if I ever put out a 1.1.10 update in the future.

[Seneekikaant]

Can you please detail which files you had to change in the end? Possibly what the changes were?

Sure, there were 6 places in total.

navbar_header.html I added these two lines

Code: Select all

<button class="colorbutton colororange" id="<!-- IF $P_DEFAULT_COLOR eq 'orange' --><!-- ELSE -->orange<!-- ENDIF -->" onClick="change_variant(this.id)"></button>
<button class="colorbutton colorgrey" id="<!-- IF $P_DEFAULT_COLOR eq 'grey' --><!-- ELSE -->grey<!-- ENDIF -->" onClick="change_variant(this.id)"></button>

overall_header.html I added these two lines

Code: Select all

<!-- IF $P_DEFAULT_COLOR eq 'orange' --><link href="{T_THEME_PATH}/custom/orange.css?v=1.1.9" rel="stylesheet"><!-- ENDIF -->
<!-- IF $P_DEFAULT_COLOR eq 'grey' --><link href="{T_THEME_PATH}/custom/grey.css?v=1.1.9" rel="stylesheet"><!-- ENDIF -->

simple_header.html

Code: Select all

<!-- IF $P_DEFAULT_COLOR eq 'orange' --><link href="{T_THEME_PATH}/custom/orange.css?v=1.1.9" rel="stylesheet"><!-- ENDIF -->
<!-- IF $P_DEFAULT_COLOR eq 'grey' --><link href="{T_THEME_PATH}/custom/grey.css?v=1.1.9" rel="stylesheet"><!-- ENDIF -->
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->

common.css - ctrl+f for colorbutton and add these underneath

Code: Select all

.colororange {background-color: #fc9f08; }
.colorgrey {background-color: grey; }

colours.css - go all the way to the bottom (your default will have an entry for red) and make a new entry below for your new colour

then when you're done head to theme/custom/ where you'll find 5 more css files. make a new one and name it the same as you did in the variables from the html files

[dbrewood]

Many thanks I'll give this a go tomorrow! I'll yell out if I get stuck

[dbrewood]

DELETED

[dbrewood]

Hey, hey I did it!

I now have a grey variant. Thanks for the assistance!

[dbrewood]

@Tastenplayer I'm not sure if you are interested, but I'm quite happy to share with you the files etc I've changed to create the 'grey' variant of the style?
I guess that @Seneekikaant would also possibly be happy to share (and might have done a better job than myself)?

One thought for the future, could it be possible that you could consider changing the 'blue base' colour that does not change when the colour changer is used (see arrows)? You can see my 'grey' variant attached along with the areas which it'd be cool if they matched if the main colour of the style....

It'd look much more harmonised (IMHO) if they changed to match the rest of changed style colour? Not sure if it'd be possible? Just an idea for your consideration

Screenshot 2022-10-23 at 12.14.26.jpeg

I've got to say I'm loving the style!

[Tastenplayer]

I'm still using 1.1.9, I wasn't aware there was a 1.1.10

You have to change the hascode every time you make a change in a css, otherwise Firefox in particular will not accept the change - it will not be visible to you. This has nothing to do with the style version.

I would recommend using letters at the end of the numbers like so... 1.1.9b, 1.1.9c, ect. whenever you make changes to these files.
(You can change it to anything as long as it's something different.)

Another option is to use the date of file modification as the version number... example: (22.10.22) year/month/day

Using 1.1.10 might be a conflict if I ever put out a 1.1.10 update in the future.

[Seneekikaant]

@Tastenplayer I'm not sure if you are interested, but I'm quite happy to share with you the files etc I've changed to create the 'grey' variant of the style?
I guess that @Seneekikaant would also possibly be happy to share (and might have done a better job than myself)? ......

Hi Dbrewood,

you could add this to your colours.css :

Code: Select all

.grey .navbar { background-color: grey }
.grey .row-item {
	background-color: silver;
	color:  black;
	border-color: dimgrey;
}
.grey .page-body { background-color: #cccccc; }
.grey .bodycontainer { background-color: #cccccc; }
.grey #recent-topics a.forum-link { color: slategrey; }
.grey li.row dl { border-color: dimgrey; }
.grey ul.topiclist dd { border-left-color: dimgrey; }
.grey li { border-color: dimgrey; }
.grey .forumbg .header a, .forabg .header a, th a {	color: #333; }
.grey li.header dt, li.header dd { color: #333; }
.grey .post.online, #viewprofile .online { background-color: silver; }
.grey ul.topiclist li.row dl { margin: 1px 1px }

and then take it on over to your grey.css, but without the .grey in it :

Code: Select all

.navbar { background-color: grey }
.row-item {
	background-color: silver;
	color:  black;
	border-color: dimgrey;
}
.page-body { background-color: #cccccc; }
.bodycontainer { background-color: #cccccc; }
#recent-topics a.forum-link { color: slategrey; }
li.row dl { border-color: dimgrey; }
ul.topiclist dd { border-left-color: dimgrey; }
li { border-color: dimgrey; }
.forumbg .header a, .forabg .header a, th a {	color: #333; }
li.header dt, li.header dd { color: #333; }
.post.online, #viewprofile .online { background-color: silver; }
ul.topiclist li.row dl { margin: 1px 1px }

change the colours to what you wish to use, but those are the elements that needed editing. I may have missed a few, but I didn't spend too long on it

[dbrewood]

So if I understand what you are saying these changes will change the 'blue' elements to grey colours?

For your reference here is the code I used to create my grey theme. I added into colours.css:

Code: Select all

/* Grey */
.grey .headerbar {
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #515051 0%, #2C2C2C 100%);
	background-image: linear-gradient(to bottom, #515051 0%,#2C2C2C 100%);
}

.grey .forabg, .grey .forumbg {
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #5E5E5E 0%, #2C2C2C 35px, #2C2C2C 100%);
	background-image: linear-gradient(to bottom, #5E5E5E 0%,#2C2C2C 35px,#2C2C2C 100%);
}

.grey .pollbar5 { background-color: #515051; }

.grey .action-bar .cologreybutton {
	border-color: #2C2C2C;
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #515051 0%, #2C2C2C 100%);
	background-image: linear-gradient(to bottom, #515051 0%,#2C2C2C 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515051', endColorstr='#2C2C2C',GradientType=0 );
}
.grey .action-bar .cologreybutton:hover {
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #2C2C2C 0%, #515051 100%);
	background-image: linear-gradient(to bottom, #2C2C2C 0%,#515051 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2C2C2C', endColorstr='#515051',GradientType=0 );
}

.grey .pagination li.active span {
	background: #515051;
	border-color: #515051;
}

.grey .pagination li a:hover {
	background: #515051;
	border-color: #515051;
}

and the grey.css in the /custom/ folder I used was:

Code: Select all

.headerbar {
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #515051 0%, #2C2C2C 100%);
	background-image: linear-gradient(to bottom, #515051 0%,#2C2C2C 100%);
}

.forabg, .forumbg {
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #5E5E5E 0%, #2C2C2C 35px, #2C2C2C 100%);
	background-image: linear-gradient(to bottom, #5E5E5E 0%,#2C2C2C 35px,#2C2C2C 100%);
}

.pollbar5 { background-color: #515051; }

.action-bar .cologreybutton {
	border-color: #2C2C2C;
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #515051 0%, #2C2C2C 100%);
	background-image: linear-gradient(to bottom, #515051 0%,#2C2C2C 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7E1F18', endColorstr='#2C2C2C',GradientType=0 );
}
.action-bar .cologreybutton:hover {
	background-color: #2C2C2C;
	background-image: -webkit-linear-gradient(top, #2C2C2C 0%, #515051 100%);
	background-image: linear-gradient(to bottom, #2C2C2C 0%,#515051 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2C2C2C', endColorstr='#515051',GradientType=0 );
}

.pagination li.active span {
	background: #515051;
	border-color: #515051;
}

.pagination li a:hover {
	background: #515051;
	border-color: #515051;
}

[dbrewood]

Okay...... I've added the code in, looks good apart from these areas shown:

Screenshot 2022-10-24 at 20.30.06.jpeg

Further checking shows the 'Post Reply' text has gone white and the alternate messages in a thread are still bluish instead of alternating grey tones....

Screenshot 2022-10-24 at 20.46.09.jpeg

Sorry....... I wish I knew enough to fix / change it myself....Any ideas?

[Seneekikaant]

Okay...... I've added the code in, looks good apart from these areas shown:

Screenshot 2022-10-24 at 20.30.06.jpeg

Further checking shows the 'Post Reply' text has gone white and the alternate messages in a thread are still bluish instead of alternating grey tones....

Screenshot 2022-10-24 at 20.46.09.jpeg

Sorry....... I wish I knew enough to fix / change it myself....Any ideas?

the first screenshot I found is the margin

Code: Select all

ul.topiclist li.row dl { margin: 1px 1px }

I haven't found the bit to edit the colour behind it yet, but removing the margin altogether will get rid of it.

Code: Select all

.post.online, #viewprofile .online { background-color: silver; } 

should take care of the bluish tinge, but could also be the gradient in this section

Code: Select all

.forabg, .forumbg {
	background-color: gainsboro;
	background-image: -webkit-linear-gradient(top, grey 0%, dimgrey 35px, black 100%);
	background-image: linear-gradient(to bottom, grey 0%, dimgrey 35px, black 100%);
}

I can't really see what's going on in the pictures, they're quite blurry when I try to load them but as I get more time and make a few more tweaks I'll post my findings in here

ETA: the code above goes in grey.css aand in colours.css, but when adding to the colours.css be sure to change everything to include the .grey element

ie.

Code: Select all

.post.online, #viewprofile .online { background-color: silver; } 

becomes

Code: Select all

.grey .post.online, #viewprofile .online { background-color: silver; }

[dbrewood]

Okay I've put the changes in grey.css and colours.css, to be honest I'm not seeing much of a change.....

Also I can't find the margin code:

Code: Select all

ul.topiclist li.row dl { margin: 1px 1px }

Can you please advise where it is found?

I thinking it might be easier for me to copy your colours and grey css files once you've completed fixing all the colour issues?

Any ideas as to how to fix the white 'Post Reply' text?