Jump to content

Photo

Problems porting an old theme to e20, can anyone assist?

themes e19 e20

  • Please log in to reply
31 replies to this topic

#21 birdmun

birdmun

    Member

  • Members
  • 269 posts
  • LocationWabash, IN

Posted 01 February 2016 - 09:12 AM

hippytaff

 

quikndrtee_zps40xgnhax.png

 

I couldn't find for sure which way the m was supposed to rest. I picked one and ran with it. The base image is in mbert's github and I found introducing moksha desktop here on the forums and people offered up different ideas on how the logo should look. I hacked the above image together online, just cause.





A big thank you to everyone who contributes to Bodhi Linux


#22 hippytaff

hippytaff

    Member

  • Members
  • 1269 posts
  • LocationWales, UK

Posted 01 February 2016 - 10:40 AM

Sweet...awesome! Maybe Jeffers could package it with the themes for the next release and put it in the repo for download if it's not already.

 

Jeff?


Hippytaff - Trying to understand stuff since 1979


#23 Duma

Duma

    Artist

  • Members
  • 2392 posts
  • LocationRivalta (TO) - Italia

Posted 01 February 2016 - 03:11 PM

Yes, I've already done so, but the damn thing is very long. I hoped that somebody would say something like "hey, I know this" :)

A program that compare file that I've used is meld. I suggest it because you can also edit and save the file.
 
By the way, here's a quick and dirty piece of code that you can add to your "e/fileman/default/window/main" group:
parts (insert as lasts):
part { name: "e.swallow.favorites"; type: SWALLOW;
         description { state: "default" 0.0;
            align: 0. 1.0;
            rel1.offset: 4 4;
            rel1.to: "region";
            rel2.offset: 4 -5;
            rel2.relative: 0.0 1.0;
            rel2.to: "region";
            fixed: 1 0;
         }
      }
      part { name: "e.swallow.content"; type: SWALLOW;
         description { state: "default" 0.0;
            rel1.offset: 4 4;
            rel1.to: "region";
            rel2.offset: -5 -5;
            rel2.to: "region";
            align: 1.0 1.0;
         }
         description { state: "fav" 0.0;
            inherit: "default" 0.0;
            rel1.relative: 1.0 0.0;
            rel1.to_x: "e.swallow.favorites";
         }
      }
      part { name: "e.swallow.toolbar"; type: SWALLOW;
         description { state: "default" 0.0;
         }
         description { state: "tb_top" 0.0;
            align: 0.5 0.0;
            rel1.offset: 4 4;
            // XXX: this is a bug workaround. should be -4 4;
            rel2.offset: -9 4;
            rel2.relative: 1.0 0.0;
            fixed: 0 1;
         }
         description { state: "tb_bottom" 0.0;
            align: 0.5 1.0;
            rel1.offset: 4 -5;
            rel1.relative: 0.0 1.0;
            // XXX: this is a bug workaround. should be -4 -5;
            rel2.offset: -9 -5;
            fixed: 0 1;
         }
      }
      part { name: "region"; type: SPACER;
         description { state: "default" 0.0;
         }
         description { state: "tb_top" 0.0;
            inherit: "default" 0.0;
            rel1.relative: 0.0 1.0;
            rel1.to_y: "e.swallow.toolbar";
         }
         description { state: "tb_bottom" 0.0;
            inherit: "default" 0.0;
            rel2.relative: 1.0 0.0;
            rel2.to_y: "e.swallow.toolbar";
         }
         description { state: "tb_left" 0.0;
            inherit: "default" 0.0;
            rel1.relative: 1.0 0.0;
            rel1.to_x: "e.swallow.toolbar";
         }
         description { state: "tb_right" 0.0;
            inherit: "default" 0.0;
            rel2.relative: 0.0 1.0;
            rel2.to_x: "e.swallow.toolbar";
         }
      }
and programs
 program {
         signal: "e,favorites,enabled"; source: "e";
         action: STATE_SET "fav" 0.0;
         target: "e.swallow.content";
      }
      program {
         signal: "e,favorites,disabled"; source: "e";
         action: STATE_SET "default" 0.0;
         target: "e.swallow.content";
      }
      program {
         signal: "e,toolbar,left"; source: "e";
         action: STATE_SET "tb_left" 0.0;
         target: "e.swallow.toolbar";
         target: "region";
      }
      program {
         signal: "e,toolbar,right"; source: "e";
         action: STATE_SET "tb_right" 0.0;
         target: "e.swallow.toolbar";
         target: "region";
      }
      program {
         signal: "e,toolbar,top"; source: "e";
         action: STATE_SET "tb_top" 0.0;
         target: "e.swallow.toolbar";
         target: "region";
      }
      program {
         signal: "e,toolbar,bottom"; source: "e";
         action: STATE_SET "tb_bottom" 0.0;
         target: "e.swallow.toolbar";
         target: "region";
      }
      program {
         signal: "e,toolbar,disabled"; source: "e";
         action: STATE_SET "default" 0.0;
         target: "e.swallow.toolbar";
         target: "region";
      }
Let me know! :D
Se sei italiano e interessato a Linux, clicca qui!

#24 mbert

mbert

    Member

  • Members
  • 20 posts

Posted 02 February 2016 - 04:24 PM

Let me know! :D

Hey, thank you very much! I have actually found pretty much the same solution to this and was just about to share this here :)
I ported some of rpil's code (from his derivation of the Vulcan theme) which essentially contains the same stuff.

I am going to release prerelease 0.8 of the Vulcan Retro and blingbling themes on my github account and e17-stuff.org. There are of course still some open issues, but I've been using those both (in particular blingbling) for some weeks now and I really enjoy them.

 

From the e-dev mailing list I have learned that there have been quite a few changes to the way colors are dealt with (they propose to introduce color schemes the same way as in the default theme which does make sense will involve quite a bit of work). Hence there are still quite a few colors set from the default theme that have not been overridden in the themes (basically because for each of them I spend a LOT of time searching and I simply don't have the time to do this, also in some cases this actually looks pretty good). I'll publish more verbose lists of known issues on github when I release them. 

 

I could do with some contributions. For instance I am not very good at image editing, and the background image for selected menu entries does not look very good. In many places the blue glow effect from the default theme shows (e.g. in the pager, task list, also font colors, as mentioned above). Also there are widgets not yet styled, e.g. the system dialog, the digital clock. 

 

I will now slow down a little bit. As said, the themes look good (enough) for me, and due to the 80–20 rule future enhancements will come at a much higher price which I will probably not be able to invest (need to make a living). 

 

Here's two more screenshots of the two themes:

 

Vulcan Retro with file manager (note the blue-glow digital clock and highlight of the active element in the shelf):

wmnsuVn.jpg

 

Blingbling with big analog clock and taskbar/pager on desktop (note the sub-optimal background graphic for the active menu element and the glow-blue highlight of active desktop and window)::

BONK8Zh.jpg



#25 mbert

mbert

    Member

  • Members
  • 20 posts

Posted 02 February 2016 - 06:49 PM

I've published them now on e17-stuff:



#26 Duma

Duma

    Artist

  • Members
  • 2392 posts
  • LocationRivalta (TO) - Italia

Posted 02 February 2016 - 08:47 PM

Congratulation mbert! I hope you will continue with theming (ELEMENTARY porting needs you! :P).

Feel free to ask if you need more support!


Se sei italiano e interessato a Linux, clicca qui!

#27 mbert

mbert

    Member

  • Members
  • 20 posts

Posted 02 February 2016 - 09:45 PM

Congratulation mbert! I hope you will continue with theming (ELEMENTARY porting needs you! :P).

Feel free to ask if you need more support!

 

Thank you very much again!

 

There are a couple of "classic" themes that I would really like to see on e20 (SpiffE and ShinyMetal are on top of my list). However it seems like a "from the scratch" approach of deriving from the standard theme will probably be a better idea.

 

I must say that from what I have seen I am not terribly happy with the way it is in e20. It seems like they're in middle of moving more and more into ELEMENTARY. Right now it looks like one has to repeat oneself far too often.

 

Anyway for now I'm happy with those two I have. Usually I do stuff like this during the christmas break :)



#28 birdmun

birdmun

    Member

  • Members
  • 269 posts
  • LocationWabash, IN

Posted 03 February 2016 - 12:54 PM

If you wanted to change the blue glow to another color and if the glow is part of the image, load the image in to an image editor, the GiMP, do a color to alpha on the blue, the blue will become transparent and you can place a different colored layer underneath your current layer, merge/flatten, and export. Your blue glow will be changed/gone.



#29 mbert

mbert

    Member

  • Members
  • 20 posts

Posted 03 February 2016 - 02:55 PM

If you wanted to change the blue glow to another color and if the glow is part of the image, load the image in to an image editor, the GiMP, do a color to alpha on the blue, the blue will become transparent and you can place a different colored layer underneath your current layer, merge/flatten, and export. Your blue glow will be changed/gone.

In many cases it is indeed images, and I might try this. Actually I rather like this color in many places, e.g. in the pager this looks pretty charming.

However I will probably still work on  another update where the tasks applet is styled. I played around with  it a little bit (used the code from the 'default' theme replacing some images), but the result is not good yet. If I use the 'blingblng' button image for unselected tasks, I still get this strange black frame around it which looks rather bad. Also I have not found out how to style the currently selected task, there does not seem to be an image used, but I haven't really had enough time to dig deeper into this. 



#30 Duma

Duma

    Artist

  • Members
  • 2392 posts
  • LocationRivalta (TO) - Italia

Posted 04 February 2016 - 07:34 PM

In many cases it is indeed images, and I might try this. Actually I rather like this color in many places, e.g. in the pager this looks pretty charming.
However I will probably still work on  another update where the tasks applet is styled. I played around with  it a little bit (used the code from the 'default' theme replacing some images), but the result is not good yet. If I use the 'blingblng' button image for unselected tasks, I still get this strange black frame around it which looks rather bad. Also I have not found out how to style the currently selected task, there does not seem to be an image used, but I haven't really had enough time to dig deeper into this.

Let me describe for you tasks.edc file from default theme, would you?
 
you  can find two groups - "e/modules/tasks/item" and "e/modules/tasks/item_vert" -: the first manages the widget for horizontal layout, the second one for the vertical layout. Easy ;) .
 
Dig into the "e/modules/tasks/item" you can find all these parts, ordered from the background and go until the foreground:

  • "sel_shadow", an image (this file: shadow_rounded_horiz.png "shadow_rounded_horiz"  ). Nothing particular to say: it has the mouse_events: 0; option. Useful because on this part mouse doesn't send signals.
  • "glow" (glow_small.png glow_small.png). The blue glows that appear when a task is selected. Note that it has three state. A state named "default" (all the parts must have it), a state named "visible" and a state named "hilighted". the inherit: "default" 0.0 option on the top two state means: "Hey copy all the setting from "default" 0.0 state, exept from the following". So what it changes from "default", "visible" and "hilighted"? The color that will be multiplied on the image layer.
    • On "default" the 4 layer of the glow.png image will be multiplied for 255 (on a 0-255 scale, so it's the 1, multiplying for 1 make a number equal to itself :D ) 255 255 and 0. Note the last one is the alpha channel, so the alpha layer (the transparency layer) will be multiplied for 0, will be make it transparency.
    • On "visible" alpha channel will be multiplied for 128, semitransparency!
    • On "hilighted" alpha channel will be multiplied for 255, full solid colors!

How glow part swithches between all the states? It uses the programs on line 289-303:

     program {
         signal: "e,state,unfocused"; source: "e";
         action: STATE_SET "default" 0.0;
         target: "clip";
         target: "sel_clip";
         target: "glow";
      }
      program {
         signal: "e,state,focused"; source: "e";
         action: STATE_SET "hilighted" 0.0;
         transition: DECELERATE 0.2;
         target: "glow";
         after: "focus2";
      }
      program { name: "focus2";
         action: STATE_SET "visible" 0.0;
         transition: SINUSOIDAL 0.3;
         target: "glow";
      }

The first program is triggered by the signal "e,state,unfocused": when a window gets unfocused, the program do the action STATE_SET "default", so changes the state of the TARGET parts to "default" 0.0.

The second program is triggered by the signal "e,state,focused": when a window gets focused, the program on 0.2 seconds change the state of TARGET part "glow" to "hilighted" and on 0,3 second to "visible", to get a blinking effect. Note the "after" option on the second program, after it does its action, launch the program named "focus2", the third.

  • "sel_base" (vgrad_med_dark.png vgrad_med_dark.png), the base of the task button. Note the clip_to option that refers to a "sel_clip" part. "Clipping" a part to another makes something similar at multiplying the two parts. The RGBA channels (and other state like visible) of the part clipped will be multiplied by the RGBA channels of the "clip_to" part (in this case, sel_clip).
  • "sel_bevel" (bevel_out.png bevel_out.png), parts the compose the base of the task button, the "bevel effect". Also clipped by "sel_clip" part.
  • "sel_label" a text part that display the name of the selected window. Two states: default and clicked. You see the change of color between the two states (mainly the color1: (the base), color2 and color3 point to shadow and border of the text - change only the alpha channel.). Also clipped by "sel_clip" part

I'll suspend the sequence of the parts to focus your attention on "sel_clip" part, the last one (line 248):

part { name: "sel_clip"; type: RECT;
         description { state: "default" 0.0;
            rel1.offset: -20 -20;
            rel2.offset: 19 19;
            visible: 0;
         }
         description { state: "selected" 0.0;
            inherit: "default" 0.0;
            visible: 1;
         }
         description { state: "iconic" 0.0;
            inherit: "default" 0.0;
            visible: 0;
         }
      }

three states: "default", "selected" and "iconic": this part it's just a RECTangle (you'll see the type part) that is visible only on selected state. And the switch of "selected" state is managed by programs on lines 283-289 (syntax similar to the programs showed before). So when a window gets focused, all the part clipped to "select" gets visible and when a window gets unfocused or iconified the part gets invisible, because "default" and "iconic" state of "sel_clip" part is with "visible: 0".

  • "base", it has two state "default" and "clicked" and it change its image between the two states (button_normal.png button_normal.png for normal state and button_clicked.png for button_clicked.pngclicked state. Notice the changes of gradient and dimension.) the change of state is managed by the following program:
      program {
         signal: "mouse,down,1"; source: "event";
         action: STATE_SET "clicked" 0.0;
         target: "base";
         target: "e.text.label";
         target: "sel_label";
      }
      program {
         signal: "mouse,up,1"; source: "event";
         action: STATE_SET "default" 0.0;
         target: "base";
         target: "e.text.label";
         target: "sel_label";
      }

what events triggered these programs: the mouse click on "event" part. If the button 1 of the mouse goes down (you press the button!), changes the state to clicked, when the button 1 of the mouse turns up (you release the button!) the state goes "default". the target of these programs are 3: "base", "e.text.label" and "sel_label".

Notice that base part is clipped by a clip part named "clip" (see on line 233) that is visible on state "default" and "iconic", but invisible on state "selected". When a button goes selected, all the parts clipped by clip disappear and appear all the part clipped to "sel_clip", and vice versa, of course.

  • "e.text.label". a text part that display the name of the window. It turns between a default state and an "iconic", for iconified window. The iconic has a less bright colors (all the RGB channel multiplied for 21 on a scale 0-255)
  • "icon" and "icon2" are SPACER parts: it manages the sapce to let for the icon. That is different if the task is "default", with only icon ("icon_only" state) or only text ("text_only" state).
  • "icon_clip" a part that make all the parts clipped by it semitransparent when it gets to the state "iconic". Mainly the Icon.
  • "bar" the glow blue bar horizontal_separated_bar_glow.pnghorizontal_separated_bar_glow.png that appear on selected tasks. In fact it is clipped by "sel_clip": it hasn't a state that make it visible when window gets focused. "sel_clip" will do it for it.
  • "e.swallow.icon". The icon part. It's a SWALLOW because it take the source of the image from an external source. It is not on the EDJ theme. States "bounces" refers to the bounce effect that you see if your window send notifications: the icon starts bounces changing its position (rel1 and rel2 option change the position of the top-left and bottom-right conrers).
  • "event" part: un invisible RECTANGLE used to catch all the mouse click event.
  • "sel_shine" the shine of selected tasks ( shine.png -it's visible on dark background-). Clipped to "sel_clip", works exacly like "bar" part.
  • After that you will se "clip" and "sel_clip" part, discussed before.

I hope to point you in right direction for your theming work.

This is just an overview of the code, but if you have specific question please ask. You have to edit not only "base" part, but also all the part clipped to "sel_clip". Have you done it? :P


Se sei italiano e interessato a Linux, clicca qui!

#31 mbert

mbert

    Member

  • Members
  • 20 posts

Posted 05 February 2016 - 01:30 PM

Thank you, that helped! I'll release an upgrade with styled taskbar this evening. 



#32 mbert

mbert

    Member

  • Members
  • 20 posts

Posted 05 February 2016 - 06:22 PM

The task bar now looks better :)

 

zM2j3C0.jpg

 

bp8in4e.jpg







Also tagged with one or more of these keywords: themes, e19, e20

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users