nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using CSS to supply image

dharrison

<p>Hello, </p>
<p> </p>
<p>Is it possible to set the image for an BIRT report element using CSS?</p>
<p> </p>
<p>I am currently able to dynamically retrieve an image via Javascript and then display it. However, I'm interested in using a CSS style sheet to do the same thing. The CSS style sheet would be dynamically loaded by BIRT and the specfic CSS style sheet would refer to the image I want to load.</p>
<p> </p>
<p>For example, I would like to create an empty element (such as a Text/HTML or Image) on the BIRT Report design, give it a CSS ID type of "logo", and dynamically pull the logo in from the CSS.</p>
<p> </p>
<div>
<pre class="_prettyXprint _lang-css _linenums:1">
.logo {
background-image: url(http://myServer/themes/logo_1338.jpg);
color : red;
}
</pre>
</div>
<div> </div>
<div> </div>

Find more posts tagged with

Comments

mwilliams

So, you don't want to apply this to a BIRT palette element? You want to apply this style to an element created within an HTML text box?

dharrison

<p>Thanks Michael,</p>
<p> </p>
<p>Correct. I want to bring the image in via a dynamically selected CSS file, at runtime. </p>
<p>I'm simply exploring options for having the Reporting layer use the same CSS as the rest of a web presentation layer is using. I don't particular like the idea of the image being pulled in via CSS, but it turns out it does work.</p>
<p> </p>
<p> The main step I was missing was to set the height of the element... it had a white background, so I couldn't tell that the image was actually loading due to the default report background also being white. After I set the height/size, it looks good. It works using a Text element or Image.</p>
<p> </p>
<div>
<p> </p>
<p>beforeFactory code to load a custom CSS file, based on account_id (or some other parameter).</p>
<pre class="_prettyXprint">
dh = reportContext.getDesignHandle();
if (params["account_id"].value != null){
dh.addCss("http://myServer:8080/SpagoBI/themes/account_"+ params["account_id"].value +".css");
}
else {
dh.addCss("http://myServer:8080/SpagoBI/themes/"+ "default" +".css");
}
</pre>
</div>
<p>Drop in a Text element</p>
<p>Specify the CSS Style of 'logo'</p>
<p> </p>
<p>Which pulls in something like this, depending on whichever CSS file was pulled in</p>
<div>
<pre class="_prettyXprint">
.logo {
background-image: url("http://myServer:8080/SpagoBI/themes/logo_1338.jpg");
background-repeat: no-repeat;
}</pre>
</div>

mwilliams

Awesome! I had this done very similarly, as well. I just wanted to make sure I was looking at it the same way as you.

Thanks for updating the thread with your solution.