Edje Chop-Shop.

21Jul08

Welcome to the Edje chop-shop. Lets dive right into it!

First, let make a new theme. Now, Ive always admired my own menu item effect on Grunge theme. What can I say, Its neat. Ive also heard the subtle effect on Ceriums menu items is kind of cool too! Aren’t I just great!? Anyway. Lets look at how to chop bits from themes and mash them together.

I do try my hardest to mention ‘theme engines’ because it hinders creativity and locks designers in to certain things. So I URGE you to try different things and think outside the ‘box’ in terms of designing. If you make another Vista Aero duplicate, I will cry. What I’m getting at with the engine idea, is that every theme creates an ‘Engine’ to do a certain thing to a certain widget. You also get to specify the image/appearance of the widget. You can very easily copy the edc group to your theme and replace the images. Lets do this to Cerium.

So here is the Grunge menu. You can see the splat there, after it shoots in from the centre. Rad.

So lets take the menu item effect from Grunge and put it directly into the Cerium menu item. For a look at Ceriums menu, take a gander here…

Lets open up Grunge (via edje_decc gunge.edj) and open up the default_menu.ed.

Also, open up Cerium (same as before but with cerium.edj) and again, open the default_menu.edc.

Next, navigate down the Grunge menus edc to this…

group {
   name: "e/widgets/menu/default/label";
      parts {
      ...
      }
}

This is the Menu items label for Grunge. Now, head over to Ceriums menu edc and find this…

group {
   name: "e/widgets/menu/default/label";
      parts {
      ...
      }
}

Pay very careful attention to what images are used by the theme you want to edit, or supply your own. Also, the font used in the Text part will need to be the same as your new theme.

Now paste the whole Grunge group section over the Cerium group section. Change the font to the font you are using in the new theme and use a different image, that’s provided in the theme. It might look a little like this…

group {
   name: "e/widgets/menu/default/label";
   parts {
      part {
	 name:          "title_bar";
	 mouse_events:  0;
	 description {
	    state:    "default" 0.0;
	    visible:  0;
	    min:      1 1;
	    fixed:    1 1;
	    rel1 {
	       relative: 0.8  0.5;
	       offset:   0    0;
	       to:       "e.text.label";
	    }
	    rel2 {
	       relative: 0.8  0.5;
	       offset:   -1   -1;
	       to:       "e.text.label";
	    }
	    image {
	       normal: "e-light.png";
	    }
	    color: 255 255 255 0;
	 }
	 description {
	    state:    "active" 0.0;
	    visible:  1;
	    min:      85 30;
	    rel1 {
	       relative: 0.0  0.0;
	       offset:   20    0;
	       to:       "e.text.label";
	    }
	    rel2 {
	       relative: 0.0  1.0;
	       offset:   20   -1;
	       to:       "e.text.label";
	    }
	    image {
	       normal: "e-light.png";
	    }
	    color: 255 255 255 255;
	 }
      }
      part {
	 name:           "e.text.label";
	 type:           TEXT;
	 effect:         SOFT_SHADOW;
	 mouse_events:   0;
	 description {
	    state: "default" 0.0;
	    rel1 {
	       relative: 0.0  0.0;
	       offset:   4 4;
	    }
	    rel2 {
	       relative: 1.0  1.0;
	       offset:   -6 -4;
	    }
	    color: 255 255 255 255;
	    color3: 0 0 0 128;
	    color_class: "menu_item";
	    text {
	       text:     "Item Label";
	       font:     "Edje-Vera";
	       size:     10;
	       min:      1 1;
	       align:    0.0 0.5;
	       text_class: "menu_item";
	    }
	 }
	 description {
	    state: "active" 0.0;
	    inherit: "default" 0.0;
	    color: 255 255 255 255;
	    color3: 0 0 0 255;
	 }
      }
   }
   programs {
      program {
	 name:    "go_active_pre";
	 signal:  "e,state,selected";
	 source:  "e";
	 action:  STATE_SET "active" 0.0;
	 target:  "title_bar";
	 target:  "e.text.label";
      }
      program {
	 name:    "go_passive_pre";
	 signal:  "e,state,unselected";
	 source:  "e";
	 action:  STATE_SET "passive" 0.0;
	 target:  "title_bar";
	 target:  "e.text.label";
      }
   }
}

As you can see, we’re left with a Grunge label with the Grunge Text as well. Alternately, you could just copy and paste the part{} and the programs{} that might operate that specific part. Here’s a little taste of what that’s like…

Remember to obey theme licensing as this is technically using somebody elses work. A general rule of thumb is to give credit where credit is due. Even if you’re using a license like 3-Clause BSD, it is nice to mention the theme you’ve taken a part from, even if its just a little mention in the EDC code. Themes license with a Creative Commons license MUST include the other authors name as they technically contributed to your work. Remember to respect your fellow themers work!

So there you have it. How to swap out the ‘engine’ of an E17 themes widget and make a Frankenstein theme. Do try to be original with your work, but somethings have already been done quite well and you can save yourself a lot of time by borrowing ideas from others.

Enjoy!

Toma

Advertisements


2 Responses to “Edje Chop-Shop.”

  1. 1 MarcoL

    Hi,
    I installed your Grunge theme 2 weeks ago. Sincerely, I think this is the most beautiful theme I’ve ever seen on every O.S. i tried. I love it.

    Keep on your good work

    Bye bye from Italy


    Marco


  1. 1 R.I.P: GTK. « Adventures in Edje

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: