CSS classes for tagging and rating
The portal tag and rating widgets allow for detailed look and feel customization by providing a customizable CSS class hierarchy.
Widget name | Tagging and rating CSS class assigned to the widget |
---|---|
TagCloud | trc trcTagCloud |
AddTag dialog | trc trcTagging trcDialog trcDialogTagging |
AddRating dialog | trc trcRating trcDialog trcDialogRating |
InlineTag | trc trcTagging trcInline trcInlineTagging |
InlineRating | trc trcRating trcInline trcInlineRating |
Group name | CSS class that needs to be modified to customize the given group of widgets |
---|---|
All tag and rating widgets | trc |
All tag widgets | trcTagging |
All rating widgets | trcRating |
All dialog based widgets | trcDialog |
All inline widgets | trcInline |
Widget name | CSS class that needs to be modified to customize the given widget |
---|---|
TagCloud widget | trcTagCloud |
AddTag dialog widget | trcDialogTagging |
AddRating dialog widget | trcDialogRating |
InlineTag widget | trcInlineTagging |
InlineRating widget | trcInlineRating |
Hierarchy of CSS classes
- trc
- trcTagging
- trcRating
- trcDialog
- trcDialogTagging
- trcDialogRating
- trcInline
- trcInlineTagging
- trcInlineRating
.trc <CSS classname to override> {
// custom CSS definitions for tag and rating widgets in general
}
.trcTagging <CSS classname to override> {
// custom CSS definitions for all tag widgets
}
.trcTagCloud <CSS classname to override> {
// custom CSS definitions for the Tag Cloud widget only
}
Customizing tagging and rating specific CSS classes
The CSS classes used to customize the visual appearance of the tag and rating widgets are located in the following file: PortalServer_root/theme/wp.theme.modules/webapp/installedApps/ThemeModules.ear/ThemeModules.war/modules/portalclient/css/trcWidgets.css .
This file contains CSS classes specific to tagging and rating. They either start with the prefix trc, for example trc Editable or trc Delete or they are otherwise scoped to the tagging and rating context, for example ul.trcEdit . To customize the visual appearance of tag and rating widgets, you override these definitions in the CSS file. To do this, you add class definitions at the end of the file trcWidgets.css based on the CSS class hierarchy given by the Hierarchy of CSS classes list.
.trc a {
color: green;
}
If you do this, all tag
and rating widgets show their links in a green color. .trcTagCloud a {
color: red;
}
A more
specific declaration overrides a less specific declaration. Therefore you can have both
declarations in the file trcWidgets.css at the same time.
While the Tag Cloud shows its links in red, all other tag and rating widgets continue to
show their links in green. /* Give all links within tag and rating widgets a default background */
.trc a {
background-color: #d0efff;
}
/* Make tagcloud links appear in a black color */
.trcTagCloud a {
color: black;
}
/* Give all tag widgets a blue link color */
.trcTagging a {
color: blue;
}
/* Give all rating widgets a green link color */
.trcRating a {
color: green;
}
/* Links in all dialog widgets appear in italic,
colors are inherited from trcRating/trcTagging */
.trcDialog a {
font-style: italic;
}
/* Links in all inline widgets appear as underlined,
colors are inherited from trcRating/trcTagging */
.trcInline a {
font-style: underline;
}
/* links in Tag Widget Dialog inherit italic font-style from .trcDialog,
but overwrite the color inherited from .trcTagging with another color */
.trcDialogTagging a {
color: #770000;
}
/* links in Rating Widget Dialog keep the inherited link color defined by
.trcRating, but change the inherited font-style, by setting it to none */
.trcDialogRating a {
font-style: none;
}
/* modify the inherited color (from .trcTagging) and reset the font-style (from
.trcDialog) to none. */
.trcInlineTagging a {
color: green;
font-style: none;
}
/* no changes for the inline rating widget. It simply uses the color and font-style
from the super classes .trcRating and .trcInline instead */
.trcInlineRating a {
}