Ubuntu Forums Archive Viewer

HOWTO: rounded Gnome panel

Archived thread 108446 from Outdated Tutorials & Tips. Markdown source: Outdated_Tutorials_&_Tips/thread_108446_HOWTO_rounded_Gnome_panel.md

Original URL About this archive
#1

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: [IMG]http://www.gnomactheme.org/menu1.jpg[/IMG]

after: [IMG]http://www.gnomactheme.org/menu2.jpg[/IMG]

Save the image attached to this tread ora download here the image 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 theme ispired to Vision theme. The link to the new image is here. try this the problem of back jittering should go away.. That's all ubuntish folks. :cool:

#2

someone interesting in it?

#3

The attachement thumbnail is allmost invisble ;)

#4

The attachement thumbnail is allmost invisble ;)

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

#5

Better :)

#6

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!

#7

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 :(

#8

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 ;)

#9

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 :(

[SIZE="4"]try with this[/SIZE]

#10

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

#11

He knows ;)

Doh ](*,)

#12

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

#13

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

#14

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

#15

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

#16

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)".

#17

double posted, ignore it

#18

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).

#19

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!!!

#20

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.

#21

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?

#22

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.

#23

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)".

#24

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:

#25

And a direct link for the lazy here...

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

#26

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. [URL="http://ubuntuforums.org/gallery/showimage.php?i=1811&original=1&c=2"] [IMG]http://ubuntuforums.org/gallery/files/1/7/3/0/9/screenshot_93083.jpg[/IMG][/URL]

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

#27

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

#28

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.

#29

Why not just use an SVG? They scale perfectly.

#30

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.

#31

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.

#32

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

#33

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

#34

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)

#35

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.
  1. Then press Alt+Print screen (may also be Print scr, or maybe even Print)
  1. Open that image in GIMP (or whatever program you want)
  1. Copy an empty section of you panel (From this point on, I'll assume you know how to use your program)
  1. Paste that empty section repeatedly so that you cover the entire image.
  1. 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.
  1. 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.
  1. Finally, use the rectangle select tool, ADDING TO SELECTION ONCE AGAIN, and select the remaining portion of the image between your two ellipses.
  1. Cut your selection out.
  1. Erase the remaining bits of the image.
  1. Paste your selection.
  1. 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!

  1. 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:

[IMG]http://img81.imageshack.us/img81/2593/panel4kf.gif[/IMG]

#36

looks great! thanks.

#37

My 2 cents. :oops:

#38

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

#39

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.

#40

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.

#41

easy and nice tweaks, thanks everybody!

#42

BobSongs said: 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.

Thank you for my rounded Gnome panel, it's the best of the bunch. =D>