Best practice to overwrite CSS of cesium-toolbar, cesium-infobox, cesium-animation, cesium-timeline

[dietmar...@gmail.com]

For my custom app I would like to avoid the default look of Cesium and would like to use a flat design for cesium controls (especially animation clock and timeline).

Would you suggest to build those controls from scratch and use the low level Cesium methods to implement the functionality or rather overwrite the CSS of the controls?

It becomes tricky when adding additional controls, such as a start/ stop globe rotation button... how would you suggest to approach this?

[Hannah Pinkos]

Hello,

We've made overriding the default CSS fairly easy.  Every piece should have a CSS class you can tap into.  

For an example, take a look at our 'lighter' theme: 

http://cesiumjs.org/Cesium/Apps/CesiumViewer/index.html?theme=lighter

relevant code: 

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Apps/CesiumViewer/CesiumViewer.js#L140-L141

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/lighter.css

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Animation/lighter.css

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Timeline/lighter.css

Best,

Hannah