Uncategorized

Yakuake Skins

Yakuake

is a drop-down terminal for Linux. You can drop-down the terminal via the F12 key.

YakuakeScreenshot

Settings

Settings

Es you can see in the settings you have connection via GHNS (http://kde-look.org/index.php?xsortmode=high&page=0&xcontentmode=87) so the easiest way to get a new skin is the Get New Skins search.

But how can you make your own skin?

Make your own skin

A Skin is basically a set of PNG files and a text file naming them along with setting a few properties like image positions and colours. It’s a quite restrictive format, there is no support for vector data or scaling, but on the other side you can change a lot.

Skills

what do you need to make your own skin:

  1. Installed Yakuake for testing (and using)
  2. an Idea
  3. Inkscape (or a image program for the .png files)

Sample

When you go to the Opendesktop.org page in the section Yakuake skins you can grab a skin of mine like

why mine? Because in the download archiv file the original svg files are also included. So it is easy to make new skins with Inkscape.

Breeze-Thin
yakuakeBreezeThin

Breeze Standard

yakuake13

You have to move the files to ~/.kde/share/apps/yakuake/kns_skins/ also when you download skins via GHNS they are located there.

Files

  1. title folder and title.skin
  2. tabs folder and tabs.skin

the setting of the title (window decoration) and tabs bar are located in the two .skin files.

title folder and title.skin

[Description]
Skin=Breeze-Thin
Author=Andreas
Email=mail@mail.com
Icon=/icon.png

Skin name and icon for the skin selection in the application settings.

[Border]
red=61
green=174
blue=233
width=0

When you’d like to have a border all around the terminal window. With width=0 there will be no border used.

[Text]
x=25
y=0
red=239
green=240
blue=241
text=Drop-Down Terminal

Window decoration text with colour and position.

[Background]
back_image=/title/back.png
left_corner=/title/left.png
right_corner=/title/right.png

the back_image is important, because the image heigh is used for the title height. So I use in the Breeze-thin theme NO background. I made a transparent (99 % transparent) png file with a size of 1×12. So the title bar is 12 px height. For the left_corner I made also a 99 % transparent png file.

[FocusButton]
x=60
y=0
up_image=/title/focus_up.png
over_image=/title/focus_over.png
down_image=/title/focus_down.png

[ConfigButton]
x=40
y=0
up_image=/title/config_up.png
over_image=/title/config_down.png
down_image=/title/config_down.png

[QuitButton]
x=20
y=0
up_image=/title/quit_up.png
over_image=/title/quit_down.png
down_image=/title/quit_down.png

On the right area there are three buttons possible. The focus, configure and quit button focus_upconfig_upquit_up

The x and y coordinate is for the position. I made every „icon“ 20×12 so that the icons are not moved in y direction (y=0) if you have icons without padding than you can use the coordinate for the padding. I’d prefer to make every png file the right (back_image) height. I prefer to made the icons without background, because the background will be used from the back_image. At this three icons I use a background because I made the icons 20 px width so that when you don’t hover the x icon the quit option will also be selected.

For up, over and down you can use different icon files like

  • focus_up up
  • focus_over over
  • focus_down down

tabs folder and tabs.skin

[Description]
Skin=Breeze-Thin
Author=Andreas
Email=home@mail.com
Icon=/icon.png

Same as in the title.skin file.

[Background]
back_image=/tabs/back_image.png
left_corner=/tabs/left_corner.png
right_corner=/tabs/right_corner.png

The back_image is important for the tabs height so when you want to change the height, you have to change the back_image file. As in the title bar left and right_corner is supported (for rounded- or special corner styles).

[Tabs]
x=20
y=0
red=239
green=240
blue=241

Colour of the tabs text. You can only choose one colour. So when you have different colours for the selected (dark) and unselected (light) tabs you have to choose a colour where you can read the text on both tabs. The x and y position if for the starting point of the tabs (20 px from the left border).

separator_image=/tabs/separator.png
selected_background=/tabs/selected_back.png
selected_left_corner=/tabs/selected_left.png
selected_right_corner=/tabs/selected_right.png
unselected_background=/tabs/unselected_back.png
unselected_left_corner=/tabs/selected_left.png
unselected_right_corner=/tabs/selected_right.png

on the tabs bar you have

  1. selected tab
  2. unselected tab
  3. separator

You can choose the

  • selected_background
  • selected_left_corner
  • selected_right_corner

with the left and right corner you can also make something like an firefox australis theme. If you don’t use the left and right_corner the tabs are smaller, because the left and right_corners are added to the tabs width. If the png files don’t have the same size than the back_image file, the back_image file will be shown on the bottom area. so the starting coordinate is the tabs-top area.

the unselected tab support in the yakuake 2.9.9 version only the unselected_background png file. So it is not possible to have the rounded corners, … at the unselected tabs. In future releases the unselected_left_corner and unselected_right_corner are supported.

prevent_closing_image=/tabs/lock.png
prevent_closing_image_x=0
prevent_closing_image_y=0

When you use the right mouse on a tab the prevent_closing_image will be shown. I use the same size as for the back_image so x and y are 0. The background of the lock.png file is transparent.

[PlusButton]
x=0
y=0
up_image=/tabs/add_up.png
over_image=/tabs/add_down.png
down_image=/tabs/add_down.png

[MinusButton]
x=20
y=0
up_image=/tabs/close_up.png
over_image=/tabs/close_down.png
down_image=/tabs/close_down.png

The plus button is on the left side and the minus (close terminal) on the right. As always I use the icon hight from back_image. Up, over and down is supported.

No title bar

Remove the Icon sections (FocusButton, ConfigButton, QuitButton). You need only the [Background] section. for the back_image you use a 1×1 large transparent (99%) png file.

SVG -> PNG

I made svg files and with a short script which I located in ~/bin I generate from the svg files png files which will than be used for the skin.

find -name "*.svg" -o -name "*.SVG" | while read i;
do 
    inkscape -f "$i" -e "${i%.*}.png"
done

Questions

If you need something please ask at Opendesktop.

Thanks for reading, Andreas

Advertisements
Standard