phpBB • Free and Open Source Forum Software

bennybernaer · by **bennybernaer** » Mon Aug 24, 2020 8:34 pm

I'm going to post my question here too. To formulate it again clearly.
And it is actually a personal question for the maker

Could it possibly not be an add-on based on cookies that users can set the color scheme themselves.
I would like to post this in navbar using drop menu.

: Naamloos.png (6.74 KiB) Viewed 327 times

PlanetStyles.net · by **PlanetStyles.net** » Mon Aug 24, 2020 9:06 pm

I would say that's unlikely.

This is intended to be a simple re-colour of prosilver with no additional options or features

Gumboots · by **Gumboots** » Sat Oct 31, 2020 11:45 pm

Funny you should mention that.

I've been messing around again.

I did have this style set up with a custom colour changer in the footer, but the javascript I was using was a tad slow and clunky. Decided something should be done about that, so had another crack at it. The result may be useful for anyone who wants to have user-selectable variants on this style, or on another style. The javascript is very simple, and as far as I can tell it's fast enough to keep pace with the rendering of the markup. FOUC is infrequent and minimal. All styling stays in the CSS where it belongs. If javascript is borked or disabled, it just falls back to whichever colour you have set as default in the template.

Edit: Removed previous code (there is already more than enough sub-optimal code on the internet).
A better implementation is shown in the following post.

Gumboots · by **Gumboots** » Tue Nov 10, 2020 7:53 am

Come to think of it, I'm going to revamp this further. The /colours CSS files for this style are tiny: only around 500 bytes each. This is getting to be not worth extra pings to the server. So, change the js to switch id on the root HTML tag. Basically:

Code: Select all

document.head.parentNode.id="html_"+a+"";

...which according to the js boffins is the fastest way of nailing the html tag. Then prefix the declarations for the variants with #html_****, so the whole lot can be tacked on the end of dark.css (it will come in around 15kb with variants included). All the extra hidden stylesheets in the footer can then be ditched, and performance should be excellent. I'll sort a demo sometime this week.
------------------------------------------------------------------

Got it sorted. Do note that this is a test site, and I like playing with design and layout, so some aspects of markup and CSS (particularly responsive and RTL) are not finalised. However, the colour changer seems to be bulletproof. I can't pick any FOUC at all, even with the earlier safeguard code being commented out. If you're curious:

Code: Select all

http://testing.hawkdawg.com/index.php

The colour change buttons are at the bottom of the footer, but obviously they could be placed inside a standard .rightside .dropdown from the navbar too.

bennybernaer · by **bennybernaer** » Tue Dec 28, 2021 7:55 pm

I've looked on your test forum but unfortunately it doesn't work for me.

in dark.css

Code: Select all

/* Colour change buttons. */
#variant_switch {
	text-align: center;
	padding: 0 1em 1em;
}
#variant_switch button {
	display: inline-block;
	width: 48px;
	height: 12px;
	margin-top: 1em;
	border: 0;
	border-radius: 1px;
	opacity: .3;
}
#variant_switch button:hover, #variant_switch button:focus {
	opacity: 1;
}
#html_red {
	background: #ff5555;
	/* Hue 0 */
}
#html_orange {
	background: #fd7624;
	/* Hue 16 */
}
#html_yellow {
	background: #bb9a00;
	/* Hue 35 */
}
#html_lime {
	background: #65b911;
	/* Hue 64 */
}
#html_green {
	background: #02b53d;
	/* Hue 99 */
}
#html_turquoise {
	background: #00b7a9;
	/* Hue 124 */
}
#html_blue {
	background: #639fdc;
	/* Hue 149 */
}
#html_purple {
	background: #ac8cff;
	/* Hue 182 */
}
#html_pink {
	background: #ff62bc;
	/* Hue 231 */
}
#html_grey {
	background: #9d9d9d;
	/* Hue 0 */
}
/* --------------------------------------------- */
.topiclist dl[class*="_unread"]::before, .subforum.unread .fa-file::before {
	/* Unread icons animations. */
	animation: UnreadPulse 3s infinite;
	/* Board icons center color. */
	color: #fff;
}
/* Proactive walloping - head 'em off at the pass. */
.dropdown li:first-child, .row:last-child, .stat-block:last-child, .poll_vote {
	border: 0 !important;
	box-shadow: none !important;
}
.inner .panel {
	box-shadow: none !important;
}
.activetab > a, .pagination .active span {
	font-weight: 700; /* @WIP: Move to base.css later. */
}
.row .pagination .button {
	border-radius: 1px !important;
}
#pmheader-postingbox, .cp-main #postingbox {
	margin: 0;
	padding: 0 15px;
}
.cp-main #options-panel {
	margin: 0;
}
.cp-main #attach-panel {
	padding: 0 15px;
}
.topicreview {
	border-color: #2d323e;
}
#message:first-child {
	margin-top: 1em;
}
/* --------------------------------------------- */
/* -- Hue 0: cookie content "html_red" -- */
.html_red a:link, .html_red a:active, .html_red a:visited, .html_red .icon.icon-blue, .html_red .subforum.unread .fa-file::before {
	color: #ff5555;
}
.html_red a:hover, .html_red a:hover .icon.icon-blue, .html_red .arrow-left:hover, .html_red .arrow-right:hover {
	color: #ff8080;
}
.html_red .badge, .html_red .pagination .active span, .html_red .pagination a:hover, .html_red .resultbar>div, .html_red .topiclist dl[class*="_unread"]::before {
	background: #ff5555;
}
/* --------------------------------------------- */
/* -- Hue 16: cookie content "html_orange" -- */
.html_orange a:link, .html_orange a:active, .html_orange a:visited, .html_orange .icon.icon-blue, .html_orange .subforum.unread .fa-file::before {
	color: #fd7624;
}
.html_orange a:hover, .html_orange a:hover .icon.icon-blue, .html_orange .arrow-left:hover, .html_orange .arrow-right:hover {
	color: #fd914f;
}
.html_orange .badge, .html_orange .pagination .active span, .html_orange .pagination a:hover, .html_orange .resultbar>div, .html_orange .topiclist dl[class*="_unread"]::before {
	background: #fd7624;
}
/* --------------------------------------------- */
/* -- Hue 35: cookie content "html_yellow" -- */
.html_yellow a:link, .html_yellow a:active, .html_yellow a:visited, .html_yellow .icon.icon-blue, .html_yellow .subforum.unread .fa-file::before {
	color: #bb9a00;
}
.html_yellow a:hover, .html_yellow a:hover .icon.icon-blue, .html_yellow .arrow-left:hover, .html_yellow .arrow-right:hover {
	color: #d2ad00;
}
.html_yellow .badge, .html_yellow .pagination .active span, .html_yellow .pagination a:hover, .html_yellow .resultbar>div, .html_yellow .topiclist dl[class*="_unread"]::before {
	background: #bb9a00;
}
/* --------------------------------------------- */
/* -- Hue 64: cookie content "html_lime" -- */
.html_lime a:link, .html_lime a:active, .html_lime a:visited, .html_lime .icon.icon-blue, .html_lime .subforum.unread .fa-file::before {
	color: #65b911;
}
.html_lime a:hover, .html_lime a:hover .icon.icon-blue, .html_lime .arrow-left:hover,# html_lime .arrow-right:hover {
	color: #6bc412;
}
.html_lime .badge, .html_lime .pagination .active span, .html_lime .pagination a:hover, .html_lime .resultbar>div, .html_lime .topiclist dl[class*="_unread"]::before {
	background: #65b911;
}
/* --------------------------------------------- */
/* -- Hue 99: cookie content "html_green" -- */
.html_green a:link, .html_green a:active, .html_green a:visited, .html_green .icon.icon-blue, .html_green .subforum.unread .fa-file::before {
	color: #02b53d;
}
.html_green a:hover, .html_green a:hover .icon.icon-blue, .html_green .arrow-left:hover, .html_green .arrow-right:hover {
	color: #02ca43;
}
.html_green .badge, .html_green .pagination .active span, .html_green .pagination a:hover, .html_green .resultbar>div, .html_green .topiclist dl[class*="_unread"]::before {
	background: #02b53d;
}
/* --------------------------------------------- */
/* -- Hue 124: cookie content "html_turquoise" -- */
.html_turquoise a:link, .html_turquoise a:active, .html_turquoise a:visited, .html_turquoise .icon.icon-blue, .html_turquoise .subforum.unread .fa-file::before {
	color: #00b7a9;
}
.html_turquoise a:hover, .html_turquoise a:hover .icon.icon-blue, .html_turquoise .arrow-left:hover, .html_turquoise .arrow-right:hover {
	color: #00c4b2;
}
.html_turquoise .badge, .html_turquoise .pagination .active span, .html_turquoise .pagination a:hover, .html_turquoise .resultbar>div, .html_turquoise .topiclist dl[class*="_unread"]::before {
	background: #00b7a9;
}
/* --------------------------------------------- */
/* -- Hue 149: cookie content "html_blue" -- */
.html_blue a:link, .html_blue a:active, .html_blue a:visited, .html_blue .icon.icon-blue, .html_blue .subforum.unread .fa-file::before {
	color: #639fdc;
}
.html_blue a:hover, .html_blue a:hover .icon.icon-blue, .html_blue .arrow-left:hover, .html_blue .arrow-right:hover {
	color: #86b5e3;
}
.html_blue .badge, .html_blue .pagination .active span, .html_blue .pagination a:hover, .html_blue .resultbar>div, .html_blue .topiclist dl[class*="_unread"]::before {
	background: #639fdc;
}
/* --------------------------------------------- */
/* -- Hue 182: cookie content "html_purple" -- */
.html_purple a:link, .html_purple a:active, .html_purple a:visited, .html_purple .icon.icon-blue, .html_purple .subforum.unread .fa-file::before {
	color: #ac8cff;
}
.html_purple a:hover, .html_purple a:hover .icon.icon-blue, .html_purple .arrow-left:hover, .html_purple .arrow-right:hover {
	color: #bba2ff;
}
.html_purple .badge, .html_purple .pagination .active span, .html_purple .pagination a:hover, .html_purple .resultbar>div, .html_purple .topiclist dl[class*="_unread"]::before {
	background: #ac8cff;
}
/* --------------------------------------------- */
/* -- Hue 231: cookie content "html_pink" -- */
.html_pink a:link, .html_pink a:active, .html_pink a:visited, .html_pink .icon.icon-blue, .html_pink .subforum.unread .fa-file::before {
	color: #ff62bc;
}
.html_pink a:hover, .html_pink a:hover .icon.icon-blue, .html_pink .arrow-left:hover, .html_pink .arrow-right:hover {
	color: #ff86cc;
}
.html_pink .badge, .html_pink .pagination .active span, .html_pink .pagination a:hover, .html_pink .resultbar>div, .html_pink .topiclist dl[class*="_unread"]::before {
	background: #ff62bc;
}
/* --------------------------------------------- */
/* -- Hue 0: cookie content "html_grey" -- */
.html_grey a:link, .html_grey a:active, .html_grey a:visited, .html_grey .icon.icon-blue, .html_grey .subforum.unread .fa-file::before {
	color: #9d9d9d;
}
.html_grey a:hover, .html_grey a:hover .icon.icon-blue, .html_grey .arrow-left:hover, .html_grey .arrow-right:hover {
	color: #bababa;
}
.html_grey .badge, .html_grey .pagination .active span, .html_grey .pagination a:hover, .html_grey .resultbar>div, .html_grey .topiclist dl[class*="_unread"]::before {
	background: #9d9d9d;
}
/* Note: Grey also gets a subtle underline on links inside post content. */
.html_grey a.postlink {
	text-decoration: underline #9d9d9d77;
}
.html_grey a.postlink:hover, .html_grey a.postlink:focus {
	text-decoration-color: #bababa;
}

in navbar_footer_bottem.html

Code: Select all

	<div id="variant_switch" class="navbar_footer_bottem" role="contentinfo">
		<button id="html_red"		onClick="change_variant(this.id)"></button>
		<button id="html_orange"	onClick="change_variant(this.id)"></button>
		<button id="html_yellow"	onClick="change_variant(this.id)"></button>
		<button id="html_lime"		onClick="change_variant(this.id)"></button>
		<button id="html_green"		onClick="change_variant(this.id)"></button>
		<button id="html_turquoise"	onClick="change_variant(this.id)"></button>
		<button id="html_blue"		onClick="change_variant(this.id)"></button>
		<button id="html_purple"	onClick="change_variant(this.id)"></button>
		<button id="html_pink"		onClick="change_variant(this.id)"></button>
		<button id="html_grey"		onClick="change_variant(this.id)"></button>
    </div>

And if I'm correct the code below in overall_header.html ?

Code: Select all

<script>
	if (localStorage.getItem('prodark_variant')){document.head.parentNode.className=""+localStorage.getItem('prodark_variant')+"";}
</script

The color switches are there, but nothing happens when you click on them. No change of color

bennybernaer · by **bennybernaer** » Wed Dec 29, 2021 8:37 am

Adding the code below in overall_footer

Code: Select all

<script>
	function change_variant(a){document.head.parentNode.className=""+a+"";localStorage.setItem("prodark_variant", ""+a+"");}
</script>

makes the color changer work, but it doesn't remember it. So I want a cookie missing ? But which one? I can't find this one.

Gumboots · by **Gumboots** » Sun Feb 20, 2022 1:38 am

Just saw this (I don't drop in here very often).

It's not using cookies at all. It's using browser local storage now.
It will remember the user's choice between visits, providing that:
1/ the browser in use supports local storage (any viable browser these days)
2/ the browser's local storage is not full before making a selection (should not be an issue)
3/ the browser's local storage has not been cleared since making a selection (if you do that, that's on you).

The code I am now running looks like this:

overall_header.html

Code: Select all

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" class="html_blue">

Code: Select all

<script>
	if (localStorage.getItem('prodark_variant')){document.head.parentNode.className=""+localStorage.getItem('prodark_variant')+"";}
</script>

<!-- IF S_ALLOW_CDN -->

overall_footer.html

Code: Select all

<div id="variant_switch" class="page-footer" role="contentinfo">
	<div class="wrap">
		<button id="html_red"		onClick="change_variant(this.id)"></button>
		<button id="html_orange"	onClick="change_variant(this.id)"></button>
		<button id="html_yellow"	onClick="change_variant(this.id)"></button>
		<button id="html_lime"		onClick="change_variant(this.id)"></button>
		<button id="html_green"		onClick="change_variant(this.id)"></button>
		<button id="html_turquoise"	onClick="change_variant(this.id)"></button>
		<button id="html_blue"		onClick="change_variant(this.id)"></button>
		<button id="html_purple"	onClick="change_variant(this.id)"></button>
		<button id="html_pink"		onClick="change_variant(this.id)"></button>
		<button id="html_grey"		onClick="change_variant(this.id)"></button>

		<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
			<div id="darken" class="darken">&nbsp;</div>
		</div>
		<div>
			<a id="bottom" class="anchor" accesskey="z"></a>
			<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
		</div>
	</div>
</div>

Code: Select all

<script>
	function change_variant(a){document.head.parentNode.className=""+a+"";localStorage.setItem("prodark_variant", ""+a+"");}
</script>

<!-- IF S_ALLOW_CDN -->

dark.css

Code: Select all

/* --------------------------- */
/* Standard text colour everywhere - contrast 6.02 on #242a36. */
body {
	color: #a2a8b3;
}
/* Lower contrast text colour - contrast 4.58 on #242a36. */
.forabg, .forumbg, .notice {
	color: #8a929f;
}
/* @WIP - Special grey anchors, etc. Requires !important. */
.forabg .header a:link, .forabg .header a:visited {
	color: #9d9d9d !important;
	font-weight: 400;
}
/* Light bg colours */
html, .forabg, .forumbg, .panel, .post, blockquote blockquote, blockquote .codebox, .attachbox > dd,
.dropdown .dropdown-contents, .jumpbox-cat-link, .jumpbox-sub-link, .jumpbox-forum-link, .activetab > a {
	background: #242a36;
}
/* Dark bg colours - some funny business in here. :P */
body, .navigation a:hover, .cp-mini, .attachbox, .phpbb_alert {
	background-color: #171b24;
}
/* Not quite as dark bg colours. */
.panel-container .panel, .pm.post, blockquote, .codebox, blockquote blockquote .codebox, .navigation .active-subsection a {
	background: #1c212c;
}
/* Middle grey (dark bg) */
.tab > a {
	background: rgba(255,255,255,.04);
	border-color: #2d323e !important;
}
/* Middle grey (light bg) */
.navigation a, .minitabs .tab > a {
	background: rgba(0,0,0,.15);
}
/* Dampen down them wotsits. */
input[type="checkbox"], input[type="radio"] {
	opacity: .7;
}
/* Brighten up these wotsits. */
input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
	opacity: .9;
}
.jumpbox-cat-link {
	background-color: #1c212c;
}
.jumpbox a:hover {
	background-color: #171b24;
}
.arrow-left:hover, .arrow-right:hover {
	filter: brightness(1.1);
}
/* Really light elements (buttons / forms etc) */
.inputbox, .button, .button1, .button2, .button3, .pagination a, .tab > a:hover, .tab > a:focus {
	background-color: rgba(255,255,255,.1);
}
select, .format-buttons select, .format-buttons .button, .smiley-box-links, .post-buttons .button {
	background-color: rgba(255,255,255,.1);
	border-color: #fff1;
}
.inputbox, .button, .button1, .button2, .button3, .action-bar .button, .action-bar .inputbox.search {
	border-color: #fff1;
}
.inputbox:hover, .inputbox:focus {
	background-color: rgba(255,255,255,.05);
	border-color: #404758;
}
textarea.inputbox {
	background-color: #171b24;
	border-color: #2d323e;
}
textarea.inputbox:hover, textarea.inputbox:focus {
	background-color: #171b24;
	border-color: #404758;
}
/* Button hover */
.button:hover, .button1:hover, .button2:hover, .button3:hover,
select:hover, .format-buttons select:hover, select:focus, .format-buttons select:focus,
.search-results li:hover, .search-results .active {
	background-color: rgba(255,255,255,.18);
	color: #dde0e3;
}
/* Special cases. */
#page-body .pagination a:hover {
	color: #fff !important;
}
.smiley-box-links {
	color: #a2a8b3 !important;
}
.smiley-box-links:hover, .smiley-box-links:focus {
	background-color: rgba(255,255,255,.18);
	color: #dde0e3 !important;
	text-decoration: none;
}
.activetab > a {
	background: #242a36;
	box-shadow: 0 1px 0 #242a36;
	pointer-events: none;
}
/* Super subtle borders */
#page-header, .forumbg, .forabg, .panel, .post {
	border: 1px solid #2d323e;
}
/* Try out some box-shadows around major elements... */
#page-header, .forumbg, .forabg, #page-body>.panel, .post {
	box-shadow: 0 1px 2px 1px #0007;
}
.pm.post {
	border-radius: 0;
	box-shadow: none;
}
.panel h2, .content h2, li.row, .linklist li, .linklist, .topiclist dd, h3, .postbody h3, .pm_heading, .panel-container h3, .topiclist.cplist,
.polls dl, blockquote, blockquote cite, .codebox, .codebox p, .attach-image img, .attachbox, .attachbox>dd, .signature,
.table1 tbody tr, .table1 tbody td, .phpbb_alert, .caret, .notice,
.dropdown li, .dropdown-extended .header, .dropdown-extended .footer {
/*Shouldn't need this - .dropdown li.separator, .dropdown li li, .jumpbox .dropdown li */
	border-color: #2d323e;
}
/*A less subtle border for overlapping elements (dropdowns) */
.dropdown .dropdown-contents, .contact-icons a {
	border-color: rgba(255,255,255,.15);
}
/* @WIP - Super subtle hover effects */
.dropdown-extended li:hover, .table1 tbody tr:hover, .table1 tbody tr.hover {
	background: rgba(0,0,0,.05) !important;
}
/* @WIP - Hacky overrides here, because..reasons */
.row.reported, .post-notice {
	background-color: rgba(211,17,65,.2) !important;
	color: #bc2a4d;
}
/* @WIP - Various dropdown bits. */
/*NB: Check these. */
.dropdown .pointer {
	border-color: #b9b9b9 transparent;
}
.dropdown .pointer-inner {
	border-color: #242a36 transparent;
}
.dropdown-extended .pointer-inner {}
.dropdown-contents {
	box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}
/* @WIP - Move to base.css, eventually. */
.post.online::before, #viewprofile>.panel:first-child::before {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	content:'';
	background-image: url(./en/online_alt.png);
	background-size: cover;
	pointer-events: none;
}
/* Forum & Topic Icons (Pulsing) */
.forums .row-item:before, .topics .row-item:before, .pmlist .row-item:before, .cplist .row-item:before {
	position: absolute;
	display: block;
	top: 8px;
	left: 0;
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,.1);
	font-family: FontAwesome;
	font-size: 14px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
}
@keyframes UnreadPulse{0%{opacity:.75} 60%{opacity:.75} 80%{opacity:1} 100%{opacity:.75}}
/* Set the icons */
.global_read:before,.global_read_mine:before,.global_read_locked:before,.global_read_locked_mine:before,
.global_unread:before,.global_unread_mine:before,.global_unread_locked:before,.global_unread_locked_mine:before,
.announce_read:before,.announce_read_mine:before,.announce_read_locked:before,.announce_read_locked_mine:before,
.announce_unread:before,.announce_unread_mine:before,.announce_unread_locked:before,.announce_unread_locked_mine:before {
	/* Megaphone */
	content: "\f0a1";
}
/* @WIP - Aha! Main icon for redirect boards. */
/* Better with a small adjustment to height. */
.row-item.forum_link:before {
	line-height: 35px;
	/* External link */
	content: "\f08e";
}
.forum_read:before,.forum_read_subforum:before,.forum_unread:before,.forum_unread_subforum:before {
	/* Speech Bubble */
	content: "\f03a";
}
.sticky_read:before,.sticky_read_mine:before,.sticky_read_locked:before,.sticky_read_locked_mine:before,
.sticky_unread:before,.sticky_unread_mine:before,.sticky_unread_locked:before,.sticky_unread_locked_mine:before {
	/* Pin */
	content: "\f08d";
}
.topic_moved:before {
	/* Right arrow */
	content: "\f061";
}
.pm_read:before,.pm_unread:before {
	/* Envelope */
	content: "\f0e0";
}
/* Adjustment for weirdly-sized icon. */
.topic_read:before,.topic_read_mine:before,.topic_read_hot:before,.topic_read_hot_mine:before,
.topic_unread:before,.topic_unread_mine:before,.topic_unread_hot:before,.topic_unread_hot_mine:before {
	/* Nudge the icon up a bit. */
	line-height: 30px !important;
	/* Speech Bubble */
	content: "\f075";
}
.forum_read_locked:before,.forum_unread_locked:before,
.topic_read_locked:before,.topic_unread_locked:before,
.topic_read_locked_mine:before,.topic_unread_locked_mine:before {
	/* Padlock */
	content: "\f023";
}
/* Spotted topics */
.topiclist dl[class*="_mine"]::after {
	position: absolute;
	display: block;
	top: 3px;
	left: 29px;
	width: 6px;
	height: 6px;
	color: #ccc;
	font-family: FontAwesome;
	font-size: 7px;
	/* Star */
	content: "\f005";
}

/*----------------------------*/
/* Gumboots custom additions. */
/* @WIP - Custom skiplink. */
#skiplink {
	position: fixed;
	display: block;
	float: left;
	top: -1px;
	left: -50vw;
	z-index: 99;
	padding: 1em 3em;
	background: #242a36;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid #2d323e;
	border-radius: 0 0 4px 4px;
	box-shadow: 2px 3px 4px #0009;
	opacity: 0;
	transition: left 1s step-end, opacity 1s ease-out;
}
#skiplink:hover, #skiplink:focus {
	left: 40vw;
	opacity: 1;
	outline: none;
	transition: left .1s step-start, opacity .1s step-start;
}
#skiplink::after {
	content: " \203a \203a";
}
#websitemenu {
	background: linear-gradient(to top, #171b24, #242a36 25px);
	box-shadow: 0 3px 4px #0009;
}
#websitemenu li a {
	border: 1px solid transparent;
}
#websitemenu li a:hover, #keywords {
	background: #171b24;
	border: 1px solid;
	border-color: #222 #222 #333;
	border-radius: 2px;
	box-shadow: inset 1px 2px 3px rgba(0,0,0,.5);
}
#websitemenu ul ul {
	background: #242a36;
	border: 1px solid #2d323e;
	border-radius: 0 7px;
	box-shadow: 2px 3px 4px #0009;
}
.custom_anchor {
	background: #242a36;
	border: 1px solid #2d323e;
}
/* BBC tag styling. */
hr {
	background: #1c212c;
	box-shadow: 0 1px 0 #364052;
}
/* @WIP - This is a handy declaration for a lot of elements. */
/* Visible header surrounds. */
#page-header {
	background: #242a36;
	border: 1px solid #2d323e;
	border-radius: 7px;
}
/* @WIP: Top of visible header - might amalgamate things here. */
.headerbar {
	padding: 5px 5px 0;
	border-radius: 7px 7px 0 0;
}
.headerbar > .inner {
	position: relative;
	overflow: hidden;
	background-color: #1c212c;
	background-image: url(banners/banner_7.jpg);
	background-size: cover;
	border-radius: 4px 4px 0 0;
	box-shadow: inset 0 2px 2px 1px #0009, 0 2px 1px #fff2;
}
#logo {
	display: block;
	position: relative;
	z-index: 1;
	padding: 14% 0 0;
}
h1 {
	position: absolute;
	bottom: .6em;
	right: .4em;
	color: #ddd;
	font-size: 2.5em;
	font-weight: 300;
	text-shadow: 0 0 1px #000, 1px 2px 1px #000, -1px 2px 1px #000;
}
.headerbar p {
	display: none;
}
/* @WIP: Upper login form. */
.headerspace {
	position: relative;
	padding: 9px 12px 6px;
	line-height: 28px;
	border-bottom: 1px solid #2d323e;
}
.quick-login label {
	display: inline-block;
	padding: 0;
	white-space: nowrap;
}
.quick-login label:nth-child(2) {
	padding-left: 5px;
}
.quick-login .inputbox {
	box-sizing: border-box;
	width: 11em;
	background: #1c212c;
	border-radius: 2px;
	vertical-align: middle;
	box-shadow: inset 1px 2px 3px rgba(0,0,0,.3);
}
.quick-login #autologin {
	position: absolute;
	z-index: -1;
}
#autologin+label, #send_password {
	padding: 0 7px 0 9px;
	background: rgba(255,255,255,.1);
	color: #a2a8b3 !important;
	line-height: 24px;
	text-decoration: none;
	border: 1px solid #fff1;
	border-radius: 1px;
	vertical-align: middle;
}
#send_password {
	float: right;
	margin-top: 3px;
}
#autologin+label::after {
	display: inline-block;
	width: 16px;
	font-size: 16px;
	font-weight: 700;
	text-align: end;
	content:' \003F';
}
#autologin:checked+label::after {
	content:' \2714';
}
.quick-login .button2 {
	min-height: 24px;
	line-height: 24px;
}
#autologin+label:hover, #autologin:focus+label, #send_password:hover, #send_password:focus {
	background: rgba(255,255,255,.18);
	color: #dde0e3 !important;
}
#navbar_register {
	float: right;
	font-weight: 700;
}
#navbar_register span::after {
	content: ' an account';
}
.navbar {
	font-size: 12px;
	padding: 7px 10px 0;
}
#quick-links li a, #username_logged_in .dropdown a, #quick_style_gb .dropdown a {
	display: block;
	padding: 0 8px 0 4px;
}
.header-avatar:hover img {
	box-shadow: 0 0 1px 1px;
}
.section-index .page-body>.rightside {
	margin: 6px 8px 9px;
}
.section-index .page-body>.action-bar.compact {
	margin: 8px;
}
/* Code boxes. */
.codebox code {
	color: #ccc;
	opacity: .6;
}
.codebox code:hover, .codebox code:focus {
	opacity: .8;
}
/* Custom stats block backgrounds. */
.stat-block>p {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 18px;
}
.stat-block.statistics, .stat-block.birthday-list {
	border-top: 1px solid #2d323e;
}
/* Who is online pop-up. */
#viewonline_whois h2 {
	padding: 0 6px 6px;
	font-size: 18px;
}
#viewonline_whois pre {
	font-size: 13px;
	line-height: 19px;
	border-bottom: 1px solid #2d323e;
}
#viewonline_whois>a {
	display: block;
	width: 11em;
	margin: 6px auto;
	text-align: center;
}
/* --------------------------------------------- */
/* Custom page footer. */
.page-footer {
	background: #242a36;
	border-top: 1px solid #2d323e;
}
#page-footer .navbar {
	padding: 3px 12px 5px;
}
.copyright {
	display: flex;
	flex-wrap: wrap;
	padding: 0 13px 8px;
}
.footer-row {
	width: 50%;
	font-size: 12px;
}
.footer-row:nth-child(even) {
	text-align: end;
}
/* Colour change buttons. */
#variant_switch {
	text-align: center;
	padding: 0 1em 1em;
}
#variant_switch button {
	display: inline-block;
	width: 48px;
	height: 12px;
	margin-top: 1em;
	border: 0;
	border-radius: 1px;
	opacity: .3;
}
#variant_switch button:hover, #variant_switch button:focus {
	opacity: 1;
}
#html_red {
	background: #ff5555;
	/* Hue 0 */
}
#html_orange {
	background: #fd7624;
	/* Hue 16 */
}
#html_yellow {
	background: #bb9a00;
	/* Hue 35 */
}
#html_lime {
	background: #65b911;
	/* Hue 64 */
}
#html_green {
	background: #02b53d;
	/* Hue 99 */
}
#html_turquoise {
	background: #00b7a9;
	/* Hue 124 */
}
#html_blue {
	background: #639fdc;
	/* Hue 149 */
}
#html_purple {
	background: #ac8cff;
	/* Hue 182 */
}
#html_pink {
	background: #ff62bc;
	/* Hue 231 */
}
#html_grey {
	background: #9d9d9d;
	/* Hue 0 */
}
/* --------------------------------------------- */
.topiclist dl[class*="_unread"]::before, .subforum.unread .fa-file::before {
	/* Unread icons animations. */
	animation: UnreadPulse 3s infinite;
	/* Board icons center color. */
	color: #fff;
}
/* Proactive walloping - head 'em off at the pass. */
.dropdown li:first-child, .row:last-child, .stat-block:last-child, .poll_vote {
	border: 0 !important;
	box-shadow: none !important;
}
.inner .panel {
	box-shadow: none !important;
}
.activetab > a, .pagination .active span {
	font-weight: 700; /* @WIP: Move to base.css later. */
}
.row .pagination .button {
	border-radius: 1px !important;
}
#pmheader-postingbox, .cp-main #postingbox {
	margin: 0;
	padding: 0 15px;
}
.cp-main #options-panel {
	margin: 0;
}
.cp-main #attach-panel {
	padding: 0 15px;
}
.topicreview {
	border-color: #2d323e;
}
#message:first-child {
	margin-top: 1em;
}
/* --------------------------------------------- */
/* -- Hue 0: cookie content "html_red" -- */
.html_red a:link, .html_red a:active, .html_red a:visited, .html_red .icon.icon-blue, .html_red .subforum.unread .fa-file::before {
	color: #ff5555;
}
.html_red a:hover, .html_red a:hover .icon.icon-blue, .html_red .arrow-left:hover, .html_red .arrow-right:hover {
	color: #ff8080;
}
.html_red .badge, .html_red .pagination .active span, .html_red .pagination a:hover, .html_red .resultbar>div, .html_red .topiclist dl[class*="_unread"]::before {
	background: #ff5555;
}
/* --------------------------------------------- */
/* -- Hue 16: cookie content "html_orange" -- */
.html_orange a:link, .html_orange a:active, .html_orange a:visited, .html_orange .icon.icon-blue, .html_orange .subforum.unread .fa-file::before {
	color: #fd7624;
}
.html_orange a:hover, .html_orange a:hover .icon.icon-blue, .html_orange .arrow-left:hover, .html_orange .arrow-right:hover {
	color: #fd914f;
}
.html_orange .badge, .html_orange .pagination .active span, .html_orange .pagination a:hover, .html_orange .resultbar>div, .html_orange .topiclist dl[class*="_unread"]::before {
	background: #fd7624;
}
/* --------------------------------------------- */
/* -- Hue 35: cookie content "html_yellow" -- */
.html_yellow a:link, .html_yellow a:active, .html_yellow a:visited, .html_yellow .icon.icon-blue, .html_yellow .subforum.unread .fa-file::before {
	color: #bb9a00;
}
.html_yellow a:hover, .html_yellow a:hover .icon.icon-blue, .html_yellow .arrow-left:hover, .html_yellow .arrow-right:hover {
	color: #d2ad00;
}
.html_yellow .badge, .html_yellow .pagination .active span, .html_yellow .pagination a:hover, .html_yellow .resultbar>div, .html_yellow .topiclist dl[class*="_unread"]::before {
	background: #bb9a00;
}
/* --------------------------------------------- */
/* -- Hue 64: cookie content "html_lime" -- */
.html_lime a:link, .html_lime a:active, .html_lime a:visited, .html_lime .icon.icon-blue, .html_lime .subforum.unread .fa-file::before {
	color: #65b911;
}
.html_lime a:hover, .html_lime a:hover .icon.icon-blue, .html_lime .arrow-left:hover,# html_lime .arrow-right:hover {
	color: #6bc412;
}
.html_lime .badge, .html_lime .pagination .active span, .html_lime .pagination a:hover, .html_lime .resultbar>div, .html_lime .topiclist dl[class*="_unread"]::before {
	background: #65b911;
}
/* --------------------------------------------- */
/* -- Hue 99: cookie content "html_green" -- */
.html_green a:link, .html_green a:active, .html_green a:visited, .html_green .icon.icon-blue, .html_green .subforum.unread .fa-file::before {
	color: #02b53d;
}
.html_green a:hover, .html_green a:hover .icon.icon-blue, .html_green .arrow-left:hover, .html_green .arrow-right:hover {
	color: #02ca43;
}
.html_green .badge, .html_green .pagination .active span, .html_green .pagination a:hover, .html_green .resultbar>div, .html_green .topiclist dl[class*="_unread"]::before {
	background: #02b53d;
}
/* --------------------------------------------- */
/* -- Hue 124: cookie content "html_turquoise" -- */
.html_turquoise a:link, .html_turquoise a:active, .html_turquoise a:visited, .html_turquoise .icon.icon-blue, .html_turquoise .subforum.unread .fa-file::before {
	color: #00b7a9;
}
.html_turquoise a:hover, .html_turquoise a:hover .icon.icon-blue, .html_turquoise .arrow-left:hover, .html_turquoise .arrow-right:hover {
	color: #00c4b2;
}
.html_turquoise .badge, .html_turquoise .pagination .active span, .html_turquoise .pagination a:hover, .html_turquoise .resultbar>div, .html_turquoise .topiclist dl[class*="_unread"]::before {
	background: #00b7a9;
}
/* --------------------------------------------- */
/* -- Hue 149: cookie content "html_blue" -- */
.html_blue a:link, .html_blue a:active, .html_blue a:visited, .html_blue .icon.icon-blue, .html_blue .subforum.unread .fa-file::before {
	color: #639fdc;
}
.html_blue a:hover, .html_blue a:hover .icon.icon-blue, .html_blue .arrow-left:hover, .html_blue .arrow-right:hover {
	color: #86b5e3;
}
.html_blue .badge, .html_blue .pagination .active span, .html_blue .pagination a:hover, .html_blue .resultbar>div, .html_blue .topiclist dl[class*="_unread"]::before {
	background: #639fdc;
}
/* --------------------------------------------- */
/* -- Hue 182: cookie content "html_purple" -- */
.html_purple a:link, .html_purple a:active, .html_purple a:visited, .html_purple .icon.icon-blue, .html_purple .subforum.unread .fa-file::before {
	color: #ac8cff;
}
.html_purple a:hover, .html_purple a:hover .icon.icon-blue, .html_purple .arrow-left:hover, .html_purple .arrow-right:hover {
	color: #bba2ff;
}
.html_purple .badge, .html_purple .pagination .active span, .html_purple .pagination a:hover, .html_purple .resultbar>div, .html_purple .topiclist dl[class*="_unread"]::before {
	background: #ac8cff;
}
/* --------------------------------------------- */
/* -- Hue 231: cookie content "html_pink" -- */
.html_pink a:link, .html_pink a:active, .html_pink a:visited, .html_pink .icon.icon-blue, .html_pink .subforum.unread .fa-file::before {
	color: #ff62bc;
}
.html_pink a:hover, .html_pink a:hover .icon.icon-blue, .html_pink .arrow-left:hover, .html_pink .arrow-right:hover {
	color: #ff86cc;
}
.html_pink .badge, .html_pink .pagination .active span, .html_pink .pagination a:hover, .html_pink .resultbar>div, .html_pink .topiclist dl[class*="_unread"]::before {
	background: #ff62bc;
}
/* --------------------------------------------- */
/* -- Hue 0: cookie content "html_grey" -- */
.html_grey a:link, .html_grey a:active, .html_grey a:visited, .html_grey .icon.icon-blue, .html_grey .subforum.unread .fa-file::before {
	color: #9d9d9d;
}
.html_grey a:hover, .html_grey a:hover .icon.icon-blue, .html_grey .arrow-left:hover, .html_grey .arrow-right:hover {
	color: #bababa;
}
.html_grey .badge, .html_grey .pagination .active span, .html_grey .pagination a:hover, .html_grey .resultbar>div, .html_grey .topiclist dl[class*="_unread"]::before {
	background: #9d9d9d;
}
/* Note: Grey also gets a subtle underline on links inside post content. */
.html_grey a.postlink {
	text-decoration: underline #9d9d9d77;
}
.html_grey a.postlink:hover, .html_grey a.postlink:focus {
	text-decoration-color: #bababa;
}
/* --------------------------------- */
/* Extra fun: banners by variant. :) */
/* --------------------------------- */
.html_red .headerbar > .inner		{background-image:url(banners/banner_1.jpg),linear-gradient(to right,#34281a,#7e6c54,#856633)}
.html_orange .headerbar > .inner	{background-image:url(banners/banner_8.jpg),linear-gradient(to right,#6c4b34,#907b4b,#634428)}
.html_yellow .headerbar > .inner	{background-image:url(banners/banner_3.jpg),linear-gradient(to right,#5f666d,#bb9b6a,#7a98a3)}
.html_lime .headerbar > .inner		{background-image:url(banners/banner_4.jpg),linear-gradient(to right,#78aacb,#6e97b0,#466660)}
.html_green .headerbar > .inner		{background-image:url(banners/banner_5.jpg),linear-gradient(to right,#637075,#8b938e,#182c33)}
.html_turquoise .headerbar > .inner	{background-image:url(banners/banner_2.jpg),linear-gradient(to right,#31506e,#948776,#2f597f)}
.html_blue .headerbar > .inner		{background-image:url(banners/banner_7.jpg),linear-gradient(to right,#6593d7,#55aedb,#05346f)}
.html_purple .headerbar > .inner	{background-image:url(banners/banner_9.jpg),linear-gradient(to right,#472615,#c9a98a,#034f8c)}
.html_pink .headerbar > .inner		{background-image:url(banners/banner_10.jpg),linear-gradient(to right,#2c0f2e,#b6668a,#4d183b)}
.html_grey .headerbar > .inner {background-image:url(banners/forum_banner_4.jpg),linear-gradient(to right,#46474d,#b1b5c1,#5c5c5c)}
/* Change position of h1 text to suit banners. */
.html_red h1,.html_orange h1,.html_lime h1,.html_turquoise h1,.html_pink h1{left:.4em;right:auto}
.html_yellow h1,.html_purple h1 {top:.6em;bottom:auto}
.html_grey h1 {opacity:0}

Note that this is a fairly heavily customised version of Christian's style, with my own choices of colours and several other things. Nonetheless, the basic colour variant switching is simple and (AFAICT from all testing to date) totally bulletproof.

The short version is that it deliberately avoids having the colour variants in separate stylesheets, to avoid FOUC issues under any circumstances. Because all colour variant CSS is already loaded and parsed as part of dark.css, there is no delay when switching to another variant. The extra CSS for all variants that has to be loaded initially is trivial in the scheme of things, and performance seems to be excellent.

Look for /* Colour change buttons. */ and /* -- Hue 0: cookie content "html_red" -- */ to see where the colour changing is handled (it says "cookie content" because I wrote the comments back when it was using cookies, and haven't bothered changing them).

The banner changing by variant is handled from /* Extra fun: banners by variant.

*/ which comes after the rest of the variant code.

piranhacut · by **piranhacut** » Fri Feb 25, 2022 1:58 pm

May I ask some questions about languages that you are using for creating this?
would appreciate your answers

Gumboots · by **Gumboots** » Sat Feb 26, 2022 11:19 pm

Of course. Ask anything you like.

phpBB • Free and Open Source Forum Software

Prosilver Dark Edition

Color scheme based on cookies in navbar - Prosilver Dark Edition

Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

Re: Color scheme based on cookies in navbar

advertisements