I would like to understand where the div or ul CSS classes are defined.
For example I can see in my application code like this:
<ul class="carousel jcarousel-skin">
But when I search in all my application I can not able to find the declaration of class carousel jcarousel-skin
Can you help?
Well it is not a single declaration.
It is two classes applied (carousel and jcarousel-skin). Each could be anywhere in your css files, and they might not even exist as they might be used just for easy targeting from javascript.
You can use css style from external file by linking it to your html page or by html attribute "style" inside the html element.
There could be also a possibility that the CSS classes that you are looking for are referenced from remote location as CDN. You should look through css files which are linked as below:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
Related
I want to change the style of a commonly used component whose style is applied by framework, only in one case (component). I'm using Devextreme as framework with React JS.
I can mutate the corresponding class (.dx-texteditor.dx-editor-filled::after) in browser Inspect. Changing the style of the class in the main CSS or any other CSS file will be applied to all similar components. Also, if I use module.css, it doesn't work because I don't apply the class myself (It is applied by framework). What is the best way to change the style of such a class only for a specific component?
What is module.css? I'm going to assume it's your own CSS file...
I don't know if it will help, but the application of a style sheet depends on the order given in the page.
So your CSS file should be placed after that of DevExtreme's CSS files, if I'm not mistaken.
This means that you should therefore obtain an order like this:
<head>
<!-- ... -->
<!-- DevExtreme -->
<link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="false">
<link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="false">
<!-- Customs CSS -->
<link href="css/module.css" />
</head>
The 2nd solution to test, but which I do not recommend at all, is to put !important after your CSS properties:
.dx-texteditor.dx-editor-filled::after {
color: red !important;
}
Otherwise you have to go through your own CSS class and add it to the DevExtreme component.
I specify that I have not tested these solutions, but these are some leads that I can give you
Currently, I'm trying to code a website with a slideshow shown in this w3school tutorial here : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
The example as shown has their own set of CSS to enable the transitions and effects of the slideshow to be smoothly fading in and out. Upon adding CSS bootstrap, the effects of the slideshow got rough and the transition isn't smooth anymore.
CSS used : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
I linked it before my css file like this :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
followed by
<link rel="stylesheet" href="css.css" type="text/css">
From previous examples I searched, many said to put bootstrap before my own css file so that my own codes will not be overwritten. But I've tried but it does not work in this case. Could anyone advise me on this? Thank you.
Try adding !important to the CSS rules you don't want to be affected.
Try using your browser's inspection tool to see what CSS rules are applying to each element
See for more here:
https://stackoverflow.com/questions/9245353...
you need to namespace the class names used in the slideshow, so that it wasn't affected by the bootstrap styling. It's hard to deal with bootstrap specificity in case classnames override.
My suggestion is to use something like w3_slideshow_ and prefix all the class names with it. class="text" will turn into class="w3_slideshow_text", etc. Then update styling and js accordingly.
If there are still some issues, check the inspector for specificity and override the styling applied by bootstrap with !important (not the cleanest approach) or by applying a more specific selector.
As Giann Dall mentioned, you could try adding !important
I think your CSS attributes may be overwritten by CSS from bootstrap because it is more specific.
For example:
body > p {}
is more specific than
p {}
Therefor, body > p {} is applied
I am loading basic semantic-ui.min.css through CDN, ie:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
However, my page has other divs like this:
<div id="wrapper">
<div id="menu-in-react"></div>
<div id="container-for-non-react-stuff"></div>
</div>
I would like semantic-ui css to be applied selectively to only:
div #menu-in-react
and not to
div #container-for-non-react-stuff
However, right now, by including the semantic-ui-css file, it is applying its style to div #container-for-non-react-stuff too.
How do I limit the application of semantic-ui.css to only specific divs (or exclude from certain divs)?
Note: I also tried using require('./myDist/semantic.css') using webpack to load the css, but this also ended up in semantic-ui taking over all my divs.
Thanks!
If you use sass, you can nest the entire semantic ui framework inside a parent selector so that it only applies to elements within:
#menu-in-react {
#import 'semantic-ui';
}
See here for more info:
https://codepen.io/trey/post/nesting-sass-includes
Do note that you'll have to save the framework css as a local sass partial like _semantic-ui.scss in order for this to work, as sass imports will not parse externally hosted resources.
I wouldn't recommend importing the entire framework without cleaning up some of it at least; the framework css includes some dom element styles (ie. html, body, etc) which would be quite useless when nested in a parent selector.
Is there a way that I can define css so that, for example all paragraphs (<p>) on this specific page are formated according to that css, but not other pages on the plone site?
Inline-css does work, but that's pretty annoying for larger tables I'd like to style.
You should use
ploneCustom.css or related custom CSS file which is merged with other CSS files in portal_css registry
Use <body> CSS classes to target a single page only
More <body> CSS can be added for custom needs. What kind of page you need to target with CSS.
http://collective-docs.readthedocs.org/en/latest/templates_css_and_javascripts/css.html#adding-new-css-body-classes
Also you can include CSS as <head> viewlet if needed but this approach is not recommended.
http://collective-docs.readthedocs.org/en/latest/views/viewlets.html#viewlets-for-one-page-only
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.