How to change default CSS styling from HTML blocks?

Developer help
1
  • Version 3.18.1
  • Environment production
  • Database mysql
  • Mail SMTP
  • Theme Casper, Version 3.0.12

I’m trying to embed some Plotly graphs into my blog pages. It works really nicely with injecting some Javascrip code into the certain Ghost blog page and also loading the plotly.js min library in the <head> section of the same page.
However, it seems that the Plotly buttons are decorated with my basic settings for URL tags, like a black underscore which becomes blue while hover over. This is the default behaviour of my theme I guess.

Screenshot 2020-09-08 at 17.05.02
Screenshot 2020-09-08 at 17.05.021710×1052 140 KB

Please see the screenshot above, I hope the decoration is evident.
How to override this basic styling in my custom HTML block as below:

<div id="myDiv" style="width:100%;height:450px;"></div>

and the Javascript which generates the 3D graph is this:

<script>
    Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}
  
var z_data=[ ]
for(i=0;i<24;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
           z: z_data,
           type: 'surface'
        }];
  
var layout = {
  title: 'Mt Bruno Elevation',
  autosize: false,
  width: 500,
  height: 500,
  margin: {
    l: 65,
    r: 50,
    b: 65,
    t: 90,
  }
};
Plotly.newPlot('myDiv', data, layout);
});
</script>

By default the Plotly plot buttons should be without underscore. (I’m sorry that I can’t place another image for better understanding, as I am new to Ghost forum.)

2

In code-injection header try:

<style> .myDiv a { text-decoration: none; } </style>
3

@jeff, thanks for this. It seems still not work, even the CSS style is applied, if I understand well from the inspection window.

Screenshot 2020-09-09 at 08.17.38
Screenshot 2020-09-09 at 08.17.382880×1394 649 KB

What can be the reason that the new style is still not applied?

4

The CSS is using a class selector. If you want to style myDiv, it would need an ID selector like:

#myDiv a {
    text-decoration: none;
}

Or you can style using a class:

.js-plotly-plot a {
    text-decoration: none;
}
1 Like
5

thanks for your reply @minimaluminium , correct, I swapped the class and id selectors, …however it is still not working, so any effect. I tried with !important as well but the same.
What else can override this property?

6

Hmm, really not sure about that without looking at it first. Can you please send me a live URL to your site, so I can take a look at it?

7

Sure, I appreciate it. This will lead you there: https://towr.co/HpuOeRO

8

Thanks for the link, it really helped! The lines were actually box-shadow, not text-decoration :sweat_smile:

You can remove them with this CSS.

.js-plotly-plot a,
.js-plotly-plot a:hover {
    box-shadow: none;
}
1 Like
9

Thank you, this works perfectly ;) …I wouldn’t arrived alone, …now I can return to build some nice content in my Ghost blog :)

1 Like