I want change text color etc of help_text in fields models.
I see in html that there is helptext class:
<span class="helptext">Sentenses</span>
so I try in my css file:
.helptext {
color: #bd512f;
}
and it dont do changes.
Is there collision with bootstrap?
In CSS, the style that is specified last is applied. Perhaps the styles of your frameworks are loaded later than the one you specified. Also, inline styles like your <span> have even more precedence.
I found the answer by code:
.helptext {
color: #bd512f !Important;
}
Related
How do I change the style of the accordion headers in ngx-bootstrap?
I tried everything. I copy pasted the code from the documentation for customizing the headers but it does not work. The tag generates a bunch of other tags with classes (mostly bootstrap classes). I get the css path to the heading from the Chrome's Inspector, but I can't change it.
The heading/link is in a <button> tag and even when I say button { color: red !important; } it does not work.
I tried everything, but it does not work.
Thanks in advance!
accordion-group {
::ng-deep {
div {
&>div.panel-heading.card-header.panel-enabled {
background-color: rgba(52, 58, 64, 0.15); // change the background of every accordion heading
.btn-link {
color: rgb(6, 10, 9); // change the accordion heading buttons style
}
}
&>div.panel-collapse.collapse.in.show>div {
background-color: hsla(210, 10%, 83%, 0.10); // change the expanded content style
}
}
}
}
::ng-deep{} - that's how you can change the styles of the component that comes from imported library.
The solution I gave is made with SASS (.scss file). I don't know if you can apply changes to the /deep/ components' styles in a regular CSS. If your Angular project is configurated with CSS you can change it to use SASS syntax with the following line:
ng config schematics.#schematics/angular:component.style scss
You can provide some custom CSS class to the accordion using the panelClass property.
Example
<accordion>
<accordion-group heading="Static Header, initially expanded"
[panelClass]="customClass"
[isOpen]="isFirstOpen">
This content is straight in the template.
</accordion-group>
<accordion-group heading="Content 1">
<p>accordion 1</p>
</accordion-group>
<accordion-group heading="Content 2" panelClass="customClass">
<p>accordion 2</p>
</accordion-group>
</accordion>
Then you need to set the css rules in the global style sheet in you project.
style.css
.card.customClass, .card.customClass .card-header, .panel.customClass {
background-color: #5bc0de;
color: #fff;
}
For more information visit the ngx-bootstrap documentation (Accordion Styling).
Just dealt with this issue after upgrading to most recent versions of angular, bootstrap, etc. and I want to provide a more detailed answer.
My experience is that there's really two main ways to do it
using the [panelClass] attribute and then supplanting the existing styling in the accordion component and its children.
This way is more finicky and will likely take a lot more trial and error to configure to your desired specs.
html:
<accordion>
<accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
<accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>
note the extra set of quotation marks in the [panelClass] - Angular looks for presets otherwise. You can get around this by initializing a string variable that contains the name of the custom class you desire and popping that in there, instead.
possible css (might not be precise):
accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}
Track down the specific classes the components utilize (your web browser's developer tools are useful) and use the usual css specs (::ng-deep, !important, '>', etc.), as necessary. In the accordion-group, for example, the headings for accordion-groups utilize .btn, .btn-link, etc.
E.g., if you wanted to change the default underlines in an accordion-group's heading to only display on the (hover) event:
html:
<accordion>
<accordion-group heading="test" id="blah"></accordion-group>
<accordion-group heading="test2"></accordion-group>
</accordion>
css:
#blah .btn{text-decoration: none;}
#blah .btn:hover{text-decoration: underline;}
I find method #2 to be simpler, it just requires a little investigation into the components you use (probably not a bad thing anyway).
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.
Let's say I want to include my content to somebody elses site. Is there a way to make my style unique and cannot be overriden by his css files.
I have my content in a div with specific ID. If I write my css like this
#divId a {
color:red;
}
The link color can still be overriden by his style. I hope the question is understandable...
#divId a {
color:red !important;
}
This will give your style precedence, but if he later uses !important in his own style for the same element it will follow normal cascading rules and override yours.
The Best would be if you would create different classes for action like this to not having trouble leater for example if you want some elements always red creade class like this :
.always-red {
color : red !important;
}
And create different files for this called helpers or something else. so now if you would like some different elements always red you can use it simply like this :
<div class="col-md-12 always-red">
// Some html in here which text color will be always red
</div>
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
I am working with Drupal and with that, I don't always have the freedom to add a class by altering a html tag, however. I would like to apply some Twitter Bootstrap styling on an element from my custom.css file (the bootstrap css file is loaded, so styling is available).
To illustrate it better, for example, I would like to apply class="img-polaroid" (TB base styling) to an image that I can interface as div.someClass in my custom css stylesheet. I don't have simple way to alter the img tag to have class="img-polaroid someClass".
I would like to accomplish the same in my custom stylesheet. In another words, the merge happens not in the html tag but in the css stylesheet itself. How can I accomplish this with the current technologies in place? Are we there to make this possible?
Thank You
p.s. I am aware of alternatives:
-use JS to append class
-Copy and past the styling of class="img-polaroid" into div.someClass {...}
But both seem like not so nice solutions
How you go about this depends on which CSS Preprocessor you're using. You must choose one if you want to avoid modifying TB itself or the markup.
Sass
.foo {
#extend .bar;
}
Output:
.bar, .foo {
// styles
}
LESS
.foo {
.bar;
}
Output:
.bar {
// styles
}
.foo {
// styles
}
You can locate the part of the CSS code that you want to apply to the element in the bootstrap stylesheet and rewrite the selectors or copy the code to another file with new selectors so the style applies to both
.selector-from-bootrap,
.my-new selector{
...
}