kylin a ?rit :

>   Metal is so cool.
>
> but i did not know the means of "skin.css" code
>
> especially:
>
> Metal .PTitle  (what's it means ,if some good tutorial about it will
> useful) {
>
>       height:16px;
>       color:#FFFFFF;
>       background:  url(../images/html/skins/Metal/title.gif); }

I'm sorry I didn't documented yet the new skinning process.
I'll try here but in short time :

If you use the new skin process (Metal is a sample), then forget about all
the other stuff. The only thing you have to do in your skins.xreg is adding
an entry this way :

    <skin-entry name="MyNewSkin" hidden="false">
        <property name="portlet-skin-class" value="MyNewSkinClass"
hidden="false"/>
    </skin-entry>

For Metal, MyNewSkinClass=Metal, represents the css style class to use for
the globality of skin.
Then, when such an entry is in your skin, the rendering of a portlet is this
one :

A portlet is a table with 3 columns, 3 rows

(the first row contains 4 columns : left border, title of protlet, action
buttons, right border)
title of portlet and action buttons uses the same css to render
                            ________________
- title   (+ left/right)   |__|_____|____|__|
                           |  |          |  |
                           |  |          |  |
- content (+ left/right)   |  |          |  |
                           |  |          |  |
                           |__|__________|__|
- bottom  (+ left/right)   |__|__________|__|

The default class then used for the portlet above are :
* PTitleLeft, PTitle (two times, one for title, one for action buttons),
PTitleRight
* PContentLeft, PContent, PContentRight
* PBottomLeft , PBottom , PBottomRight

So every part of the portlet is "skinnable". Then, for your new skin, edit
skins.css and add stuff like :

.MyNewSkinClass .PTitleLeft <- Means for the browser, check the PTitleLeft
class of the MyNewSkinClass (that's cascading)
{
        // Here everything that concerns the left title part of the portlet
(typically an image)
}

.MyNewSkinClass .PTitle
{
        // Here everything that concerns the top title part (title and action
buttons)
}

.MyNewSkinClass .PTitleRight
{
        // Here everything that concerns the right title part of the portlet
(typically an image)
}

... and so on with PContentLeft, Pcontent, PContentRight, PBottomLeft,
PBottom, PBottomRight.

In fact everything is in css and not anymore in xreg.

Now for your question, in your title you have to specify the height of the
title bar, because it can change from a skin to another and can't be
"hardcoded" in the template. For Metal I had to specify the height of the
image used (title.gif), and that is... 16 px. Then the color attribute is
for the text to be visible on the black image.

And you can do everything that is possible to do using css.

I'm sorry not to be able to develop more right now, but I hope I'll be able
to produce a better tutorial for skinning like "Metal" before 1.4b5 goes out
!
However, feel free to ask for more precisions if I'm not so clear, that will
help me produce a nice tutorial.

Aurelien


---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]

Reply via email to