Focal Point
Dashboard Report List styling

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/2721048331

March 21, 2005, 06:03 PM
<Pietro De Santis>
Dashboard Report List styling
Has anyone figured out how to change the way images and Hyperlinks are aligned in a Dashboard Report List window? Is there a way to change the alignment using CSS?

When text wrapping occurs, I would like the text to wrap to the text not the image. In the example below, on the first line, it would be nice to align the word "Report" with the word "Labour".


March 24, 2005, 07:25 PM
Denver RSE
Pietro,

Not sure if this helps, but there are various CSS files that handle the behavior of the Dashboard components.

The one you will be looking for is domain.css. It is located in:
\ibi\WebFOCUS53\worp\worp_html\yourdashboardname\

Here is some code that I use with some of my dashboards. Note that I added a new line to the .domain class:
background-image: url(wfrel5dombkgnd.gif);
so I am able to use a graphic in the background of the domain tree.

I am not a CSS expert, but I presume you could add margins and indents here.

Hope this helps.

.domain {
background-color : #FFFFFF;
background-image: url(wfrel5dombkgnd.gif);
font-family : Arial, Helvetica, Sans-Serif;
font-size : 12px;
/* font-weight:600;*/
text-decoration: none;
color: #000000;
}
.domainsFor{
font-family:Arial,Helvetica,Sans-Serif;
font-size:12px;
font-weight:600;
color:#000000;
}
.prvlink {
color: "#000000";
font-family : Arial, Helvetica, Sans-Serif;
font-size : 11px;
font-weight: 600;
}
.prvvisited {
color: "#336699";
font-family : Arial, Helvetica, Sans-Serif;
font-size : 11px;
font-weight: 600;
}
April 01, 2005, 05:15 PM
<Pietro De Santis>
The List content box styling is controlled by content.css. After some experimenting, I think I have figured it out. I added the following to content.css:

A IMG { float: left; }

April 06, 2005, 09:00 PM
<Pietro De Santis>
Unfortunately, while this works, something goes wrong when Dashboard ViewBuilder copies the code form the template css file to the view css file: it drops the blank between the A and the IMG: �A IMG� becomes �AIMG� which, of course, won�t work. The �A IMG� syntax is called descendant selector.

I�ve never liked the way Dashboard ViewBuilder copies the css code from the template to the view. There�s been a problem since WebFOCUS 4.3.6: Hyperlink CSS code (the A element type) has some �dynamic pseudo classes� (link, visited, active, hover) that need to be in a certain order for them to work. Unfortunately, Dashboard ViewBuilder copies them in what looks like a haphazard order � so they don�t work.

From the W3C documentation:
quote:

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.