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.
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.
Related
So I got my custom app.css in my project and I'm using bootstrap template. Now when I create new button style for example in app.css it's accessible everywhere (on every page since I got master template and other pages are extending it) but when I override bootstrap theme in app.css it's not working. When I use same code to override bootstrap on top of the page using <style> tags it's working. app.css is included properly and after bootstrap.css so any idea what I'm doing wrong ?
Try a cache refresh, for me in Chrome, I use Ctrl+Shift+R.
If this doesn't produce any results, use the inbuilt inspectors on Chrome or Firefox to view the attached properties to the element you are editing. If the app.css is overriding the bootstrap.css, you will see something like the below image, showing the app.css is above the skin-purple.min.css meaning the app.css was the latest to be loaded.
I would say that there is a hierarchy, try to include the bootstrap.css after the app.css, you could also give those css attribute an !important like so:
#bla {
display:none !important
}
But that is not a good practice I think, it may be ok if you do not override alot of the bootstrap.css
You could also try this:
http://bootstrap-live-customizer.com/
to customize your bootstrap.
It most probably is a style precedence issue. I found this article very useful to at least understand what goes on with style precedence and what specificity is.
In your very case it may be helpful to simply use a class selector such as
.mybutton button{
color: blue;
font-size: inherit;
...
}
and give your buttons the attribute class="mybutton". In the class definition you may freely override whatever you want and also let other properties be inherited from Bootstrap.
There is also the !important rule. However, it is usually referred to as a bad practice, since it breaks the normal cascading rules and makes debugging an incredibly painful task.
I am building a module in Bootstrap for Joomla. It has its own stylesheet, but the activated template (where I test it in) also uses Bootstrap and classes which adds some CSS to my module (tables, buttons, etc.).
I want my module to look the same in all different templates of Joomla. Is there a way of disabling the CSS of the template for my module so it just looks same on every template? Or do I have to declare every single line in CSS (with !important, because I think that's a lot of work?)
The CSS is rendered within an HTML document, so you can't just "disable" it on a piece of the page (which is your module).
One possible approach is to render your module inside an <iframe> so it would be a separate document into the main HTML document. But I'm not sure if this would be good/recommended, so I would rather rewrite my CSS rules so they all are inherited from my module.
For example: if your module is the "Fancy Contact Module", you can use an wrapper div like <div class="fancy-contact-module"> and write all your CSS rules like:
.fancy-contact-module p {
color: green;
}
.fancy-contact-module a {
text-decoration: none;
}
and so on.
You can also use your wrapper div to apply Reset CSS or Normalize CSS (or any other similar tool), so you won't need to override all CSS rules manually. You can see more about Reset and Normalize here: What is the difference between Normalize.css and Reset CSS?
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
I have a button on one of my pages in wordpress and I want to float it to the right because right now it is floated left.
Can I do that with css since its created using shortcode? If so, what would I edit?
Shortcode is just a shortcut for outputting normal, pre-formatted HTML. You can write a CSS rule to style the element(s) but it depends on the markup the shortcode is generating:
Output the shortcode and view the page in a browser.
Inspect with Firebug or Chrome Dev Tools (for example) or CTRL+U.
Look for ids or class names on or above the generated elements.
Write a CSS rule that targets the elements using info from #3. You could add this rule in the style.css file in your theme folder.
It's possible that your rule will be overridden by another style; shortcode providers often "sandbox" CSS with inline styling, so that a user's other styles don't interfere with their elements. The quickest solution is to add the !important override to your rule, e.g.:
#target {
float: right !important;
}
This overrides future inline styling on the element.
!important rules
I am injecting some html + css into every page from my firefox plugin. But this styles is sometimes getting overridden by the style sheet. I want to stop this behavior.
I know this can be solved by some css tricks. Adding !important for instance. But is there a way available in firefox or xul to do this easily?
Using !important alone is not enough, the webpage could do the same and still override your styls. You can use the Stylesheet Service to register a user stylesheet. If you then use !important then web pages will no longer be able to override your styles.
Note that user stylesheets are always global and apply to all webpages as well as browser's own XUL documents. You can restrict them to particular webpages using #-moz-document.
#MEGA_PLUNGIN a {}
#MEGA_PLUNGIN span {}
#MEGA_PLUNGIN div {}
#MEGA_PLUNGIN table {}
...
Not the best solution but right...
To me, this is one case where you would certainly use !important.
That said, you can try to use specificity to ensure your styles are being set.
So, make sure that you are targeting the elements are precisely as possible, in order to override those styles that are not as specific.
For instance, if you have this structure
<body>
<div>
<h1 class="something">
<a href>
The site's styles may target
h1.something a{
You should aim to do this
body div h1.something a{
which is more specific and would override the above styles.
The other thing you might be able to do is append your styles just before the </head>, which would make them appear last in the cascade, and, if they are equal, will be applied.