2026 Design Tool - CSS Edited to Look More Like Old Design Tool

JessicaAmber
Contributor II

Hello Zazzle fam! I have undertaken a little project to make the new 2026 Zazzle design tool have more of the look of the old tool. This required a lot of CSS editing. Here are some screenshots of what I have accomplished.

edited zazzle design tool - icons menu.png

Menus are now dark blue with white icons

edited zazzle design tool - personalise your design.png

edited zazzle design tool - selling options.png

Many screen elements like slider buttons have been scaled down, or even hidden altogether, to allow more tools to be visible without scrolling.

edited zazzle design tool - tint behind text input.png

The screen now dims behind the text input window, to make it easier to see

edited zazzle design tool - font selector.png

And perhaps my favourite edit, making the font categories smaller and all visible at the same time. No more scrolling needed to change categories!

To use this code, just install a browser extension like Stylebot for Firefox, and paste in the code from my GitHub page: https://github.com/aneuroticdoctor/Zazzle2026DesignToolCSSEdits/blob/main/Zazzle2026DesignTool

 

If you notice anything that needs fixing, leave a comment!

2 REPLIES 2

Connie
Honored Contributor II

It would be great if you could get the color dropdown to not cover up the design we're trying to work on, please.

JessicaAmber
Contributor II

BEFOREBEFORE         fill color selector AFTER v1.02.png

Thank you for the feedback @Connie , I've just made this edit per your request. I moved the window 50px to the left. I have shrunk down the color swatches, as well as the expand button and color picker. I've also made the additional colors headings smaller, and made the color grid slightly smaller with less padding.
Updates have been uploaded to the GitHub page. I hope this helps!