I'm using this package
https://reactdatepicker.com/#example-select-time-only
Which style look like this originally:
And I'm trying to customize the select dropdown for time, and want it to look like this:
I only modified the style in the browser to show my desired style, but I can't apply it in my actual style since that style is coming from the node_modules folder. And I guess we don't want to directly modify anything inside the package's own files.
Is there some CSS trick to do this change? On the the documentation, I don't think there is a prop available to pass to the datepicker component in order to achieve the look that I need.
You can add your styles in your main CSS file and try using !important - it's going to work.
Related
My goal: To style a link, that comes from a sanitized text, with a css variable. Im using a vue framework and want to use a computed style(or similar) to style it. The color of the link comes from an api.
My issue: Since the text is sanitized, no inline style will come through. I can still access the link like this:
.sub-link-style >>> a {
color: var(--color);
}
But I can't use the variable because I cannot add inline stlye.
My question: Is there a way to add a custom value(for example from vue) to a css variable without inline style?
The solution to this issue became using the sanitizers custom handler to create an exception for the attribute i needed specifically.
However, it only left me with a new problem. When the text gets into the code the computed variables are already resolved. Given up on it for now. Perhaps I'll look more at it later.
I'm trying to override a class style from ant design but looks like my custom style is the one being overridden due to the order the styles are rendered on the html page.
I've already tried to change the order of the import of my custom style to be the first thing to be imported on my component but it seams that this doesn't do anything.
My element style looks like this:
Is there a way to change the order the style is added to the page? Or make my style render last?
In order to override some style without using !important, you could increase the specification of your selector. Specifying that you are selecting a div, for example, will add more priority and override it, like changing .ant-form-inline .ant-form-item to .ant-form-inline div.ant-form-item.
What I want is, for example, to change the css background color of navigations bar of .navbar-default, which can be done by .navbar-default{background-color:#000;}
But I want is, to see the full css style definitions of .navbar-default class, so I can look and change every element(text-color, hovering colors and every other thing) as I like. Rather than inspecting webpage elements for css codes from browsers, I want to look in a place where the definitions contain.
You can find all in readable format here
If you are using the CDN "version" of Bootstrap, then you won't be able to edit the CSS.
A good way to do what you want is by using your own local copy of the bootstrap.css file. You'll find herein all the definitions, and you can alter them as per your wish.
Conversely, you could also edit the .sass or .less files if you want more control.
edit:
Since the OP is using CDN, follow the following steps and you should be just fine:
Identify the element/ tag that you want to edit: div, input, etc.
Identify the attribute you want to edit: color, height, etc.
most importantly: identify the class or id of the element.
After you've done the above, create a new styles file, for example: styles.css, and write your new custom CSS rules in there as per CSS rules.
Include this file by linking it in your .html file using the link tag
Voila!
You can find and edit it in bootstrap.min.css
This is for new version
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css
Just check the header import link and remove .min part if its minimised link
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
I would like to obtain a CSS-like string from code and add it to the current widget style.
SmartGWT have a setStyleName attribute, which work with CSS present on the stylesheet only, but no set Style or anything similar I can think of. How can I achieve this?
If I understand your question correctly, you should be able to use {widget}.getElement().getStyle() to obtain a com.google.gwt.dom.client.Style object that you can manipulate. But you need to give it individual “parsed” CSS properties.
If you just have a chunk of CSS as a string you can add it to your document with com.google.gwt.dom.user.StyleInjector, then add the needed classes to the widgets that need them.