[GUIDE] Prosilver Colours.css Generator 2.0

[Hanakin]

2.0 RC

I have been working on a much more opinionated, but far simpler version of the color editor that also renders all the common components of the theme for preview.

https://codepen.io/hanakin/pen/wNagyO?editors=1100

I still have some final tweaks and tests to make but wanted to get this beta version out there for everyone to play with and get some feedback.

Things to know
This is not just changing the colors. I completely rewrote the entire colours.css file from scratch in scss.

• Its more organized
• Has a far more versatile color scheme using https://material.io/tools/color/#!/?vie ... lor=2196F3 as a framework
  • Primary
  • Secondary
  • Surface
  • Background
• Far less colors required
• The changes I have made deviate from prosilver design to vastly improve consistency across the theme in order to make editing things much simpler and are very opinionated.
  For example:
  • All buttons are rendered the same (reply, pagination, submit) and the look has changed.
  • All gradients are gone, gradients should only be used as backgrounds and not for ui elements.
  • All tabs and navs are rendered similar for better consistency
  • All headers are the same damn color changing the color should be done via class, not the html element itself
• Currently it pretty much works with 3.2.x. Depending on the feedback we can work on 3.3 support and perhaps even integration.
• How it works has also changed since the variables are all different. You just edit the variable in the section that looks like this (Lines 25-66) but still convert to css the same way as before and remove the bottom section as well.
  
  See original for instructions viewtopic.php?f=591&t=2413816
  
  

  Code: Select all

  //== BEGIN EDITING HERE +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  
  
  // The primary UI Color and an accent version, This is usually the color of your links
  $primary: hsl(200, 85%, 50%) !default;
  $primary-on: $white !default;
  $primary-alt: hsl(210, 65%, 50%) !default;
  $primary-alt-on: $white !default;
  
  // The secondary UI Color and an accent version, This is usually the color of your UI
  // elements like buttons/toggles/checks/etc
  $secondary: hsl(345, 85%, 50%) !default;
  $secondary-on: $white !default;
  $secondary-alt: hsl(55, 100%, 90%) !default;
  $secondary-alt-on: #29303d !default;
  
  // The surfaces Color and an accent version, This is the primary color of any components
  // background that is within a container with another background
  $surface: hsl(200, 38%, 75%) !default;
  $surface-on: #29303d !default;
  $surface-alt: hsl(200, 38%, 90%) !default;
  $surface-alt-on: #29303d !default;
  
  // These are the default background colors used for containers, or to simulate the
  // abssecence of a background in a section of a surface
  $background-light: $white !default;
  $background: $gray-50 !default;
  $background-dark: $gray-100 !default;
  $background-on: #29303d !default;
  
  
  // NONE UI COLORS - These colors are not part of the Color Scheme. They are single use only and can be edited
  
  // CODE COLOR
  $code: hsl(125, 40%, 50%) !default;
  
  // PM COLORS
  $pm-reported: hsl(200, 38%, 75%) !default;
  $pm-marked: hsl(35, 100%, 50%) !default;
  $pm-reply: hsl(200, 38%, 80%) !default;
  $pm-friend: $code !default;
  $pm-foe: $black !default;
  
  // POLL COLOR
  $polls: $secondary !default;
  
  
  //== STOP EDITING HERE ++++ VARS BEYOND HERE ARE BASED ON THE VARS ABOVE DO NOT CHANGE UNLESS YOU KNOW WHAT YOU ARE DOING ==//
  

I am looking for feedback on improvements changes and a way forward! so please feel free to respond here

[Hanakin]

Bump finished with all the color tweaks and tests just need to scrub the code for organization. Still looking for feedback. To see what this can do by only changing 3 variables (primary, surface, & surface-alt) check out this prosilver_se version https://codepen.io/hanakin/full/MLJwRK

[david63]

Sorry but I have no idea what I should be commenting on by following that link

[Hanakin]

Anything really organization, improvements color choice, usability. If you are not familiar with the original tool and how it works then check out the original post. If you are still confused let me know.

[martti]

I have to update my live board in some time and then I will test this. But how come I got subscribed to this topic?

[Hanakin]

Because you were subscribed to the original probably and this was split from it

[PlanetStyles.net]

Nice, thanks for sharing this. I particularly love the UI previews below. I can see this saving many style authors lots of time.

Any specific licensing for the exported code, or is it a free for all?

[Hanakin]

Its fee use at least for now

[3Di]

and ... give credits where credits are due.

[Hanakin]

ok with some more edits to the color scheme for the secondary elements I believe that we are ready for an RC. Please test it out and let me know if anything fails or if you find any issues before I replace the original with this one. Depending on how it goes I would like to see this more integrated with the site. perhaps built into titania: https://www.phpbb.com/customise/db/styl ... r/demo/3.2

One thing that may cause issues is that I am currently rendering 3.3 mock-ups in the editor. I did my best to scrub the code to ensure there were no issues with 3.2.5 code. This was done to ensure it still works with 3.3 going forward.

Happy theming!

[TT37]

This is nice but quite impractical, maybe it would be better to work on a modern version of the prosilver template. But thanks for trying.
Actually, the best would be a new version of phpbb would be than to play and waste unnecessarily with this, that's my opinion, perhaps you're not offended.

I tried to recolor the prosilver, but I couldn't recolor some of the parts I wanted. Maybe I'm making a mistake somewhere, or some parts don't recolor.
I've always colored prosilver by hand, so I put my own css into stylesheet and it won't take me more than two hours.
This is a great idea, but maybe it would be nice to make it more user friendly and easier, for example - http://www.colorizeit.com/styles/phpbb- ... ilver.html
What bothers me is that vector icons in prosilver are no longer resolved.

[Hanakin]

I have not had a chance to test this on 3.2.8, and codepen has made some recent changes which may have broken things. But you are most definitely correct my time is better suited to working on the New theme which is what I am doing viewtopic.php?f=596&t=2485796 . With that being said if this is working you are most likely missing the point of this and probably doing it wrong. This is a rework of the entire pro silver colors.css file to be more user friendly to edit. There is no way to recolor all like components in current versions do to inconsistent coloring. That is fixes most if not all of those, as well it breaks the file up into components as best as can be done providing a better organized file. Further more using this I can completely recolor an entire theme in minutes. I call bullshit that you are doing so in 2 hours with the current version without a heavily modified custom colors.css file to start with. Mainly because it took at least a day and a half to put this the first version together, and a lot more for this version and it’s still not perfect unless you are talking about using colorize which is not giving half what this does. Lastly the colorize tool you linked too. For one is broken in some places. Two is far less capable and extremely hacky. Three is not capable of editing colors with nearly the accuracy of this as it is doing image color sampling and searching the file for close enough matches.

In summary it’s practical for style authors to use as a base for their style which is why we are looking at the changes for 4.0 final version of prosIlver. For average user, its still practical to just use the base file and make any edits manually unless you are wanting to recolor the whole style. Then it’s still better than colorize for the reasons listed above.

[Gumboots]

While I completely understand your desire to rationalise the CSS, I'd think twice about this:

I call bullshit that you are doing so in 2 hours with the current version without a heavily modified custom colors.css file to start with.

The reason I say that is because I've been messing with Christian's Prosilver Dark Edition, which is capable of being completely re-coloured very quickly. If you haven't checked out the coding already, what he has done is use overrides in dark.css (which loads last) to basically do what you're after: quick and easy restyling of the whole thing. He's done a good job of it too. Admittedly it just overrides the default colours.css without trying to fix it, but it works. Not optimal in terms of code, but functional nonetheless. IMO it makes a good basis for restyling 3.2.x.

[TT37]

Hanakin: Yes this Chameleon.. i like it so much, I can't wait to release it, it looks great.
Gumboots: I test Dark version of Prosilver by Christian, its look good so.. i need same this in light version.

In forum what i now made i use yellow color, i try it recolor this dark theme, so.. this looks terrible.
It is a pity that Christian did not do it in the light version, it would probably become one of the most downloaded templates.

[Gumboots]

I've roughed out a few light versions already. They're not quite finished yet, because I keep messing with all sorts of things apart from basic re-colouring (added features, spacings, etc) but are pretty decent already. You should try it yourself if you want a light version. It's not hard to do.