[GUIDE] Prosilver Colours.css Generator 2.0

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 902
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

[GUIDE] Prosilver Colours.css Generator 2.0

Post by Hanakin » Sat Jan 26, 2019 6:59 pm

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.5 with the plan to support 3.2.6. 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

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 902
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by Hanakin » Thu Jan 31, 2019 12:01 am

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

User avatar
david63
Registered User
Posts: 16571
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by david63 » Thu Jan 31, 2019 7:01 am

Sorry but I have no idea what I should be commenting on by following that link
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

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 902
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by Hanakin » Thu Jan 31, 2019 4:45 pm

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.

User avatar
martti
Registered User
Posts: 758
Joined: Thu Jul 31, 2014 8:23 am
Location: Belgium

Re: [BETA] Prosilver color scheme generator 2.0

Post by martti » Fri Feb 01, 2019 7:33 am

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?

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 902
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by Hanakin » Fri Feb 01, 2019 4:29 pm

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

User avatar
Christian 2.0
Former Team Member
Posts: 4473
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by Christian 2.0 » Sat Feb 02, 2019 11:18 pm

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?

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 902
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by Hanakin » Sun Feb 03, 2019 2:40 am

Its fee use at least for now

User avatar
3Di
Former Team Member
Posts: 14252
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by 3Di » Sun Feb 03, 2019 7:06 am

and ... give credits where credits are due. ;) :geek:
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 902
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [BETA] Prosilver color scheme generator 2.0

Post by Hanakin » Sun Feb 17, 2019 6:53 am

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!

Post Reply

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