0

I've embedded a widget on my page that links to this javascript file: https://widget.zola.com/js/widget.js

The widget is generating a header section which i'd like to remove. https://widget.zola.com/v1/widget/registry/taylorandjaredseptember7/html?:1

I've inspected the element and was able to target the section and add a display: none to it. That worked, but when I copied the code into my CSS style sheets, it was not working. I even tried adding !important to it with no luck.

Is there something obvious that I'm missing?

This is the code I added to my stylesheets. 

.registry-header {
display: none !important;
}

I also tried targeting the classes it was nested in, like so:

.row registry-header-section .col-xs-12 .registry-header {
display: none !important;
}

Other background info that might be helpful: - My site is a Wordpress site using the Divi theme.

Gopi
  • 620
  • 8
  • 16
TayG
  • 1
  • 1
  • Your css work perfectly, just your CSS style sheets don't affect `.registry-header`. Try to use the CSS editor to customize the appearance of your WordPress site – Amine KOUIS Mar 05 '19 at 19:18

1 Answers1

0

Establish where the current rules are being generated from in the Document Tree and then use this question and answer to find how to effectively overwrite these rules.

Possible Routes:

  • You may need to use an id tag on the element and apply the style to the #id, because this will overwrite .class level styling.

  • You need to be as specific as possible with your targetting; your second example is better than your first.

  • Remember if the widget uses just a JS file then it's probably editing the CSS via Javascript inline, so it will be doing so inline, therefore you may need to add the style adjustment overwrite inline into the page itself. Set your <style> block to appear as late in the <head> as possible and add !important to the elements required

  • Create your own Javascript script to load after their widget script and to force CSS to adapt as you want it, with javascript or jQuery code blocks.

Crazy idea.... but it might just work.

You would first need to export from your Browser Inspector the current applied styling generated by the widget and save this to your own (domain-local) CSS file.

You can then use Content Security Policy to specifically block 'unsafe-inline' and 'unsafe-eval' in your style-src: part to block javascript and other inline styling from being applied to the page.

Replacing this with your export CSS style sheet should avoid Javascript/inline styling and allow you to tweak the styling as you need by simply editing your CSS code. You ca fine tune this depending on your dependancies and codebase.

Community
  • 1
  • 1
Martin
  • 22,212
  • 11
  • 70
  • 132