[GitHub] [incubator-superset] rusackas commented on issue #8314: How to change Big Number CSS to be like that?

[GitBox <gi...@apache.org>]

rusackas commented on issue #8314: How to change Big Number CSS to be like that?
URL: https://github.com/apache/incubator-superset/issues/8314#issuecomment-553144943
 
 
   @syazwan0913 You could, in theory, do this with CSS. When you "Edit Dashboard" there's an option to add CSS. If the number and sequence of these Big Number components on your dashboard is static, you can use CSS nth-of-type trickery. I made a quick example to illustrate the case:
   
   ![image](https://user-images.githubusercontent.com/812905/68715696-70252e80-0557-11ea-931d-3942573b9a88.png)
   
   Syles applied here are as follows.
   
   1) Set the background color of each instance.
   `
   .superset-legacy-chart-big-number:nth-of-type(1){
       background: orange;
   }
   `
   
   2) Put the subheader where you want it (you can set the width so it wraps, etc.)
   `
   .superset-legacy-chart-big-number .subheader-line {
       text-align: left;
       position: absolute;
       bottom: 10px;
       left: 10px;
   }
   `
   
   3) Add a CSS pseudo element, and give it the icon you want as a background.
   `
   .superset-legacy-chart-big-number:nth-of-type(1)::after {
       content: '';
       display: block;
       height: 60px;
       width: 60px;
       background: url(https://image.flaticon.com/icons/png/512/121/121901.png);
       background-size: contain;
       position: absolute;
       bottom: 20px;
       right: 20px;
   }
   `
   
   That's super hacky, but might get you the result you want without having to make new components.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org