Since yesterday’s post was on a serious matter, I need to catch up on what I was planning on doing this week.

First, you need to have GnoMenu downloaded before you even get started with trying to make your own theme. To each theme, there is 3 parts that are the most customizable:

  1. The Start Button
  2. The Menu itself
  3. The Icons used in the Menu

The first part of today will be making your own start button. The first question you must ask yourself is: do you like or dislike Compiz? (You know, where you have all those cool desktop effects going on and it uses up a little bit of system resources when it runs.) The reason you ask yourself this is because it will determine how you make your start button. If you like the idea of a start button that “sticks out” from the top (or bottom if your panel is on the top) then you will have to have Compiz (or visual effects, and it will continued to be called compiz throughout) enabled, even if its the minimum effects. If you like the idea of the start button just being in the panel and not protruding from the panel (like the default menu icon), you don’t have to have compiz enabled at all.

Example 1:
Button With a Top
button with a top

There is an easy way to get the “depressed” and “glow” aspects of the buttons. (Glow is used when you hover the mouse over the button, and Depressed is used when you have actually pressed the button and brought up the menu.) Open the image in your favorite art program (mine happens to be GIMP) and go to the menu where you can change the brightness level of the image (In GIMP you go to Color>>Brightness-Contrast Tool). For the Glow, set the brightness to 50 (the default should be 0), and for Depressed, set the brightness to -50. Be sure to save each as a separate entity with the correct name. When all is said and done, you should have a total of 4-7 images.

I know, I know, I skipped a few steps. Let me back track a little. Pick an image that you wouldn’t mind using as a start button. If the image is “square”, it will be easier to make into one that will “stick out” of the panel. (square: the width and height are equal, not necessarily in the shape of a square). If you do not want the image to “stick out” then square or rectangle will work (preferably a rectangle with greater width than height).

I will use the same image from the previous example for one that will not stick out and such. (I must also say, that you must chose the height of your panel because the image will squish or stretch of the panel is too short or too tall. Example 1′s panel height is 34pixels, Example 2′s panel height is 39pixels.)

  1. Take the image you want and scale it down to size
  2. save image as start-here.png
  3. select save as, and save it as themepreview.png
  4. change the brightness to -50, save as start-here-depressed.png
  5. undo, change brightness to 50, save as start-here-glow.png

Example 2:
Button Without a Top
button without a top

And now, for the little bit of coding that goes along and tells GnoMenu how to handle your new start button! This is one file that will be saved as themedata.xml

<?xml version="1.0" ?>
<content type="Button">
<theme Top="0" id="HasTop">
<ContentData Name="Black22" Author="linuxgurl13" Copyright="GPL" id="Contentdata"/>
</theme>
</content>

Just change things as appropriate (Name of the Button, put your name as the author, and chose what kind of copy-write you want it to have). Compress all the files (I would suggest you create a folder with the name of the button and put all the files in it) into a tar.gz file. Right click on GnoMenu and select Preferences. Select Panel Button on the left menu. Click on the + button, and select your archive to install it. You will have the restart GnoMenu to see the changes that have taken place. Then you can select your button! YAY!

For the Start Button with a top,you will have 3 more files. The top of the button needs to be approximately the top 10pixels of the image. You will have to cut the top off and paste it into its own new file. You can either do this before or after you have changed the brightness of the original image. Doing this will take a little extra time.

  1. top of button that is the original: start-here-top.png
  2. top of button that is depressed: start-here-top-depressed.png
  3. top of button that is glow: start-here-top-glow.png

Take the same themedata.xml file above and change 0 to 1 where is says: “theme Top=”0″ id=”HasTop” (For those who don’t know 0=False, 1=True in this case)

And now, I will leave you with visual representations of the button(s) I worked on. (Left-to-Right: No Top, Has Top)

has top = 0     has top = 1

I said the first part of the day? oh my. That’s it for today. It took me over an hour to write and take screen shots, as well as that one button from scratch. If you like the one with the top, check out my gnome-look contributions on the left. You can download it from there.