Opera Skinning part 5: Tips and tricks

Opera Skinning part 5: Tips and tricks

( Read the article )

"Specify only changed elements" > This doesn't appear to be true for 9.5. A blank skin.ini file will result in something too different from Opera Standard to be able to use it as a base for a new skin. Images go missing and dimensions change.

Also, the height of the pagebar in 9.5 "Opera Standard" is conflicting. All images are 30px high, the specified height in skin.ini is 30 but the actual height is 32. In a new skin I'm trying to get this down to 30 but I can only get it down to 31 by reducing the top margin on some elements. This is creating a frustrating 1px gap on some elements that I can't remove (unless I make my images 31px).

Originally posted by drworm:

"Specify only changed elements" > This doesn't appear to be true for 9.5. A blank skin.ini file will result in something too different from Opera Standard to be able to use it as a base for a new skin. Images go missing and dimensions change.

Make sure you have the fallbacks enabled in skin.ini. Just the following skin.ini will clone the Opera standard skin:

# This file describes the skin for the Opera browser

[Info]
Name=Opera Standard Skin
Author=Opera Software
Version=3
Preview Image=

[Options]
Large Images				= 0
Button Text Padding			= 0
Fallback foreground			= 1
Fallback background			= 1
PageCloseButtonOnTop		= 1
Inverted Pagebar Icons		= 1

Pagebar height can be adjusted by changing the paddings/margins on pagebar buttons, it grows to fit them.

Originally posted by larskl:

Make sure you have the fallbacks enabled in skin.ini. Just the following skin.ini will clone the Opera standard skin:

Thankyou. I missed the [options] section.

Pagebar height can be adjusted by changing the paddings/margins on pagebar buttons, it grows to fit them.

Thanks for this bit of information also. I just figured out that padding also effected the height (I should have guessed this from HTML rules). But height seems to have no effect at all? Is that correct?

I'm working with the pagebar currently and I set the follow:

[Pagebar Skin]
Height						= 30
Padding Top					= 0
Padding Bottom				= 0
Padding Left				= 0
Padding Right				= 0
Margin Top					= 0
Margin Left					= 0
Margin Right				= 0
Margin Bottom				= 0

[Pagebar Button Skin]
Height						= 30
Type						= BoxStretch
Tile Center					= buttons/pagebar_button.png
StretchBorder				= 2
Padding Top					= 0
Padding Bottom				= 0
Padding Left				= 0
Padding Right				= 0
Margin Top					= 0
Margin Left					= 0
Margin Right				= 0
Margin Bottom				= 0

#all other pagebar elements are cloned

With this definition the height of the pagebar and pagebar button is the height of the site icon (16px I guess) not 30px as I've specified. Is this by design or am I overlooking something?

Perhaps the recommendation is to use padding to create the height so the skin can be enlarged?

Height doesn't work on all elements, I'm pretty sure it doesn't work on [Pagebar Skin], not sure about [Pagebur button skin]

Originally posted by larskl:

Height doesn't work on all elements, I'm pretty sure it doesn't work on [Pagebar Skin], not sure about [Pagebur button skin]

It doesn't seem to. Thanks very much for clarifying this. When I first started my skin the other week, the height had me totally stumped (Opera Standard uses it despite not having an effect).

Your tutorial is gold. It's going to save me a lot of head scratching.

Nice tutorial. I wanted to ask, have you seen this:

- http://bachius.com/opera/skineditor/

I hadn't. It's... impressive! Dead handy.