[xwiki-users] panel background
Hi all, I would like to set a given panel with a different background. Let's say, white, instead of the default #384554 in Albatross skin. I read in macros.vm panels' entries... ## Note: We pass the Panel name as an HTML class attribute so that it's possible to style ## the Panels selectively using CSS. Does this means that it is possible to change the background on a per panel basis by using CSS? In any case, I've tried to create a new macro assigning a different background color. This way... #macro(panelhiddenheaderwhitebackg $title) #set ($specialClassAttribute = "") #if ($paneldoc && $paneldoc != "") #set ($specialClassAttribute = $util.convertToAlphaNumeric($paneldoc.name)) #end <div class="panel expanded $specialClassAttribute"> <h5 class="xwikipaneltitle hidden" onclick="togglePanelVisibility(this.parentNode);">$title</h5> <div class="xwikipanelcontentswhitebackg"> #end Class for the div holding the content is set to xwikipanelcontentswhitebackg. I've created this class in colorsblack.css, imported by style.css, but there is no background shown for this panel. Using Firefox/Inspector, I can not see colorsblack.css referenced when inspecting this element. Please, is it possible to do this? Where am I wrong? Thank you so much, Ricardo -- Ricardo Rodríguez Your EPEC Network ICT Team
On Mar 4, 2008, at 12:46 AM, [Ricardo Rodriguez] Your EPEC Network ICT Team wrote:
Hi all,
I would like to set a given panel with a different background. Let's say, white, instead of the default #384554 in Albatross skin.
I read in macros.vm panels' entries...
## Note: We pass the Panel name as an HTML class attribute so that it's possible to style ## the Panels selectively using CSS.
Does this means that it is possible to change the background on a per panel basis by using CSS?
yes that's what we do in the toucan skin for the search panel.
In any case, I've tried to create a new macro assigning a different background color. This way...
#macro(panelhiddenheaderwhitebackg $title) #set ($specialClassAttribute = "") #if ($paneldoc && $paneldoc != "") #set ($specialClassAttribute = $util.convertToAlphaNumeric($paneldoc.name)) #end <div class="panel expanded $specialClassAttribute"> <h5 class="xwikipaneltitle hidden" onclick="togglePanelVisibility(this.parentNode);">$title</h5> <div class="xwikipanelcontentswhitebackg"> #end
Class for the div holding the content is set to xwikipanelcontentswhitebackg. I've created this class in colorsblack.css, imported by style.css, but there is no background shown for this panel. Using Firefox/Inspector, I can not see colorsblack.css referenced when inspecting this element.
Please, is it possible to do this? Where am I wrong?
I'm not a CSS expert but at this point this has not much to do with xwiki, it's pure CSS and HTML stuff so you must be doing something wrong somewhere. -Vincent
Vincent Massol wrote:
yes that's what we do in the toucan skin for the search panel.
Done! Thanks. It is just a matter of creating a <div DivName> within the panel and a new #DivName in one of the CSS files. I've create it in style.css. I'm guessing if MergeCSS Snippet could be the tool to avoid modifying default css as IncludeMacro avoid to modify default macro.vm. Isn't it? Thanks. Best, Ricardo -- Ricardo Rodríguez Your EPEC Network ICT Team
On Mar 9, 2008, at 3:21 PM, [Ricardo Rodriguez] Your EPEC Network ICT Team wrote:
Vincent Massol wrote:
yes that's what we do in the toucan skin for the search panel.
Done! Thanks.
It is just a matter of creating a <div DivName> within the panel and a new #DivName in one of the CSS files. I've create it in style.css.
This is not required since the panels already provide a css hook... So all you need is a CSS entry.
I'm guessing if MergeCSS Snippet could be the tool to avoid modifying default css as IncludeMacro avoid to modify default macro.vm. Isn't it?
Not sure I understand what you mean ;) -Vincent
Vincent Massol wrote:
Not sure I understand what you mean ;)
Some time it is easier to ask directly instead of doing weird things :-( Sorry for not being clearer. The point is that by using macro.vm I can easily add new macros to our sites without needing to modify macros.vm. This way, our customizations are "completely" independent of the base skin and updates are pretty straightforward. Now that following your advise I have learned how to control panels' appearance by using CSS, it will be great to have a tool to include new CSS code in the "rendering process" without modifying the default css files. This way, as with the macros, I have not to be concerned about overwriting old default css while updating. The only tool I founded in xwiki.org that I guess could do something like this is MergeCSS. But I don't understand well how it could be used. Hope this is a bit clearer now. Thanks for your patience! Ricardo -- Ricardo Rodríguez Your EPEC Network ICT Team
On Sun, Mar 9, 2008 at 3:34 PM, [Ricardo Rodriguez] Your EPEC Network ICT Team <[email protected]> wrote:
The point is that by using macro.vm I can easily add new macros to our sites without needing to modify macros.vm. This way, our customizations are "completely" independent of the base skin and updates are pretty straightforward.
Now that following your advise I have learned how to control panels' appearance by using CSS, it will be great to have a tool to include new CSS code in the "rendering process" without modifying the default css files. This way, as with the macros, I have not to be concerned about overwriting old default css while updating.
Looks like Skin Extensions (http://dev.xwiki.org/xwiki/bin/view/Design/SkinExtensions) are what you're looking for. Sergiu & Marta are currently working on it : http://markmail.org/message/oa6f6olzm7iwnpkk?q=xwiki+list:org%2Exwiki%2Edevs... JV.
Thanks JV! Jean-Vincent Drean wrote:
Looks like Skin Extensions (http://dev.xwiki.org/xwiki/bin/view/Design/SkinExtensions) are what you're looking for. Sergiu & Marta are currently working on it : http://markmail.org/message/oa6f6olzm7iwnpkk?q=xwiki+list:org%2Exwiki%2Edevs...
Thanks for the tip. I was guessing why I was not aware of this proposal. The reason is simple: I was lost with the XE 1.4 roadmap and I am afraid I am not paying enough attention to the xwiki.org RSS feed... :-( The proposal seems of maximum interest for those of us considering the final appearance of a page in the a web browser as the result of a huge number of interactions between available information, features, user preferences and rights, corporation policies and design work. Once again, I am sure XWiki will give me many, many. many days of happiness! :-) Thanks to the XWiki Team and Community for the great work. Ricardo ** -- Ricardo Rodríguez Your EPEC Network ICT Team
participants (3)
-
[Ricardo Rodriguez] Your EPEC Network ICT Team -
Jean-Vincent Drean -
Vincent Massol