Using CSS to style contents of infoboxes

CesiumJS
1

Hi all,

I’m trying to apply some CSS to a button inside an entity’s description property, but nothing I do seems to actually make any difference—the button is still displaying with default styling. Here’s an example of the code. What am I doing wrong?

Thanks,

Adam

CSS:

.storybutton {

background-color: #3498DB;

color: white;

padding: 12px;

font-size: 12px;

border: none;

cursor: pointer;

}

``

HTML:

var story1 = viewer.entities.add({

id: “story1”,

position: Cesium.Cartesian3.fromDegrees(-69.99034, 45.23357),

billboard: {

image: pinBuilder.fromColor(Cesium.Color.BLACK, 48).toDataURL(),

distanceDisplayCondition: new Cesium.DistanceDisplayCondition(

10.0,

1e6

),

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

},

viewFrom: new Cesium.Cartesian3(0, 0, 8000)

});

story1.name = “John Hayes: Finishing Strong”;

story1.description =

’

8f7be44e-8224-42df-a7e0-07f59ff17df1%2FScreen%20Shot%202019-10-03%20at%205.26.11%20PM.png?v=15701452651011013×473
\

This is the beginning of my story.

Next


';

``

2

Never mind! Figured it out.

3

Never mind! Figured it out.

4

Hi Adam,

I actually met a similar problem you met. I want to add an external css to the infoBox. Could you tell me how do you solve it? Or Could you tell me what did you change in the code you post? Thanks

Cindy

5

I use this code

frame.addEventListener(‘load’, function () {

var cssLink = frame.contentDocument.createElement('link');

cssLink.href = Cesium.buildModuleUrl('url');

cssLink.rel = 'stylesheet';

cssLink.type = 'text/css';

frame.contentDocument.head.appendChild(cssLink);

}, false);