In my css file, i've overriden a bootstrap uib-tooltip class . This applies to all tooltips of my page but i want that one of them uses the bootstrap default css , how to do that? The :not selector didn't work
According to your pen, You need to use
div:not(.kmg)>.text-primary{
color:red !important;
}
See the codepen here
https://codepen.io/anon/pen/zQbJKb
Related
I've been trying to read the documentation, but I don't get it. There doesn't seem to be any stackoverflow questions too. Right now using Polymer v1.0 with MVC 5.
For example, let's take the paper-toolbar. I have this sample code:
<paper-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<span class="title">My Title</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>
How do I apply a white background to it?
In the polymer website:
I've seen that there are custom properties and mixins... but how do I use them?
For example, how would I override the "--paper-toolbar-background"? to make the background white?
Thanks!
The approach I recommend is having an element for styling purposes, for example an app-theme.html. Put it inside your elements directory and import it.
If your app-theme.html looks like the following, it should style your paper-toolbar properly:
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: var(--paper-blue-900);
}
</style>
I use this approach for the Paper elements. For custom elements I put the styling inside each element.
Though theoretically you could just take my above code and paste it just before you use the element, but this approach has the issue that the default styling is applied before, resulting in breaks.
Of course you could also just use a normal app.css file to style the paper elements, but then you would have to use the !important attribute to overwrite the default styling of the element. Don't recommend it though.
Hope it helps.
George
Is there a proper way to have 2 differently styled jquery ui buttons on the same page?
I am able to copy css around for the second button but there are a lot of different !important styles that I keep needing to add a second !important after the first in order to change the style.
for ex:
.ui-state-active {
background:none !important;
background-color:#E1E1E1 !important;
color:#000 !important;
}
I will then have to go and add right after (and it needs to be after
.new-theme.ui-state-active {
background:none !important;
background-color:red !important;
color:#000 !important;
}
the problem is these important styles are all over for each state so I have to mind where they go. Is this normal or is this usually handled a different way?
Are you using an older version of jQuery UI that requires you to use !important to override their styles? Newer version have fixed this: Use of !important in jquery-ui.css should be avoided.
If you can/are using a newer version, try getting rid of !important and instead rely on selector specificity to get your desired results.
I would recommend using jqueryui-speciffic css. Except difficulties with different button stylings, there may be performance problems while rendering larger amounts of buttons.
This resource is relatively old but I found it very valuable while using jqueryui css.
There are numerous posts that indicate that the z-index of a jQuery UI dialog can be set by passing a parameter zIndex to .Dialog(), including
Last jQuery modal dialog z-index overrides initial modal z-index
However, that parameter is not listed in the jQuery UI API documentation
http://api.jqueryui.com/dialog/
If I set it anyhow, the z-index of my dialog is unaffected.
How can I set the z-index of the dialog?
It turns out that I was referencing a custom jQuery UI Theme built for an old version of jQuery UI.
Referencing the base theme for the version I'm now using resolved this issue.
For upgrading a custom theme to the current version, see
How to upgrade a custom jQuery UI theme?
I think it would be preferable to do this in the CSS based on the selector, so something like:
#dialog {
z-index: 100000000;
}
Or, in the js:
$('#dialog').css('z-index','1000000');
Or do you need to set a dynamic z-index value?
I tried adding a jquery-ui datepicker to my website. I downloaded the necessary jquery-ui js components and Smoothness theme css. The problem is that when I add the widget to my site, it looks like this:
Broken datepicker
as opposed to this:
What it should look like
I'm using customized twitter bootstrap as the main style for my site, but it doesn't seem to affect the styling of the widget according to Chrome Inspect element.
Any ideas what could be wrong, or how could I investigate this further?
you need to change the size of your font :
.ui-widget {
font-size: 11px;
}
I'm using twitter bootstrap. boostrap declared in my master page. But i need some form do not use boostrap style.
How to stop boostrap into some div or form?
My target is
You can devide your bootstrap CSS to 2 different CSS. The one will have the general CSS for all the website and the second one will have only buttons grids ... e.t.c . So Once you need it you just add the general CSS into your webpage or you remove it if you don't really need it
The general styles are between line 1-176 for bootstrap.css