HOWTO: rounded Gnome panel [Archive]

View Full Version : HOWTO: rounded Gnome panel

lizardking

December 26th, 2005, 06:32 AM

I have noticed in some themes that the gnome panel are so sweet rounded.
So searching I found the way to "round " it..
This is the effect:

before:
http://www.gnomactheme.org/menu1.jpg

after:
http://www.gnomactheme.org/menu2.jpg

Save the image attached to this tread ora download here the image (http://www.gnomactheme.org/panelbg.png) and save it in ~/.themes.

Select the panel you want to round.(preferibily a small panel 24 25 px)
then right click --> Property

The click in the second tab (background it think in English)

Click the last radio button (Image for Background) and Select from ~/.themes the image previously taken from here

Click ok and you are done.

PS. Please help from some art guru to helpme in: change the milk color in a clearlook gray default color and cancel the horrible jitterin under the date in the panel.
I found a solution: antoher png image to put there used by my Human Vision (http://www.gnome-look.org/content/show.php?content=33581&vote=good&tan=4187673) theme ispired to Vision theme. The link to the new image is here (http://www.gnomactheme.org/panel-bg.png).
try this the problem of back jittering should go away..
That's all ubuntish folks. :cool:

lizardking

January 10th, 2006, 05:23 AM

someone interesting in it?

Artificial Intelligence

January 10th, 2006, 05:47 AM

The attachement thumbnail is allmost invisble ;)

lizardking

January 10th, 2006, 05:53 AM

The attachement thumbnail is allmost invisble ;)

now? I added a link to my site...

Artificial Intelligence

January 10th, 2006, 06:02 AM

Better :)

poofyhairguy

January 10th, 2006, 06:51 AM

Very Nice! Thanks!

Another great eye candy guide to add to the collection here. And its a great addition- the boring Gnome panel needs some "shine."

It got it!

TheForumTroll

January 10th, 2006, 01:50 PM

If you look closely at your picture you'll see that it has a flaw in the bottom part (some white/black stuff). If i use it in gnome it looks very bad :(

NoWhereMan

January 10th, 2006, 01:58 PM

If you look closely at your picture you'll see that it has a flaw in the bottom part (some white/black stuff). If i use it in gnome it looks very bad :(

PS. Please help from some art guru to helpme in: change the milk color in a clearlook gray default color and cancel the horrible jitterin under the date in the panel.
That's all ubuntish folks.

He knows ;)

lizardking

January 10th, 2006, 02:39 PM

If you look closely at your picture you'll see that it has a flaw in the bottom part (some white/black stuff). If i use it in gnome it looks very bad :(

try with this (http://www.gnomactheme.org/panel-bg.png)

NMUrugbysteve

January 10th, 2006, 02:53 PM

That first one would be SOOO nice if someone could fix it a bit, thanks for this really nice looking, easy tweak.

TheForumTroll

January 12th, 2006, 09:20 PM

He knows ;)

Doh ](*,)

JmSchanck

January 12th, 2006, 09:49 PM

I took the idea and ran with it a bit, my version is attached

jazzi

January 13th, 2006, 04:46 AM

That first one would be SOOO nice if someone could fix it a bit, thanks for this really nice looking, easy tweak.

ya,it looks better,but also spend a little more sources

Cybolic

January 13th, 2006, 07:03 AM

A thing to remember when making backgrounds for the panel, is that transparent areas in your image will actually be transparent on the panel, showing the background beneath!
This allows for some rather nice effects like a smooth transition from desktop to panel, and also "dent" and "lift/highlight" effects.... remember, Gimp is your friend :D

BIGtrouble77

January 23rd, 2006, 06:55 PM

png's have issues as panel backgrounds. Save it as a gif in gimp and it should work perfectly.

LaSSarD

January 23rd, 2006, 09:23 PM

There's a link at gnome-look to http://xpedition.mine.nu/theme/macosx.html
At this site, click at the symbol beside "gnoMAC Theme Pack (by lizardking)".

LaSSarD

January 23rd, 2006, 09:26 PM

double posted, ignore it

Fisheke

January 23rd, 2006, 10:44 PM

Noone would happen to be interested in making an svg version of this gradient? I'm too lazy and a 24px panel is too small for me :p. (no really, i just can't seem to get it just the same way).

paul cooke

January 23rd, 2006, 11:14 PM

gnoMacTheme Pack Os-x like theme for gnome

your link goes to that page, on that page, you get taken to gnome look for the download link, which takes you back to the first page... circularity complete, BUT no theme file to download... :( where IS it????????? I need my eye candy!!!

BobSongs

January 30th, 2006, 08:41 PM

I hand-made this gradient in one of my favorite GNU/Linux art programs: Kolourpaint. Kolourpaint is very similar to MS Paint, but it's slightly better. It's nice to have an environment to work in where all the keystrokes are similar.

It's an even gradient, hand tweaked down shades of gray of 2 points per line. Hope you like it. It has a height of 25 pixels. It's the same width as the first offering. The last 3 pixel colors are dark gray, white then black. If someone wants just the grandient I can provide that too.

Bob

Note: it's that tiny, thin gray line just below. Click it, and right click the image that shows up in a new browser instance. Save in your documents folder.

krusbjorn

January 30th, 2006, 08:55 PM

I really like the look of this, but my menubar (Applications - Places - System) goes black when I apply the new background image. Anyone have the same problem? Solution?

fannymites

January 30th, 2006, 09:26 PM

I'm guessing you are either using kwin as your window manager or you are using cairo enabled clearlooks in breezy. I can't find a way to fix it.

LaSSarD

January 30th, 2006, 09:30 PM

your link goes to that page, on that page, you get taken to gnome look for the download link, which takes you back to the first page... circularity complete, BUT no theme file to download... :( where IS it????????? I need my eye candy!!!

You already said that. And I've already answered.

There's a link at gnome-look to http://xpedition.mine.nu/theme/macosx.html
At this site, click at the symbol beside "gnoMAC Theme Pack (by lizardking)".

lizardking

January 31st, 2006, 05:51 AM

your link goes to that page, on that page, you get taken to gnome look for the download link, which takes you back to the first page... circularity complete, BUT no theme file to download... :( where IS it????????? I need my eye candy!!!
The targz with the themes is in the GNU
One Click on the GNU and you are done.:cool:

RaptorRaider

January 31st, 2006, 06:14 AM

And a direct link for the lazy here (http://xpedition.mine.nu/theme/macosx.tar.gz)...

Why would kwin or "Cairo enabled Clearlooks" have trouble with what is essentially a picture (or am I completely wrong here)?

mcduck

January 31st, 2006, 06:18 AM

Noone would happen to be interested in making an svg version of this gradient? I'm too lazy and a 24px panel is too small for me :p. (no really, i just can't seem to get it just the same way).
That won't help. I tried it, and SVG images aren't scaled in panels :(

But if you are intrested, I'll add here my panel backgrounds.

They are for 50px panels on 1152*864 resolution. If you like them but use different resolution, tell me and I'll try to find time to make new versions.

http://ubuntuforums.org/gallery/files/1/7/3/0/9/screenshot_93083.jpg (http://ubuntuforums.org/gallery/showimage.php?i=1811&original=1&c=2)

By the way, If you are having troubles with gnome menu's background and you are using Clearlooks-cairo, there's a new version of it downloadable in the Clearlooks-Cairo thread that fixed this problem for me at least :D

lizardking

January 31st, 2006, 06:29 AM

I really like the look of this, but my menubar (Applications - Places - System) goes black when I apply the new background image. Anyone have the same problem? Solution?
U have to take the last version of clearlook cairo the problem of black menu is now solved

last version in deb format here (http://www.ubuntuforums.org/attachment.php?attachmentid=5650&d=1138489103)

fannymites

January 31st, 2006, 06:59 AM

Major problem is that when using kwin as window manager, changing the background image messes up the panel, another one appears with the proper one underneath it.
Anyone know a workaround for this?

[EDIT] Nevermind, I sorted it.

MighMoS

January 31st, 2006, 01:00 PM

Why not just use an SVG? They scale perfectly.

mcduck

January 31st, 2006, 03:52 PM

Why not just use an SVG? They scale perfectly.
How you get them to scale? I made my panel backgrounds with Inkscape, and they are svg, but won't scale on my panels. I have to make the panel exactly same size as the image or it will cut or repeat on some side :(

edit: That one you made doesn't scale either.

MighMoS

January 31st, 2006, 05:56 PM

How you get them to scale? I made my panel backgrounds with Inkscape, and they are svg, but won't scale on my panels. I have to make the panel exactly same size as the image or it will cut or repeat on some side :(

edit: That one you made doesn't scale either.
Sorry, I should have been more clear. They have the ability to scale perfectly (damn English language and it not meaning what I want it to). I just thought that SVGs would be a better option than pngs, because if someone has a panel that isn't the same size, then they have the ability to make it fit perfectly, unlike a png which would result in quality loss.

Sorry for the confusion.

mcduck

January 31st, 2006, 08:02 PM

Now I got understand what you meant :)

I wonder why I didn't even think about that. I'll attach the current version SVG's here.

(this is for 50x1152 panels, if you need other size, you can either edit the SVG file to fit your panels yourself, or send me a message and I'll do it for you and add the images here. I just don't feel like doing versions for all different possible resolutions and panel sizes unless I know somebody is going to use them..)

If you didn't read the whole thread, you can see my panel pics here: http://www.ubuntuforums.org/showpost.php?p=694768&postcount=26

escape

February 13th, 2006, 11:55 PM

mcduck

April 4th, 2006, 04:30 AM

You guys, the problem is the image is only 22 pixels high. If you're like most people, and using the minimum 23 pixel height panel, then gnome adds the default color (white-ish) to the bottom for the last pixel. So, just open up the image in gimp and make the image 23 pixels high, instead of 22. Make the 23rd pixel on the bottom and make it the same grey as the 22nd pixel. Also, making the top rounded edges actually transparent instead of black makes it better too. Here's a temporary imageshack host of it in case you don't want to do it yourself.

http://img149.imageshack.us/img149/1084/panelbg66xy.png
At least in dapper there is option for scaling the background images in panels.. Open gconf-editor, and go to apps/panel/toplevels, find your panel and under backgrounds there are options for 'fit' (scale the image, retaining the aspect ratio of the image) and 'stretch' (scale the image, don't retain aspect ratio). There's also 'rotate' if you have vertical panels :)

Also, gnome doesn't add default color if the image is wrong size (and you don't enable scaling), instead it will repeat the image..

Then, a notice, transparent images are broken in Gnome 2.14.0, all transparent areas become yellow and opaque areas get a blue tint. The bug as already been reported, but don't expect developers to hurry with a fix for this kind of things :rolleyes:

It works anyway, just don't make big transparent areas, and if the blue tint annoys you, reduce the blue color channel of your image a bit.

I'll also attach two new rounded panel images (the ones I'm using right now, as the old transparent ones look horrible with Gnome 2.14.0)

stalefries

April 4th, 2006, 05:59 PM

For all you guys out there who want your current panel to have rounded corners, here's what I did. This will solve all your problems about not being the right size.

1. Use Ctrl+Alt+Tab to give one of your panels focus.

2. Then press Alt+Print screen (may also be Print scr, or maybe even Print)

3. Open that image in GIMP (or whatever program you want)

4. Copy an empty section of you panel (From this point on, I'll assume you know how to use your program)

5. Paste that empty section repeatedly so that you cover the entire image.

6. Using the ellipse selection tool, make a selection that touches the top, bottom, and left sides of your image. Make sure your selection is how you want the rounded edges to look like.

7. Do the same thing on the other end, MAKING SURE THAT THE "ADD TO SELECTION" OPTION IS SELECTED. Otherwise, all your labors will be pointless.

8. Finally, use the rectangle select tool, ADDING TO SELECTION ONCE AGAIN, and select the remaining portion of the image between your two ellipses.

9. Cut your selection out.

10. Erase the remaining bits of the image.

11. Paste your selection.

12. Save the image.

Note: Some people say that you should save it as a gif, instead of a png. For me, using a png cause my gnome-panel to crash. Of course, it recovered immediately, but then it kept on telling me (until my panel finished loading) that it would kill itself, since a gnome-panel was already running. This didn't affect it in any way afterwards, though.
Note #2: I just retried it with a gif, and no panel chrashing!

13. Now, follow the previous directions on how to tell gnome-panel to use your image.

There you go! That should give you a fancy-pants gnome-panel, with rounded edges to boot!

For those who care (and to follow precedent), here's mine:

http://img81.imageshack.us/img81/2593/panel4kf.gif

tr333

April 5th, 2006, 10:07 PM

looks great! thanks.

halfvolle melk

April 13th, 2006, 12:45 PM

My 2 cents. :oops:

nim278

April 21st, 2006, 01:48 AM

Slick for the top panel... here's one to match for the bottom panel 8-)

paul cooke

April 21st, 2006, 02:22 AM

hmmm, me thinks it would be far easier if the code that displayed the panel background did it in three three parts, a left image, a middle image (repeated as necessary) and a right image... all this hackery at the moment is wasted when you change display size as you would require a different image for each display width...

in fact, it would be even better if the panel code used something like an svg image that it could distort as required to fit the new display size, then you could change the panel height easily as well.

TheJaymo

September 28th, 2006, 08:42 PM

I've scaled the pictures slightly. The smaller picture is suited to a panel of height about 25 pixels. and the Bigger picture is suited to a panel of around 50 pixels. But all you need to do is open them up in the GIMP and scale them to whatever size you want. The pictures are attached.

Lker

October 9th, 2006, 09:43 AM

easy and nice tweaks, thanks everybody!

jpyanowski

November 12th, 2006, 09:38 PM