Hey Omar,
I have a similar question, could you kindly check the following questions. Thanks for your time.
- A concise explanation of the problem you’re experiencing.
I want to control the infobox style in my external CSS file that I have. I start with my application in the Cesium workshop code. I found several discussion pointed out that this could be achieved by modifying the info-box CSS file in Widget, so I create a new CSS file that simlar to the info-box CSS file and I include it in the working directory, however, adding the CSS file is not working. I need to manually add the CSS control in the description. I understand there must be a way to add the CSS file, but I can’t find a better solution. Could you give me some suggestions? Thanks
Cindy
- A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
Javascript
//load css
var frame = viewer.infoBox.frame;
frame.addEventListener(‘load’, function () {
var cssLink = frame.contentDocument.createElement(‘link’);
cssLink.href = Cesium.buildModuleUrl(‘test.css’);
cssLink.rel = ‘stylesheet’;
cssLink.type = ‘text/css’;
frame.contentDocument.head.appendChild(cssLink);
}, false);
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
entity.description=
\
.cesium-infoBox-defaultTable th {\
font-weight: normal;\
padding: 10px;\
vertical-align: middle;\
text-align: center;\
}\
.cesium-infoBox-defaultTable td {\
padding: 10px;\
vertical-align: middle;\
text-align: center;\
}\
.cesium-infoBox-description {\
font-family: sans-serif;\
font-size: 17px;\
padding: 4px 10px;\
margin-right: 4px;\
color: #edffff;\
}\
.cesium-infoBox-title {\
display: block;\
height: 20px;\
padding: 5px 30px 5px 25px;\
background: rgba(84, 84, 84, 1.0);\
border-top-left-radius: 7px;\
text-align: center;\
text-overflow: ellipsis;\
white-space: nowrap;\
overflow: hidden;\
box-sizing: content-box;\
}\
\
\
| Type | \
Power | \
\
\
| Name | \
'+"utility pole"+' | \
\
}
CSS:
.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: 10px;
vertical-align: middle;
text-align: center;
}
.cesium-infoBox-defaultTable td {
padding: 10px;
vertical-align: middle;
text-align: center;
}
- Context. Why do you need to do this? We might know a better way to accomplish your goal.
I just want to modify the css style for the infobox.
- The Cesium version you’re using, your operating system and browser.
I use the cesium workshop
Browser: Google Chrome
