# Using CSS to style contents of infoboxes

**URL:** <https://community.cesium.com/t/using-css-to-style-contents-of-infoboxes/8742>\
**Category:** CesiumJS\
**Created:** [October 10, 2019, 5:27pm UTC](https://community.cesium.com/t/using-css-to-style-contents-of-infoboxes/8742 "2019-10-10T17:27:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adam\_Roy](https://avatars.discourse-cdn.com/v4/letter/a/bcef8e/32.png) [@Adam\_Roy](https://community.cesium.com/u/Adam_Roy)\
**Post date:** [October 10, 2019, 5:27pm UTC](https://community.cesium.com/t/using-css-to-style-contents-of-infoboxes/8742/1 "2019-10-10T17:27:21Z")

</div>

**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 =

’

  ![](https://cdn.glitch.com/8f7be44e-8224-42df-a7e0-07f59ff17df1%2FScreen%20Shot%202019-10-03%20at%205.26.11%20PM.png?v=1570145265101)\

This is the beginning of my story.  
  
Next

  

';

``

---

<div class="post-metadata">

**Author:** ![Adam\_Roy](https://avatars.discourse-cdn.com/v4/letter/a/bcef8e/32.png) [@Adam\_Roy](https://community.cesium.com/u/Adam_Roy)\
**Post date:** [October 12, 2019, 6:48pm UTC](https://community.cesium.com/t/using-css-to-style-contents-of-infoboxes/8742/2 "2019-10-12T18:48:12Z")

</div>

Never mind! Figured it out.

---

<div class="post-metadata">

**Author:** ![Adam\_Roy](https://avatars.discourse-cdn.com/v4/letter/a/bcef8e/32.png) [@Adam\_Roy](https://community.cesium.com/u/Adam_Roy)\
**Post date:** [October 12, 2019, 6:48pm UTC](https://community.cesium.com/t/using-css-to-style-contents-of-infoboxes/8742/3 "2019-10-12T18:48:18Z")

</div>

Never mind! Figured it out.

---

<div class="post-metadata">

**Author:** ![Jingdi\_Zhang](https://avatars.discourse-cdn.com/v4/letter/j/b5ac83/32.png) [@Jingdi\_Zhang](https://community.cesium.com/u/Jingdi_Zhang)\
**Post date:** [December 12, 2019, 7:49am UTC](https://community.cesium.com/t/using-css-to-style-contents-of-infoboxes/8742/4 "2019-12-12T07:49:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![11115](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11115/32/3100_2.png) [@11115](https://community.cesium.com/u/11115)\
**Post date:** [December 12, 2019, 11:44am UTC](https://community.cesium.com/t/using-css-to-style-contents-of-infoboxes/8742/5 "2019-12-12T11:44:27Z")

</div>

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);