CSS from JSC vs. Portal CSS conflict
I think I've already read about this issue, but I can't find where, if it is discussed anywhere else, please let me know.
I have a serious problem. I am using JSC to create a JSF portlet. It is plugged in somebody else's Sun Portal Server 7. The CSS from JSC overriders some defined CSS properties of the Portal, so it looks crappy.
I can delete some of the css definitons from mytheme.jar, but my app wouldn't look as I inteded.
What can I do? Is there a way to put the whole portlet in a DIV with an ID a prefix all styles with that #ID?
[569 byte] By [
Martin777a] at [2007-11-26 20:30:53]
# 1
I found the page about the conflicting CSS, but it doesn't resolve the issue. http://blogs.sun.com/gregz/entry/conflicting_creator_themes_in_portlets
My problem is different, I can't alter the portal CSS...
Maybe I will just delete anything conflicting from the CSS in the theme jar and redesign the pages with the style property (ouch...). Better ideas welcome :)
# 2
Another option is to use only the Standard JSF components. While the themes are still part of the JSF-Portlet application, the components themselves won't use the themes. Only the "basic" components use the themes.
Another option if you want to use the "basic" components is to create a neutered theme, a theme that has all the CSS classes basically empty while keeping the javascript, images, etc.
-David
# 3
As I said, I will remove the conflicting properties from the css_master (your second option).
Anyway most of the problems is caused by the following part of the style definition, especially by the headings definitions:
/* GLOBAL STYLES */
BODY, TH, TD, P, DIV, SPAN, INPUT, BUTTON, SELECT, TEXTAREA, FORM, B, STRONG, I, U, H1, H2, H3, H4, H5, H6,
DL, DD, DT, UL, LI, OL, OPTION, OPTGROUP, A {font-family:sans-serif;font-size:12px}
BODY {color:#000;background-color:#fff;margin:0px}
H1, H2, H3, H4, H5, H6 {font-weight:bold}
H1 {font-size:18px}
H2 {font-size:15px}
H5, H6 {font-size:11px}
a:link, a:visited {color:#035899;text-decoration:none}
a:hover {color:#035899;text-decoration:underline}
These are the first lines of css_master.css in the theme
I guess I don't need it in my portlet (why is there a body definition?). I think I will just have to restyle the hyperlinks.
# 5
I am sure that will help some people a lot. It's a good start for creating your own theme...
I solved the issue with a little workaround. I used the fact, that a whole page is enclosed by a form, so this:
#form1 conflict {
...
}
works quite well in my case :)
