[CDB] Prosilver (Dark Edition)

PlanetStyles.net · Post by **PlanetStyles.net** » Mon Oct 21, 2019 12:25 pm

Style Name: Prosilver (Dark Edition)
Author: Christian 2.0 (on behalf of PlanetStyles.net)

Style Description: It's just Prosilver. But darker

Style Version: 1.0.0

Requirements: Style inherits unmodified template files from Prosilver. Prosilver needs to be installed, but doesn't need to be 'activated'.

Features:

Dark UI
Adjusted padding for better usability
Pure CSS forum / topic icons
'Pulsing' effect unread forum / topic icons
8 colour schemes
- Red
- Orange
- Yellow
- Green
- Blue (Default)
- Purple
- Pink
- Grey

FAQ:

How do I change the logo?

See: [3.2][RC] Site Logo

How do I change colour scheme?

Open: /styles/prosilver_dark/template/overall_header.html

Find:
Code: Select all
<link href="{T_THEME_PATH}/colours/blue.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
Replace blue.css with the name of the colour you want to use (eg: pink.css, green.css)

Your pure CSS forum / topics suck! How do I get the images back?

Open: /styles/prosilver_dark/theme/dark.css

Find and delete everything below this line:
Code: Select all
/* ------- Forum & Topic Icons (Pulsing) ------- */

The base colour looks kinda blue. How can I make this more grey / black?
Open: /styles/prosilver_dark/theme/dark.css

Find:
Code: Select all
/* Light bg colours */
.headerbar, .navbar, .forabg, .forumbg, li.row, .bg1, .bg2, .bg3, .tabs .activetab > a, .tabs a:hover, ul.cplist, .panel, blockquote blockquote, .dropdown .dropdown-contents, .jumpbox-cat-link, .jumpbox-sub-link {
	background: #242a36 !important;
}

/* Dark bg colours */
html, body, .wrap, .panel-container .panel, .navigation .active-subsection a, .navigation a:hover, .cp-mini, .codebox, blockquote, blockquote blockquote blockquote, .attachbox, .message-box textarea, .phpbb_alert, select {
	background-color: #171b24 !important;
}
Replace these two hex values with something darker.

As a good starting point, try #2d2d2d for the top (light) value, and #1e1e1e for the dark (bottom) value.

@Other style authors:
If you use Prosilver Dark Edition to kick-start your own styles, please do the kind thing by leaving some kind of attributable and publicly visible credit to PlanetStyles.net in the footer

Demo URL: See screenshots. It's just prosilver

Style Download: http://planetstyles.net/downloads/prosi ... _1.0.0.zip

Screenshots:

: Default view

: Viewforum

: Viewtopic

: Desaturated version (see FAQ for instructions)

: Red

: Orange

: Yellow

: Green

: Purple

: Pink

Download link: http://planetstyles.net/downloads/prosi ... _1.0.0.zip

PlanetStyles.net · Post by **PlanetStyles.net** » Mon Oct 21, 2019 12:38 pm

Icons, links and form-elements will be re-coloured prior to release.

Exabot · Post by **Exabot** » Mon Oct 21, 2019 1:23 pm

Looks good!

warmweer · Post by **warmweer** » Mon Oct 21, 2019 1:34 pm

Yep, it looks good.
Although the blue and red (forum/topic titles and group colour) lack sharpness (always difficult with dark styles) and the forum (read/posted in) icons also have hazy edges.

PlanetStyles.net · Post by **PlanetStyles.net** » Mon Oct 21, 2019 1:42 pm

warmweer wrote: ↑
Mon Oct 21, 2019 1:34 pm
Yep, it looks good.
Although the blue and red (forum/topic titles and group colour) lack sharpness (always difficult with dark styles) and the forum (read/posted in) icons also have hazy edges.

Indeed. Those are WIP screenshots, and those elements hadn't yet been recoloured.

The links will be high contrast (but not blinding, this theme needs to be nice to read at night), and I'll be offering admins a choice of 6-7 colours.

As for the icons, those are being replaced with pure CSS equivalents with a complimentary colour palette. This will negate any crispy edges or issues with the resolution

warmweer · Post by **warmweer** » Mon Oct 21, 2019 1:55 pm

Christian 2.0 wrote: ↑
Mon Oct 21, 2019 1:42 pm
...work in progress...

Looking forward to it

BTW you used the word "contrast". That was the word I was looking for and it just didn't come up

EA117 · Post by **EA117** » Mon Oct 21, 2019 2:28 pm

That the darkest portions remain "closer to blue" rather than "black" is subjectively fine in my opinion; not withstanding that "dark mode" in some prominent examples (Windows 10, Apple devices) are for intents and purposes "black". It's a "dark version of prosilver", and not "a black version of prosilver."

For what it's worth, my eye seems like it would rather see the <body> background color the same as #wrap, so that any small or large amount of body background that becomes exposed is a continuation of "this page is dark". Rather than transitioning back to one of the lighter colors for the unknown amount of background that will become exposed in a fixed-width style, and only using the darkest color "in the middle of the page".

Or maybe the <body> background would be what goes "full black", to nudge the overall feel slightly in that direction but sill keep prosilver's #wrap "box" visually?

Clearly you have better and more experienced opinions about all of this. Just giving my no-color-theory layperson input.

Lsha · Post by **Lsha** » Mon Oct 21, 2019 4:44 pm

looks good, waiting for the final release. thanks

Talk19Zehn · Post by **Talk19Zehn** » Mon Oct 21, 2019 5:17 pm

Right EA117 and I agree, the blue outweighs the current visual notion. BTW: Calibrate monitors and adjust perfectly is one thing and who uses which graphics card yet another ..

Good idea Christian 2.0 ==> +10 ==> Designing Dark is not easy and is often underestimated.

Best regards

PlanetStyles.net · Post by **PlanetStyles.net** » Mon Oct 21, 2019 5:41 pm

EA117 wrote: ↑
Mon Oct 21, 2019 2:28 pm
For what it's worth, my eye seems like it would rather see the <body> background color the same as #wrap, so that any small or large amount of body background that becomes exposed is a continuation of "this page is dark". Rather than transitioning back to one of the lighter colors for the unknown amount of background that will become exposed in a fixed-width style, and only using the darkest color "in the middle of the page".

Thanks for providing this perspective. I hadn't considered blending the wrapper and background until this suggestion.

I've just tried it and agree it looks much better, so it has been implemented

Talk19Zehn wrote: ↑
Mon Oct 21, 2019 5:17 pm
Good idea Christian 2.0 ==> +10 ==> Designing Dark is not easy and is often underestimated.

Thank you! And I agree, this started as a quick re-colour job but has turned into a 3-day project needing to adjust many intricate details. Hopefully others will find it useful when designing their own dark-based styles

in_so@pta · Post by **in_so@pta** » Mon Oct 21, 2019 6:45 pm

I think this one is much better:
https://gyazo.com/fb78482d0389e4468001e918cda7e267

warmweer · Post by **warmweer** » Mon Oct 21, 2019 6:56 pm

in_so@pta wrote: ↑
Mon Oct 21, 2019 6:45 pm
I think this one is much better:

How many times more are you going to post that link?
Also, if you think it's better, please state exactly why.

in_so@pta · Post by **in_so@pta** » Mon Oct 21, 2019 7:01 pm

Mate you are off topic, and btwy nobody care's about Uk

warmweer · Post by **warmweer** » Mon Oct 21, 2019 7:21 pm

in_so@pta wrote: ↑
Mon Oct 21, 2019 7:01 pm
Mate you are off topic, and btwy nobody care's about Uk

warmweer wrote: ↑
Mon Oct 21, 2019 6:56 pm
Also, if you think it's better, please state exactly why.

I think that's completely on topic. Saying you think another style is much better doesn't give any information as to what you think should be changed/improved. You could use the style you linked to to show the elements which (would) need improvements and that might be useful for the developer. It's what is generally called useful feedback.

Gumboots · Post by **Gumboots** » Mon Oct 21, 2019 8:44 pm

Aha. Now this is stylish. Nice work.

Given the standard of detailing so far, I assume the default board icons are temporary. Should be one of the best when it's finished.

advertisements