I´m using Twitter Bootstrap as a framework for my project.
I also have a div#widget with name and email form fields and a submit button
i want to reset to defaults all the css only for that div and use my custom classes.
i tried with:
div#widget * {
background-color: #FFF;
font-size: 12px;
...
}
the problem with that code is that i need to specify every css property
I´m looking for a magical solution like
div#widget * {
// reset to factory defaults here
}
You can work it the other way round.
With :not() selector.
div:not(#widget) element {
/*Rules here will apply to each element wich are not inside div#widget */
}
I'm afraid The only way to do it is to study an element defaults and to painfully reset the needed styles.
Related
i have tried to write css for the “item-native” class in ion-item but it was not applied how can i write custom css for the “item-native” class
Use this:
ion-item::part(native) {
/* Custom CSS here */
}
If your style does not working that means either your other styles are overwriting your custom css or you have written your styles at wrong place.
Just try writing first at the root css, just for the testing whether it works or not.
.item-native {
// Add your custom css here, write important at the end like this
color: red !important;
}
I am using Slick JS plugin. By default there is a class "slick-slide" that is added on all the slides. I notice that the slides that are in currently visible have a another class added called "slick-active".
Lets say I want to display 3 slides (slidesToShow: 3). So at all times all the slides in view will have 2 classes namely "slick-slide" and "slick-active".
I am trying to target the last slide which has the class "slick-active" using CSS. I tried all possible combinations of selectors, but no luck so far.
First I am giving a right margin to all the elements with "slick-active" class. Then I would like to target just using css the last element with "slick active" class, and give margin right of 0.
.slick-active {
margin-right: 15px;
background: blueviolet;
}
.slick-slide.slick-active:last-of-type {
margin-right: 0;
background: orangered;
}
I even tried using nth-last-of-type(1) and nth-last-child() selectors. Can someone please suggest me the correct CSS selector to target the last slide with a class of slick-active. I dont want to target the slides using javascript or jquery. Just a pure CSS solution will be appreciated. Thank you
You can try to provide a separate id to the slide if it is not being created dynamically. And then apply your required CSS.
We have to target last child specifically.
.slick-active:nth-child(3) {
color: red;
}
You can use
.slick-active:nth-child(3n){}
See this fiddle
You can use the + selector:
.slick-active + .slick-active + .slick-active {
//your property
}
What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
I am using Active Admin, is there a way to override CSS used by the active admin theme?
For eg:- I have to change css of submit button which is disabled to cursor: wait; and make it unclickable.
What's the best way to do this?
just make a new file
app/assets/stylesheets/active_admin.css.scss
and put your scss code there.
(Or just active_admin.css with css code)
You can override any CSS property by overriding the CSS class or IDs in you own stylesheet with !important attribute if you do not have any access to the original stylesheet
For example, use
.submit-button {
color: white !important;
}
to change the color of the submit button text.
It is easy to change the styles in Rails 4. Go to
app/assets/stylesheets/active_admin.css.scss
OR (depending upon where you have kept the file)
vendor/assets/stylesheets/active_admin.css.scss
and add styles in there.
I put my form classes in a container class to create a more specific reference. Like..
.form-container {
font-family: 'open-sans';
width: 420px;
.text-field-class {
input{border:none; border-bottom: 1px;}
}
}
this is working so far... for the most part. Better than important. Though maybe using an ID would be the more appropriate way.