Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5

[BETA] Color Picker

#1
READ THE BETA ANNOUNCEMENT POST HERE:

(May 8th, 2020 at 1:42 AM)Lain Wrote: Hey folks, back again with a brand-new special-edition limited-time-only update.

The Colour Picker has officially entered its BETA stages.

I've fixed most of the issues from the Alpha version including-but-not-limited-to:
  • UserCP styling
  • New posts/threads
  • Post-views
  • Anything on the index pages that wasn't quite up to my personal standards.
While I was at it, I decided to rewrite a generous portion of the code so that porting over to the light-theme would be relatively hiccup-free. I'll need to do some more testing on the light theme before I can fully port it over, but that'll probably happen within the next few days at best.

But not only does this release include bugfixes and slight mods to make it work globally across the site.
This release also includes a new feature!

ALL THE GREEN LINKS FROM THE STANDARD DARK THEME ALSO CHANGE COLOURS RELATIVE TO YOUR SELECTED ACCENT COLOR!

But no, they don't just change to the same colour. They're offset slightly to add a bit of variance to the site.

Some colours work better than others, and ideally once we finally hit the full release, I'll probably be adding an option to set the link colours separately from the typical accent/header colours. Right now it's a fixed value, offset from the colour you select, so if you choose a green accent like I generally think looks nice, the links unfortunately take on a weird cream-coloured yellow. But for colours like blue, pink/purple, red, orange, it seems to work just about as well as I was hoping.

Here's a couple screenshots of index pages:
https://i.imgur.com/eCqqjMZ.png (Green)
https://i.imgur.com/iyOKNuC.png (Pink/Purple)
https://i.imgur.com/cVDprIP.png (Blue)
Not gonna embed them because they're all full size and I don't want to break formatting too much.


So give it a shot.
Play around with it, and if you find something that should be themed but isn't themed properly, then please let me know so I can push a fix ASAP.
I may really need all your help with this one because of the change I mentioned that'll help me port stuff over. If no bugs are found, I'll end up deleting a pretty big chunk of code which will improve performance. Right now, the theme runs on the newer portable code, so I need to know if it's breaking anything.

I'm also open for more suggestions. I've got time to implement new theming options if needed, only taking two classes this semester.

Cheers.

Hey folks.

While Darth is away I'm assuming totalitarian control of the site and will make you all bow down to me. When he returns, you'll all love me so much that together we can all overthrow him as the dictator of Makestation.

And as my first course of action to make you all love me, I'm releasing a NEW FEATURE as an alpha release!
In other words, it's still in active development and may have some kinks. Some parts of the site won't be modified when they should be. I'll be working them out in the next couple weeks, and as much as I'd like to just run a script on the database to update every instance of the class I need to change, I'd also rather not accidentally break half the site by doing that, and also not f*** up any themes that aren't this one.


So here it is, a new feature to the already-existing dark theme:
The Colour Picker.
Note: Canadian Spelling, or the correct spelling if you will.
[Image: 2UNXqbv.png]
[Image: 7zw6i6R.png]

[Image: sJwYBP4.png]

[Image: zvIHKd6.png]

[Image: 3GXrIFo.png]

You get the idea.

If you want to give it a spin, head down to the theme selector at the bottom of the page and select "MS Dark Color Picker [ALPHA]"
[Image: bEZyuv2.png]

You're free to mention bug reports here, since I am working on it still. But it gives you a good idea of what the final result will be.
I'm also taking suggestions. I'm not sure what to do with links and such yet. As much as I'd like them to follow the accents as well, I want to have 'some' variance within the theme as well, else it'll just be bland.

So far,
  • New post pages aren't perfect
  • UserCP has not been worked on.
  • Misc pages are probably also unstyled.
  • 'Hidden' pages like the RSS generator, shoutbox archive, etc. are probably also unthemed.
When all the kinks are worked out, I'll be porting it over to the light theme, so fear not, light-theme users. You guys get the full working product and don't need to worry about inconsistencies.

So give it a whirl and drop some feedback.

Cheers.
~Lain
Reply
#2
* Darth-Apple overthrows lain and gracefully reclaims control. Wink Finna

Nice work! It works very well, and adds a lot of customization and a personalized feel to the theme. I knew we made a good decision bringing you on. Wink
Saturn-Moon.com - Our next project...
Reply
#3
Quote: Note: Canadian Spelling, or the correct spelling if you will.

Eyyyyyy. Proper civilised people unite.
Reply
#4
ok i understand fu put a new color into play to overthrow the "old" leader ... Finna
 [Image: autism4all.png]
[x] <= Drive in nail here for new display!
Reply
#5
Does not work on 2008 macbook.
Color picker box is empty/not generating.

Firefox version: 48.0.2

Will test on chrome but chrome eats memory like pacman eats dots.
"I reject your reality and subsitute my own." - Adam Savage, Mythbusters
[Image: 5.jpg]
Reply
#6
(May 3rd, 2020 at 1:44 AM)SpookyZalost Wrote: Does not work on 2008 macbook.
Color picker box is empty/not generating.

Firefox version: 48.0.2

Will test on chrome but chrome eats memory like pacman eats dots.

Jeez that's an old version of FF.
Any errors in the browser console? I suspect it might have something to do with ES6 support, since like half of ES6 was only added to FF in FF49.
Reply
#7
@Lain it's the latest browser for the latest OS that'll run on such old hardware.

Errors here:

SyntaxError: missing = in const declarationpickr.min.js:2:2080
ReferenceError: Pickr is not defined
<anonymous>
Thread-ALPHA-Color-Picker:281
Thread-ALPHA-Color-Picker:281:7
TypeError: $(...).error is not a function
<anonymous>
Thread-ALPHA-Color-Picker:2185
Thread-ALPHA-Color-Picker:2185:3
"I reject your reality and subsitute my own." - Adam Savage, Mythbusters
[Image: 5.jpg]
Reply
#8
It's an ES6 problem, but it's a weird one. The error points to a for..of loop which is an addition in ES6 but it was added to FF in FF36, so well before your version.
That being said, for..of typically uses const instead of var, and const definitions changed in FF51, especially how they behave in loops specifically.
I'll look into it a little more later on, in the meanwhile may I suggest Microsoft Edge™, the latest browser from your favourite computer company, Microsoft®, with Full ES6© compatibility? ;P

Alright. I think I know how to fix it. I hope it doesn't cause more errors, but it all has to do with how for..of loops are supposed to entirely kill their instance and start a new one for scoping on each iteration. It was addressed in FF51, but the problem is that the bug exists in every other iteratable-object loop, like for..in or foreach().

Now, I'm not too sure if my solution will fix it or completely create new bugs because ES6's variable types behave differently in different types of loops. Technically, all var, const, and let should work in a for..of loop, but I don't know if it'll break the script somewhere later down the road because of how I fix it. Scoping is a pain.

I'll need to reupload the script somewhere, so yeah bear with it for a bit xd
Reply
#9
Thanks lain, I get how you feel though, I had to do a lot of tinkering to get my website to work on the range of hardware it does.
"I reject your reality and subsitute my own." - Adam Savage, Mythbusters
[Image: 5.jpg]
Reply
#10
It works for me, but it is too dark for me in the basic theme, but how it works is gigantic
 [Image: autism4all.png]
[x] <= Drive in nail here for new display!
Reply
#11
Hey folks, back again with a brand-new special-edition limited-time-only update.

The Colour Picker has officially entered its BETA stages.

I've fixed most of the issues from the Alpha version including-but-not-limited-to:
  • UserCP styling
  • New posts/threads
  • Post-views
  • Anything on the index pages that wasn't quite up to my personal standards.
While I was at it, I decided to rewrite a generous portion of the code so that porting over to the light-theme would be relatively hiccup-free. I'll need to do some more testing on the light theme before I can fully port it over, but that'll probably happen within the next few days at best.

But not only does this release include bugfixes and slight mods to make it work globally across the site.
This release also includes a new feature!

ALL THE GREEN LINKS FROM THE STANDARD DARK THEME ALSO CHANGE COLOURS RELATIVE TO YOUR SELECTED ACCENT COLOR!

But no, they don't just change to the same colour. They're offset slightly to add a bit of variance to the site.

Some colours work better than others, and ideally once we finally hit the full release, I'll probably be adding an option to set the link colours separately from the typical accent/header colours. Right now it's a fixed value, offset from the colour you select, so if you choose a green accent like I generally think looks nice, the links unfortunately take on a weird cream-coloured yellow. But for colours like blue, pink/purple, red, orange, it seems to work just about as well as I was hoping.

Here's a couple screenshots of index pages:
https://i.imgur.com/eCqqjMZ.png (Green)
https://i.imgur.com/iyOKNuC.png (Pink/Purple)
https://i.imgur.com/cVDprIP.png (Blue)
Not gonna embed them because they're all full size and I don't want to break formatting too much.


So give it a shot.
Play around with it, and if you find something that should be themed but isn't themed properly, then please let me know so I can push a fix ASAP.
I may really need all your help with this one because of the change I mentioned that'll help me port stuff over. If no bugs are found, I'll end up deleting a pretty big chunk of code which will improve performance. Right now, the theme runs on the newer portable code, so I need to know if it's breaking anything.

I'm also open for more suggestions. I've got time to implement new theming options if needed, only taking two classes this semester.

Cheers.
Reply
#12
Hy Lain, could you make the dark gray areas (red cross) lighter, like upper (blue cross) or even lighter?


Attached Files Image(s)
   
 [Image: autism4all.png]
[x] <= Drive in nail here for new display!
Reply
#13
I personally like the darker high-contrast, but I might add something a little less-contrasty maybe as a checkbox or something.
My goal with this whole project is to be able to customize your site experience as much as possible, all directly on-site, so yeah I can probably add something like that.
Keep in mind, that colour is the same as used in quotes, like the main post here with the announcement, so the white text becomes a little harder to see, so I might being it down to #404040 instead of #444.
Reply
#14
ok, yes, of course I understand, heller becomes a problem with heller e.g. font Wink
 [Image: autism4all.png]
[x] <= Drive in nail here for new display!
Reply
#15
Made another pretty major update to the way colors get saved. This also allows for a proper fallback, i.e. if your accent color cannot be retrieved or you have not set it, then the theme will go back to its default colors until you select something.

It will most likely be very buggy if you already had a color saved, but to fix it is as simple as clearing your cookies.

On Chrome:
1. The safe way (but you get logged out of every website you are logged in to):
--Go to the top right corner of the browser to the three dots,
then Settings,
then scroll down to the bottom,
click Advanced Settings (or the equivalent),
scroll down a bit more to Privacy and Security
and finally click Clear Browsing Data.
At the very least, select Cookies and other site data as well as Cached images and files. Set the time-range to the beginning of time, and finally click Clear Data
Refresh the web page.

The Not-as-safe way (but you don't get logged out and if you break something, it's an easy fix.):
On Makestation.net, hit F12
In Developer Tools, click Application in the tab menu.
On the left side-bar, find the Storage menu and expand the dropdown menu for Cookies.
In the cookies that appear, find two cookies by name: accent and accentH.
Select one by clicking it once, then press Delete on your keyboard. Repeat for the other cookie.
Close Developer Tools and refresh the webpage.

IF YOU BROKE SOMETHING WITH THE SECOND OPTION:
Go back to Developer tools with F12 and get back to the Cookies display as done above
Beside the Filter search box to the right is a little circle with a line through it. Click that circle. All your cookies on Makestation.net should be deleted.
Refresh the web page and log back in.

On Firefox the process is almost identical, except for a few menus with slightly different names.
Reply
#16
This is looking great Lain! MS looks good in any color!
Reply
#17
Very nice work on this. Loving how it's shaping up. Big Grin
Saturn-Moon.com - Our next project...
Reply
#18
UPDATE: Development is delayed for a little while until I can figure out what's wrong with my monitor.

Display output is extremely grainy on my second monitor (which has better Adobe RGB ratings so is what I primarily use for drawing/designing anything) and as a result, I can't see what colors and changes I make to the site here with any remote degree of accuracy.
Like, it's really bad. almost looks like a feint camo pattern of RGB overlayed on the whole screen. I suspect it has something to do with display drivers (AMD) since I needed to manually create a configuration for my monitor when it couldn't figure out what its resolution was natively.

The next time you hear an update from me will hopefully be the last update, indicating a full release.
Reply




Users browsing this thread: 2 Guest(s)

Makestation Theme/Design Selector

Contact Us | Makestation | Return to Top | Lite (Archive) Mode | RSS Syndication 
Proudly powered by MyBB 1.8, © 2002-2020
Forum design by Makestation Team © 2020
Saturn-Moon.com - a modern day time capsule | Makestation Ajax Chat Hosting