CSS classes for tagging and rating | HCL Digital Experience
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.dojo/installedApps/dojo.ear/dojo.war/v1.4.1/com/ibm/widgets/css/widgets_combined.css
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.
trcWidgets.css
:.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 {
}