On 06/20/2010 11:08 AM, Gerritjan Koekkoek wrote:

Hi,

I would like to apply some CSS styling to a panel only.

I have some velocity code creating a<ul> list I would like to use the CSS as documented on http://meyerweb.com/eric/css/edge/menus/demo.html

but it should only apply to the panel, I use the same velocity code also on a document, and there the styling should not be applied

Use proper CSS selectors. Each panel has a classname derived from the panel's name, which you can use to target just the panel. For example, My Recent Modifications has the classname MyRecentModifications. Use Firebug, or view page source, to see what classname your panel gets. Then, use this classname as a prefix in your selectors. Another option is to just use .panels as a prefix, which matches only the panels columns, -- Sergiu Dumitriu http://purl.org/net/sergiu/

On Jun 20, 2010, at 12:41 PM, Gerritjan Koekkoek wrote:

Hi, Thxs, but is it also possible to use the stylesheet extension object to add CSS specifically to the panel, since it would keep my generic CSS more clean

I was thinking of adding a stylesheet extension object to the document that holds the panel object, but it does not seem to to connect? I used; - name PopupMenu - Code: (the code from eric meyer) - Use this extension: on demand

If you set up your extension for on demand use, you'll have to call it from velocity for it to 'connect': $xwiki.ssx.use('My.CSS') where My.CSS is the full name of the document you're adding the stylesheet extension object to. Dan

- Parse content: Yes - Cashing policy: long

My panel object is called : CdLSATDTopics, so I assume the CSS classname = "CdLSATDTopics"

right?

Op 20 jun 2010, om 11:21 heeft Sergiu Dumitriu het volgende geschreven:

On 06/20/2010 11:08 AM, Gerritjan Koekkoek wrote:

...

Hi,

I would like to apply some CSS styling to a panel only.

I have some velocity code creating a<ul> list I would like to use the CSS as documented on http://meyerweb.com/eric/css/edge/menus/demo.html

but it should only apply to the panel, I use the same velocity code also on a document, and there the styling should not be applied

Use proper CSS selectors. Each panel has a classname derived from the panel's name, which you can use to target just the panel. For example, My Recent Modifications has the classname MyRecentModifications. Use Firebug, or view page source, to see what classname your panel gets. Then, use this classname as a prefix in your selectors.

Another option is to just use .panels as a prefix, which matches only the panels columns,

-- Sergiu Dumitriu http://purl.org/net/sergiu/ _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

Hi to bring it together... I have one "panel" document called: CdLSATDTopics It contains two objects; -PanelClass: called CdLSATDTopics (like document) -StyleSheetExtension: called PopupMenu If I check the Html page it does not yet contain a link to the stylesheet extension I used: $xwiki.ssx.use('PopupMenu') => should this name be extended with space.document.object? In the stylesheet extension I should refer to classes or ID's within the class as described by Raluca? Op 20 jun 2010, om 12:57 heeft Raluca Stavro het volgende geschreven: Hello, On Sun, Jun 20, 2010 at 12:41 PM, Gerritjan Koekkoek <[email protected]> wrote:

Hi, Thxs, but is it also possible to use the stylesheet extension object to add CSS specifically to the panel, since it would keep my generic CSS more clean

I was thinking of adding a stylesheet extension object to the document that holds the panel object, but it does not seem to to connect? I used; - name PopupMenu - Code: (the code from eric meyer) - Use this extension: on demand - Parse content: Yes

You don't need 'Yes' value here unless you insert Velocity code inside the Stylesheet Extension.

- Cashing policy: long

My panel object is called : CdLSATDTopics, so I assume the CSS classname = "CdLSATDTopics"

The class name is generated by using the Panel DOCUMENT NAME. So in your case, if the document that stores you're Panel object is named 'PopupMenu', then this should be the class name of your panel. Note: the full class name of a panel is formed out of 3 elements: * 'panel' * 'expanded' or 'collapsed' * 'panel_document_name' Example: 'panel expanded PopupMenu', where Panels.PopupMenu is the full name of the panel document. Raluca.

right?

Op 20 jun 2010, om 11:21 heeft Sergiu Dumitriu het volgende geschreven:

On 06/20/2010 11:08 AM, Gerritjan Koekkoek wrote:

...

Hi,

I would like to apply some CSS styling to a panel only.

I have some velocity code creating a<ul> list I would like to use the CSS as documented on http://meyerweb.com/eric/css/edge/menus/demo.html

but it should only apply to the panel, I use the same velocity code also on a document, and there the styling should not be applied

Use proper CSS selectors. Each panel has a classname derived from the panel's name, which you can use to target just the panel. For example, My Recent Modifications has the classname MyRecentModifications. Use Firebug, or view page source, to see what classname your panel gets. Then, use this classname as a prefix in your selectors.

Another option is to just use .panels as a prefix, which matches only the panels columns,

-- Sergiu Dumitriu http://purl.org/net/sergiu/ _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

On Sun, Jun 20, 2010 at 2:55 PM, Gerritjan Koekkoek <[email protected]> wrote:

Hi to bring it together... I have one "panel" document called: CdLSATDTopics It contains two objects; -PanelClass: called CdLSATDTopics (like document) -StyleSheetExtension: called PopupMenu

If I check the Html page it does not yet contain a link to the stylesheet extension I used: $xwiki.ssx.use('PopupMenu') => should this name be extended with space.document.object?

In the stylesheet extension I should refer to classes or ID's within the class as described by Raluca?

I suppose that this is the panel that you are talking about: http://www.cdlsworld.org/xwiki/bin/view/Panels/CdLSATDTopics . This is how you should write your CSS rules: .CdLSATDTopics #PanelATDMenu h4{ background-color: _a_color_; } ... and so on. Raluca.

Op 20 jun 2010, om 12:57 heeft Raluca Stavro het volgende geschreven:

Hello,

On Sun, Jun 20, 2010 at 12:41 PM, Gerritjan Koekkoek <[email protected]> wrote:

...

Hi, Thxs, but is it also possible to use the stylesheet extension object to add CSS specifically to the panel, since it would keep my generic CSS more clean

I was thinking of adding a stylesheet extension object to the document that holds the panel object, but it does not seem to to connect? I used; - name PopupMenu - Code: (the code from eric meyer) - Use this extension: on demand - Parse content: Yes

You don't need 'Yes' value here unless you insert Velocity code inside the Stylesheet Extension.

...

- Cashing policy: long

My panel object is called : CdLSATDTopics, so I assume the CSS classname = "CdLSATDTopics"

The class name is generated by using the Panel DOCUMENT NAME. So in your case, if the document that stores you're Panel object is named 'PopupMenu', then this should be the class name of your panel.

Note: the full class name of a panel is formed out of 3 elements: * 'panel' * 'expanded' or 'collapsed' * 'panel_document_name'

Example: 'panel expanded PopupMenu', where Panels.PopupMenu is the full name of the panel document.

Raluca.

...

right?

Op 20 jun 2010, om 11:21 heeft Sergiu Dumitriu het volgende geschreven:

On 06/20/2010 11:08 AM, Gerritjan Koekkoek wrote:

...

Hi,

I would like to apply some CSS styling to a panel only.

I have some velocity code creating a<ul>  list I would like to use the CSS as documented on http://meyerweb.com/eric/css/edge/menus/demo.html

but it should only apply to the panel, I use the same velocity code also on a document, and there the styling should not be applied

Use proper CSS selectors. Each panel has a classname derived from the panel's name, which you can use to target just the panel. For example, My Recent Modifications has the classname MyRecentModifications. Use Firebug, or view page source, to see what classname your panel gets. Then, use this classname as a prefix in your selectors.

Another option is to just use .panels as a prefix, which matches only the panels columns,

-- Sergiu Dumitriu http://purl.org/net/sergiu/ _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users

_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users