How to add styling to a dijit Dialog using CSS? I am unable to add background-color etc to it.
.tundra .dijitDialog{
font-size: 12px;
background-color: #1c3664 !important;
}
It is not working! :-/
If you are using #import to render dojo related css then please change it to link tag. link tag will allow you to override your dojo theme css.
Related
I have a page that uses a Bootstrap modal. When it opens I can see a style added to the modal-open class:
I have can correct this in the page styling itself:
.modal-open {
overflow: inherit;
padding-right: 10px !important;
}
but this I would rather get to the source. Any ideas as to where to find this styling? I can't find it in the Bootstrap css.
I'm using Bootstrap 4 and I'm trying to set padding for nav links inside navbar in my custom CSS file:
.nav-link {
padding: 0.15rem;
}
And the style that is used is this:
As you can see, the custom.css is nowhere to be seen. The css file where the current style is from is inside bootstrap.css.map.
Why is it reading the style from bootstrap.css.map and not from my custom CSS file? I bundled all styles together, the bootstrap.css is loaded first and my custom CSS is loaded last.
You need to understand how specificity is calculated in css, it is an easy topic.
If you want a quick solution, you can use !important next to your css styling like so :
td { height: 50px !important; }
Sorry, my original answer I looked at the debugger output.
If you need an overwrite. In one of my projects I gave the surrounding tag an id.
<ul id="myNavBar">
Then the following CSS worked for me
#myNavBar .link-item {
padding: 0.15rem;
}
I am trying to style my hyperlinks but Bootstrap 4 "Reboot" overwrites my css and changes the styling of my links to this:
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
Other than copying the reboot css, modifying and hosting it locally, is there any way to prevent reboot from styling the links? It does not matter if you load your custom css last, reboot always writes over the top of it.
Adding !important at the end of style is the easy way but, that triggers a waterfall where you will need to add more !important in your styling files.
This is why you should learn tree structure of styling.
What I recommend is add a class name to your body tag and override reboot.css or whatever like
<body class="body-class-name">
and then go into your css file which has the highest priority and put
body.body-class-name .a{text-decoration: none}
Happy coding!
It looks, that you load your CSS in the wrong sequence.
Put the bootstrap CSS above your own CSS.
Then you can overwrite bootstrap-settings without !important (which should still be the very last option).
try !important at the and of the style.
a {
color: #007bff !important;
text-decoration: none !important;
background-color: transparent !important;
-webkit-text-decoration-skip: objects !important;
}
I'm using ui-bootstrap-tpls-2.5.0.min.js. I changed dropdown-menu's backgorund color like this in specific html.
.dropdown-menu {
background-color: transparent;
box-shadow: none;
}
But it makes datepicker's background transparent too. I know why it happened, so I cleared that line but nothing changed.
So I want to change datepicker popup's background using CSS selector like this,
.datepicker .ul{
background-color: white;
}
//this is an example code.
what selector do I have to choose to change datepicker's background?
If this is what you require, you need to add these two styles that are highlighted.
Happy coding :)
I am trying to use DatePicker in my site. I have a main.css and it has a style as follows:
body {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 75%;
}
When I put the datepicker into the site the style of datepicker is changing.
Is there any way to prevent from changing it?
To fix it, find the specific style property(properties) in the body that affect your date picker and then specifically reset those properties in the datepicker css.
eg
/main.css/
body{
font-size: 2px;
}
for example ,the font-size will apply to everything you put on the page (including the datepicker) so to fix it go to datepicker css, and change font-size property for the specific element.
ie
/*datepicker css */
#foo{
font-size: 4px;
}
Cheers
If I understand you correctly, you can't prevent it as such, but you can override it and put it back as it was. You'll need to apply CSS to the date picker itself to override what the body styles are doing to it.
Does the date picker element have an ID, so you can apply CSS directly to it?