Mapping style templates and properties to Actual Style Sheet Classes

Question

I got this response to an email regarding creating a customized style sheet and thought others might find it useful following is my initial question and the response from David Phipps. If anyone else has input to this conversation please join in.
Initial question: I'm trying to create a highly customized style sheet and could use a matrix that maps the various properties to the styles that each property affects. I have had some success determining the specific styles that I would like to change but am unable to use the style mill with any efficacy to make those changes. We are attempting to create a single language style sheet with a unique color scheme that matches our branding. One big problem we have run into is that certain styles are called in multiple places with different backgrounds (i.e. breadcrumbText). Any help along these lines that you could provide would be greatly appreciated.
Response:The CSS style mapping is not terribly satisfying right now; many objects share common CSS styles, which means if you change one tiny thing the whole page changes. We don't have a matrix or spreadsheet or styleguide that lays out the page itself and defines the styles used in each point. However, the stylesheet mill should work for you, and it's possible that what you have going on is a problem with your mill or an incomplete copy of what it generates.
There are 18 styles in the portal currently; you can actually create new styles and populate them, which sounds like the option you are interested in. The mill is just an ANT script that uses the template files in the templates directory and combines them with the property files in the prop-color and prop-text directories.
The prop-text files are per language (10 languages); if you check you'll see the values are all the same right now; the idea is you could change the font names or sizes per-language if you wanted to.
The prop-color files are per style (18 styles). If you want a new set of property values for, say, style 19, you'd add a file called color.19.properties, and the mill would pick that up and generate 190 files (19 styles x 10 languages). It would then add a new line to community-themes.txt, which has a name of each style for each language, based on data it picked up from your new color.19.properties file.
The real secret is that you only add color style elements you want to override. If you want a specific set of styles to always be available, just add them directly to the appropriate template file (in your case, the portal50.template file) without using the @variable@ in place of actual values. Then you're just adding new style overrides that apply everywhere.
Finally, you can add arbitrary new properties to your new prtoperties file and use those in the template:
in portal50.template:
..actionbarPortletBg {background-color: @personal.and.interesting.setting@;}
in color.19.properties:
personal.and.interesting.setting=#ff9900
So the CSS mill is just a glorified text replacement tool.
Remember that the CSS mill works this way:
- Run make_all.bat if you're not sure and want to insure you've remilled everything, otherwise use make_community_css.bat or make_menu.bat to remill only community styles or those for the jsportalmenus dropdown, respectively.
- The resulting files are created in ptimages/tools/cssmill/css
- You have to copy the resulting files by hand to the imageserver CSS location, which is
ptimages/imageserver/plumtree/common/public/css
- You have to forcibly stop and restart your imageserver, be it Apache, Tomcat, IIS, Websphere or whatever; no matter what anyone says the new content won't show up reliably until you restart your imageserver.
You probably know all this and your real problem is the CSS is not specific enough, that is, you can't get individual items to change like you want. We have been working on this, and the new version of the portal will have much more addressable CSS styles, including the ability to specify styles for individual navigation elements, individual pages, and individual portlets. This basically meant rewriting the HTML we generate, of course.
Since you can override and rewrite chunks of our HTML as well using View Overrides, if you're in a jam we can walk you through how to rewrite specific bits of the UI that are causing you trouble - for instance, the code that generates the breadcrumbs itself.
David Phipps
Senior Engineering Manager
Plumtree Software

Answer 1

One way to do this is to give the <body> tag an ID. In a template, you need to make the ID attribute of the <body> tag editable.
You would then have something like this in your style sheet:
#home.oneColFixCtrHdr #container #navigation li,
#services.oneColFixCtrHdr #container #navigation li,
#about.oneColFixCtrHdr #container #navigation li,
#contact.oneColFixCtrHdr #container #navigation li,
#testimonials.oneColFixCtrHdr #container #navigation li,
#links.oneColFixCtrHdr #container #navigation li
background-color:
#66ccFF;
border-bottom-width: 1px;
border-bottom-style:
solid;
border-bottom-color: #FFFFFF;