Jump to content

Duelingpets: Colorschemes


Boltgreywing

Recommended Posts

When a user initially creates an account on Duelingpets they will start off with the default color applied to the site itself.

5959387977de6_DefaultColorscreen.thumb.png.0e1ab520fc26bf2d6d2e99dba246ac90.png

However if they don't like the color they can then change color using the Add Avatar and Edit Browser button. When they do so they will come up to a screen that looks like this:

Colorschemepicker.thumb.png.6d40928cb7e09d2a3ac1b634967da3d5.png

In the bottom of the screen there is a colorscheme drop down box that by default holds the default color as you can see just now. Instead we are going to change the colorscheme by using the drop down arrow and selecting High-Contrast.

595939c5a0bd0_NewColorschemechosen.thumb.png.e7b8f0ff16803ad1255f7b9af766d3af.png

For the purposes of this demo we will just be using High-Contrast color. However in later builds there might be even more options. The users themselves could potentially create a color choice of their own and select the color they wish and it would change to that. Now that we got High-contrast all we need to do is click the update userinfo button and our new colorscheme will be applied.

After we click the update button our new interface will now look like this:

59593aa4cdc87_Userwithhighcontrast.thumb.png.d810fef5a12abeca1e012c1505fc9237.png

Now you can see we are now looking at the high-contrast view of the page of the user profile. However this change doesn't just only affect the user profile but other pages as well.

HighContrastNews.thumb.png.ee607c4a4eb1af1d68db3c1bc1ee89d8.png

Stats:

HighContrastStats.thumb.png.8b856678100a523aabed70107070458c.png

The entire site gets converted to the new colorscheme only viewable by the current user who changed it. The other users keep the default color they start off with.

BloggerProfile.thumb.png.484c47511d889d47512fdc0a9d95cb16.png

So users can have whatever colorscheme they wish to without being restricted to the color of the site. If on the other hand a colorscheme winds up getting deleted at some point they will then revert to the default colorscheme if that were to happen.

Now this next screen will show only the current user the information of how he designed his pallete as well as the ability to edit and delete said pattern.

ColorschemeIndex.thumb.png.ec4b6a686daec212c2462a4ef0044d72.png

The code itself to change colors is all in hexadecimal from 0-f which proceeded by a # symbol. This number symbol is important along with the number of digits that need to be in place for this system to work. When a user destroy a color pallete that he is currently using he defaults back down to the default color like so:

DestroyQuestionColor.thumb.png.a3c645089255401b3d143f8b74a59401.png

When the user clicks okay their screen then looks like this:

HighcontrastDeleted.thumb.png.e8a542d1b7d23763ccb4d911f73b29d0.png

As you can see they have been returned to the default color. On top of that every user who used this color was also returned back to the default at the same time. This is a safety precaution to prevent the website from crashing should a user's colorscheme get deleted while still providing for colorblind to access the site itself.

This code is still in development and their is still many bugs for me to fix. This only works if the colorscheme is deleted by the user or admin. If a user's account gets deleted thats where things will get dicey as there will be more then one colorscheme that will be destroyed as well as needing to change multiple different users using each of the various ones.

This could break the site itself if not handled correctly and might require backend administration which will most likely have to be done manually if things do indeed go wrong. This will require a lot of time and sweet on my part to make certain every users colorscheme is not null and is instead the Default color.

So any questions?


View full news

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...