Fix the CSS of this context menu.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a simple context menu and a screenshot of another context menu and I just want the colors and look copied.

https://github.com/burtonator/polar-bookshelf/tree/master/sandbox/contextmenu-style

Should take just a few moments to setup..

do you want a working demo of that library, or just the design?
Chlegou 5 months ago
@Chlegou .. I just need the CSS updated. You can literally just fork my branch , edit the CSS there, and we're done. Or you can just send me a jsfiddle or something.. up to you. I just need the CSS.
burtonator 5 months ago
ok i understand, by reading the official plugin docs, it seems easier, if we create the context menu with jquery, shall we give it a try?
Chlegou 5 months ago
awarded to Chlegou

Crowdsource coding tasks.

1 Solution

Winning solution

Hi there,

i tried as max as possible, to reach the image colors, and designed a copy of it.
also, i saw the icons on it, so i said, why not to make it possible to change colors also ;)

here is a codepen link: https://codepen.io/anon/pen/pKPxpW

the css control classes i wrote, are really simple, and code is structured and well formatted, you can play easily with them.

UPDATE

i have updated the pen, i tried the Ubuntu font, and it was it. you can see the result, it's the same.

also modified the separator, now it looks the same.

you can compare the first line, it's pretty the same.

NOTE:

colors can be adjusted in css, following the google color picker

link https://www.google.tn/search?q=color+picker&oq=color+picker&aqs=chrome..69i57j0l5.8159j0j7&sourceid=chrome&ie=UTF-8

i tried to make it as close as possible, and you can custom them using the colors palette

It's close.. the font isn't the same. https://github.com/burtonator/polar-bookshelf/blob/master/sandbox/contextmenu-style/menu.png here is the image in case it's now showing up. Also , looks like the separator is a bit too dark.
burtonator 5 months ago
could you provide it at least? how should i know the font from an image? for the separator, it's easy to edit, to adjust colors
Chlegou 5 months ago
I don't know the font... that's one of the challenges I have. It's the standard context menu from chrome on ubuntu if that's any help. I'm not a designer so CSS + fonts aren't my specialty...
burtonator 5 months ago
i have updated my solution, please check the newest design. i think this is what you want
Chlegou 5 months ago
The Alt-E color is too light vs the original.. but other than that it looks great. If you can resolve that I'll award.
burtonator 5 months ago
i have updated it again, now its looking the same for me, i used Google color picker https://www.google.tn/search?q=color+picker&oq=color+picker&aqs=chrome..69i57j0l5.8159j0j7&sourceid=chrome&ie=UTF-8 to chose colors, you can try other close colors if you want to.
Chlegou 5 months ago
View Timeline