# Styling Elements in Viewer

**URL:** <https://community.cesium.com/t/styling-elements-in-viewer/32487>\
**Category:** CesiumJS\
**Created:** [May 27, 2024, 3:42pm UTC](https://community.cesium.com/t/styling-elements-in-viewer/32487 "2024-05-27T15:42:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![j.jeuschede](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/j.jeuschede/32/3476_2.png) [@j.jeuschede](https://community.cesium.com/u/j.jeuschede)\
**Post date:** [May 27, 2024, 3:42pm UTC](https://community.cesium.com/t/styling-elements-in-viewer/32487/1 "2024-05-27T15:42:21Z")

</div>

Hi everyone,

I am developing an application with CesiumJS and I would like to know how I can change the color of the text and background in the Infobox for data that I stream into my app. I automatically get the feature info for those datasets in a table in the infobox and I have been able to change the background color.  
Now I want to change the text color and the row colors of the attribute table. Unfortunately, the CSS changes that I think should work do not for this.

Here is what I mean:

 ![grafik](https://global.discourse-cdn.com/cesium/original/3X/d/2/d2e5e9d3586c483ed1815ca2afa5f59f78a63bde.png)

I have succesfully been able to change the background to white but the colors of the rows in the table as well as the text color, I am not able to change.  
Here is what worked in CSS  
.cesium-infoBox {  
background-color: rgb(255, 255, 255) !important; /\* Default infobox background color \*/  
color: white  
}

Now this is what I could find that aligns with the text colors that are visible:  
Changing the colors here does not have any impact in my app!

.cesium-infoBox-description table {  
color: #edffff;  
}  
.cesium-infoBox-defaultTable {  
width: 100%;  
color: #edffff;  
}  
.cesium-infoBox-defaultTable tr:nth-child(odd) {  
background-color: rgba(84, 84, 84, 0.8);  
}  
.cesium-infoBox-defaultTable tr:nth-child(even) {  
background-color: rgba(84, 84, 84, 0.25);  
}  
.cesium-infoBox-defaultTable th {  
font-weight: normal;  
padding: 3px;  
vertical-align: middle;  
text-align: center;  
}  
.cesium-infoBox-defaultTable td {  
padding: 3px;  
vertical-align: middle;  
text-align: left;  
}  
.cesium-infoBox-description-lighter {  
color: #000000;  
}  
.cesium-infoBox-description-lighter a:link,  
.cesium-infoBox-description-lighter a:visited,  
.cesium-infoBox-description-lighter a:hover,  
.cesium-infoBox-description-lighter a:active {  
color: #000000;  
}  
.cesium-infoBox-description-lighter table {  
color: #000000;  
}  
.cesium-infoBox-defaultTable-lighter {  
width: 100%;  
color: #000000;  
}  
.cesium-infoBox-defaultTable-lighter tr:nth-child(odd) {  
background-color: rgba(179, 179, 179, 0.8);  
}  
.cesium-infoBox-defaultTable-lighter tr:nth-child(even) {  
background-color: rgba(179, 179, 179, 0.25);

I would really appreciate some help here.

Thank you very much

Jan