Friday March 17, 2006 
Today's Page Hits: 25
All
|
Everything
Friday March 17, 2006
This problem with Creator's themes and portlets has come up before, so I thought I'd explain it and mention some possible workarounds.
Creator has a notion of a "theme" when you create projects. You can choose your theme under Projects -> Themes and choosing "Set As Current Theme" (Green, Default/Blue, Gray). The theme inserts a CSS reference into your web apps content that colors your text and widgets. Problem arises when building portlets in Creator. The portlet application will end up being aggregated with numerous other portlets, each of which might have the own style, or "theme", associated with them. In addition the portal that is doing the aggregation may have it's own style (as is the case with Sun Portal Server). Each of these styles may conflict and override each other. What you would really like is to be able to tell Creator not to associate any theme with your portlet project. This is a known bug in Creator that will be resolved.
Meanwhile, how can you handle the theme/style conflicts? Using Sun Portal Server 7 as an example, let's take a look at what is happening. The community sample in PS7 specifies a CSS in the <head> for a Default/Blue theme. In this example, we have inserted a "gray portlet" (portlet with the gray theme chosen) and a "green portlet" onto the community sample portal.
Because each of these stylesheets will have the same/conflicting rules, the last CSS wins and whole page displays with a green style. CSS is defined this way. When there are identical conflicting rules, the rules are sorted by the order in which they appear in the content. This works fine, if you wanted a green theme
, but what if you really preferred your portal have the default/blue theme?
1. Make sure a portlet with your desired theme is specified last in your HTML content. e.g. Put a default/blue portlet at the bottom.
2. Or better yet, move your CSS reference for the entire portal page from the <head> to the bottom. For instance, in the case of the PS7 community sample, edit the footer.html (/desktop/community_sample/footer.html) content that lists copyright, etc. to include the CSS reference. Changing the footer.html will require deleting the compiled JSPs for the portal page (/desktop/compiled/_jsps) so that they will get re-compiled.
This way, you are assured that your entire portal page will maintain it's default/blue theme.
Creator has a notion of a "theme" when you create projects. You can choose your theme under Projects -> Themes and choosing "Set As Current Theme" (Green, Default/Blue, Gray). The theme inserts a CSS reference into your web apps content that colors your text and widgets. Problem arises when building portlets in Creator. The portlet application will end up being aggregated with numerous other portlets, each of which might have the own style, or "theme", associated with them. In addition the portal that is doing the aggregation may have it's own style (as is the case with Sun Portal Server). Each of these styles may conflict and override each other. What you would really like is to be able to tell Creator not to associate any theme with your portlet project. This is a known bug in Creator that will be resolved.
Meanwhile, how can you handle the theme/style conflicts? Using Sun Portal Server 7 as an example, let's take a look at what is happening. The community sample in PS7 specifies a CSS in the <head> for a Default/Blue theme. In this example, we have inserted a "gray portlet" (portlet with the gray theme chosen) and a "green portlet" onto the community sample portal.
| <html> <head> ... Portal default/blue theme set... <link rel="stylesheet" type="text/css" href="/portal/theme/com/sun/web/ui/defaulttheme/css/css_master.css" /> <link rel="stylesheet" type="text/css" href="/portal/community/css/desktop.css" /> </head> <body> ... gray portlet ... <link rel="stylesheet" type="text/css" href="/GrayPortlet/theme/com/sun/rave/web/ui/defaulttheme-gray/css/css_master.css" /> ... green portlet ... <link rel="stylesheet" type="text/css" href="/GreenPortlet/theme/com/sun/rave/web/ui/defaulttheme-green/css/css_master.css" /> ... </body> </html> |
Because each of these stylesheets will have the same/conflicting rules, the last CSS wins and whole page displays with a green style. CSS is defined this way. When there are identical conflicting rules, the rules are sorted by the order in which they appear in the content. This works fine, if you wanted a green theme
, but what if you really preferred your portal have the default/blue theme?1. Make sure a portlet with your desired theme is specified last in your HTML content. e.g. Put a default/blue portlet at the bottom.
2. Or better yet, move your CSS reference for the entire portal page from the <head> to the bottom. For instance, in the case of the PS7 community sample, edit the footer.html (/desktop/community_sample/footer.html) content that lists copyright, etc. to include the CSS reference. Changing the footer.html will require deleting the compiled JSPs for the portal page (/desktop/compiled/_jsps) so that they will get re-compiled.
| <!-- footer.html --> <!-- <div class="clearall"></div> --> <div id="footer"> <div id="copyright">© 2005 Sun Microsystems, Inc.</div> <div id="links"> <a href="http://www.sun.com/contact/">Contact</a> <a href="http://www.sun.com/products/">Products</a> <a href="http://www.sun.com/servicessolutions/">Services & Solutions</a> <a href="http://www.sun.com/support/">Support</a> <a id="last" href="http://www.sun.com/training/">Training</a> </div> </div><!-- end footer --> </div><!-- container --> <link rel="stylesheet" type="text/css" href="/portal/theme/com/sun/web/ui/defaulttheme/css/css_master.css" /> </body> </html> |
This way, you are assured that your entire portal page will maintain it's default/blue theme.
Trackback URL: http://blogs.sun.com/gregz/entry/conflicting_creator_themes_in_portlets
Post a Comment:
Posted by axj on November 22, 2006 at 11:51 AM MST #
Posted by kolli kolli on March 27, 2007 at 05:01 AM MDT #