Bodhi Guide - Creating Themes

Part 1. Wallpaper

So, let's get started. When you open the theme, find the default.edc file, and edit it to modify the wallpaper file.

The wallpaper, formatted as an .edj file, is more realistic because it scales well in all resolutions. The wallpaper consists of seven images, and they must look like they do here.

/*** DEFAULT WALLPAPER ***/
images { 
	 image: "bodhi-logo.png" COMP;
	 image: "bodhi-logo-effect.png" COMP; 
	 image: "bodhi-effect.png" COMP;
	 image: "topleft.png" COMP;
	 image: "topright.png" COMP;
	 image: "bottomleft.png" COMP;
	 image: "bottomright.png" COMP;
       }
	  group { name: "e/desktop/background";
	   data { item: "style" "2"; 
	        }
    parts {
	part {
	       name: "base"; 
	       type: RECT; 
	       description { 
	       state: "default" 0.0;
	       min: 800 600;
	       color: 0 0 0 255;
		    }
	         }
	part {
	      name: "effect"; 
	      description {
	      state: "default" 0.0;
	      min: 230 800; 
	      max: 230 800;
	      align:    0.5 0.0;
	      rel1 {
		 to: "cause";
		 offset:   -40     179;
	      }
	      rel2 {
		 to: "cause";
		 offset:   0     140;
	      }
	      image { 
	      normal: "bodhi-logo-effect.png"; 
                    }
		 } 

	      }
	part {
	      name: "cause"; 
	      description {
	      state: "default" 0.0;
	      min: 400 400; 
	      max: 400 400;
	      image { 
	      normal: "bodhi-logo.png"; 
                    }
		 } 
	      }
	part { 
	      name: "baseeffect"; 
	      description {
	      state: "default" 0.0;
	      min: 1680 1050; 
	      image { 
	      normal: "bodhi-effect.png"; 
                    }
		 } 
	      } 

	part {
	      name: "topleft"; 
	      description {
	      state: "default" 0.0;
	      max: 150 150;
	      align: 0.0 0.0;
	      rel1 {
		 relative: 0.0  0.0;
		 offset:   0     -1;
	      }
	      rel2 {
		 relative: 1.0  1.0;
		 offset:   0     -1;
	      }
	      image { 
	      normal: "topleft.png"; 
                    }
		 } 
	      } 
	part {
	      name: "topright"; 
	      description {
	      state: "default" 0.0;
	      max: 150 150;
	      align: 1.0 0.0;
	      rel1 {
		 relative: 0.0  0.0;
		 offset:   -0     -1;
	      }
	      rel2 {
		 relative: 1.0  1.0;
		 offset:   -0     -1;
	      }
	      image { 
	      normal: "topright.png"; 
                    }
		 } 
	      } 
	part {
	      name: "bottomleft"; 
	      description {
	      state: "default" 0.0;
	      max: 150 150;
	      align: 0.0 1.0;
	      rel1 {
		 relative: 0.0  0.0;
		 offset:   0     0;
	      }
	      rel2 {
		 relative: 1.0  1.0;
		 offset:   0     0;
	      }
	      image { 
	      normal: "bottomleft.png"; 
                    }
		 } 
	      } 
	part {
	      name: "bottomright"; 
	      description {
	      state: "default" 0.0;
	      max: 150 150;
	      align: 1.0 1.0;
	      rel1 {
		 relative: 0.0  0.0;
		 offset:   -0     0;
	      }
	      rel2 {
		 relative: 1.0  1.0;
		 offset:   -0     0;
	      }
	      image { 
	      normal: "bottomright.png"; 
                    }
		 } 
	      } 
	   } 
        } 

If, instead of using a wallpaper in the .edj format, we want to use a simple wallpaper, we need to modify the .edc file like this:

/*** DEFAULT WALLPAPER ***/
/** wallpaper original realizado por Agust gracias **/
images {
	image: "grill_dark_tiny_pattern.png" COMP;
}
group {
	name: "e/desktop/background";
	max: 1680 1050;
	parts {
		part {
			name: "background_image";
			description {
				state: "default" 0.0;
				image {
					normal: "grill_dark_tiny_pattern.png";
				}
			}
		}
	}
}

In this example, it is scaled to the resolution of 1680 x 1050. Rename it to grill_dark_tiny_pattern.png and keep it in the theme folder that we created.

In this way, we have our wallpaper for the theme.

Part 3. Theme Components

In the following image we see one of the components which is most important to creating the theme. Along with the file .edc, that component is build.sh. The script is.

#!/bin/sh
edje_cc $@ -id . -fd . default.edc -o default.edj

Or, [A-Noche.edj], which is the script that created the theme we are examining. Along with the build , the theme consists of 10 images and working windows.

/*** MOD: CALENDAR ***/
images {
	image: "E17_calendar.png" COMP;
}
fonts {
	font: "VeraMono.ttf" "VeraMono";

	font: "VeraBd.ttf" "VeraBold";
}
group {
	name: "modules/calendar/main";
	parts {
		part {
			name: "calendar";
			description {
				state: "default" 0.0;
				aspect: 1.0 1.0;
				aspect_preference: BOTH;
				rel1 {
					relative: 0.0 0.0;
				}
				rel2 {
					relative: 1.0 1.0;
				}
				image {
					normal: "E17_calendar.png";
				}
			}
		}
		part {
			name: "monthday";
			type: TEXT;
			mouse_events: 0;
			description {
				state: "default" 0.0;
				rel1 {
					relative: 0.1 0.2;
					offset: 0 0;
					to: "calendar";
				}
				rel2 {
					relative: 1.0 0.7;
					offset: -1 -1;
					to: "calendar";
				}
				color: 46 52 54 255;
				color_class: "module_label";
				text {
					text: "??";
					font: "VeraBold";
					size: 13;
					min: 1 1;
					fit: 1 1;
					text_class: "module_large";
				}
			}
		}
		part {
			name: "weekday";
			type: TEXT;
			mouse_events: 0;
			description {
				state: "default" 0.0;
				rel1 {
					relative: 0.4 0.7;
					offset: 0 0;
					to: "calendar";
				}
				rel2 {
					relative: 0.7 0.9;
					offset: -1 -1;
					to: "calendar";
				}
				color: 46 52 54 255;
				color_class: "module_label";
				text {
					text: "??";
					font: "VeraMono";
					size: 9;
					min: 1 1;
					fit: 1 1;
					text_class: "module_large";
				}
			}
		}
	}
}

As part of the modification of this theme, we also must add the image E17_calendar.png, and the sources VeraBd.ttf and VeraMono.ttf. Then we have our calendar. Also, we can see the image dia_grad.png, which is the base of the theme. Now we will see the images that the theme uses for entrance (login manager), which are exq-bglight.png, exq-dot-glow.png, exq-dot.png and exq-logo.png. We also see* the image grill_dark_tiny_pattern.png which I previously explained, is the image normally used for the wallpaper. But if you created a wallpaper like shown in Part 1 you will not need to use it.

The following images are the icons of the theme. You can always exchange them for the ones you like most, using the same sizes and names.

Now we will look at the images of the logo in the theme, as well as the highlight color of the items selected in the main menu.

The image used for the theme as a logo default is logo_white_128.png. When we select an item in the main menu, the first item in the sub-menu will change to logo_black_128.png. It would be this way:

Part 5. Compiling the Theme

When our theme is ready, we only need to compile it. If you use this theme as your base, compiling it is very easy.

Double click on build.sh.

If everything has gone well, an .edj theme file will be created. In this case, the resulting file will be A-Noche.edj. Keep in mind that if there is a creation error, it is because there is some error in the theme's contents.

There are some themes that use enlightenment_remote. For those themes, it is necessary to compile them differently. Open a terminal, and enter the following.

./build.sh
./build.sh && enlightenment_remote -restart

Thanks

I wish to give thanks to all those who have donated their time teaching me what I know. They are:

• Toma (Tom Haste) , Team Enlightenment.
• Rui Pais , Team Enlightenment and Leader OzO.
• Aubrey , Artist OzO.
• Luca di Marini (Darkmaster) , Artist and Leader Open GE.
• and Roxville Prince AMD (Team Elive) on which I have based many of my works.

I am also thankful to Parnote for his interest and for helping me to write this article. I hope that it serves him as an aid to creating themes, but mainly in understanding the operation of E. This is dedicated especially to Texstar, and to Smurfslover for his great work and the interest he has demonstrated in Enlightenment.