How can i edit the original bootstrap angular date picker style sheet according to my desire
here is the link
https://ng-bootstrap.github.io/#/components/datepicker/examples#basic
i need to edit the color of this date picker in my file.
If you are using angular cli, There is a global style.css/style.scss in the root folder(src). Here you can add your custom styles for datepicker inspecting the element to find the classes to override the styles.
Add this to style.css/scss file
.ngb-dp-day .btn-light {
background: green !important;
}
.ngb-dp-day .bg-primary {
background: red !important;
}
Simply F12 (Inspect element) and see they styles:
Add to your css:(use !important to prevent ovvride)
ngb-datepicker{
background-color: red!important;
}
See result:
Related
I have stumbled upon some difficulties styling ion-datetime component using ionic 6, and none of the posts seem to contain a solution for this. I would like to apply some custom styles to picker items that appear in the shadow-root part.
Applying CSS to classes like .picker-item and .picker-item-active doesn't do anything because they are in the shadow-root. And there don't seem to be any styling properties and variables for ion-picker that I could use.
I am using the standard ion-datetime component like this:
<ion-datetime presentation="time"></ion-datetime>
and in the simulator while inspecting the HTML it appears as:
Styling that I would like to change:
Color and font properties for picker items
Color, background and font properties for active picker item
Since they are all open shadowRoots, you can get in and inject a <style> sheet:
document.querySelector("ion-datetime")
.shadowRoot.querySelector("ion-picker-internal")
.shadowRoot.querySelector("ion-picker-column-internal")
.shadowRoot.prepend( Object.assign( document.createElement("style") , {
innerText : `
.picker-item {
background:hotpink
}
`
}));
After some more playing around, I have been able to find a solution and customize it to my project needs. Thanks to Danny '365CSI' Engelman for inspiration.
The use of ion-datetime and its customization in my project is complex due to using multiple ion-datetime elements appearing and disappearing dynamically. Therefore, applying custom styling of it required some additional logic not posted here. Please reach out if you need some help regarding this.
Here is the base logic that allowed me to apply some styles to ion-datetime:
document.querySelectorAll("ion-datetime").forEach(dt => {
var el = dt.shadowRoot.querySelector("ion-picker-internal");
el.shadowRoot.prepend(Object.assign(document.createElement("style"), {
innerText: `
.picker-highlight {
background: red !important;
}
`
}));
el.querySelectorAll("ion-picker-column-internal").forEach(col => {
col.shadowRoot.prepend(Object.assign(document.createElement("style"), {
innerText: `
.picker-item {
color: green !important;
}
.picker-item-active {
color: blue !important;
}
`
}));
});
});
I got react-toastify installed, and my toasts are working, but I want to add them some custom styling depending on a theme, and none of the solutions I saw are working in my case.
I don't want to overcomplicate it, I just want to change background color, maybe borders, font color, etc.
I tried class overriding which documentation is saying about - it's not working.
.Toastify__toast-theme--colored.Toastify__toast--error {
color: white;
background-color: red;
}
I tried my own className and pass it to certein toast - it's not working.
toast.error('here some error', {
className: 'toast-error'
});
.toast-error {
color: white;
background-color: red;
}
And these themed classes are not even added to the toast.success() or toast.error()
I tried to override values in the core css file that im importing, and it's not working.
And if I set background-color: red to the actual class that is added, then I get red background on toast.success() as well.
Here is documentation.
How to deal with this?
using classnames should be the solution to your problem
className={classnames("Toastify__toast-theme--colored", {
"toast-error": // here the condition by which toast-error class should pop up
})}
With third-party components, the way to include their styles is by importing their stylesheet into _app.tsx or importing the stylesheet into your component that uses the third-party component, as described here: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules or by adding to next.config.js like so:
// next.config.js
const withTM = require("next-transpile-modules")([
"#fullcalendar/common",
"#fullcalendar/daygrid",
"#fullcalendar/timegrid",
"#fullcalendar/interaction",
"#fullcalendar/react",
"#fullcalendar/list",
To modify the third-party stylesheet, you need to create your own stylesheet and add it to _app.tsx; those modifications might look like this:
// styles/modified-fullcalendar.scss
.fc-col-header {
width: 100% !important;
}
Another option, at least for my use case (Full Calendar) is to use CSS variables as described here in technique 2 on this page: https://fullcalendar.io/docs/css-customization. There was a lengthy thread about this on the Full Calendar issues page, as seen here: https://github.com/fullcalendar/fullcalendar/issues/5393
The problem with all of these methods of customization is that they're global, and so anywhere you use this third-party component it'll look the same. However, in my case, I want to use the component on two different pages, with different styling modifications. With most frameworks, I would simply import the relevant modified stylesheet wherever I needed it, but NextJS doesn't allow that. How can I achieve the modifications I want?
The solution is to wrap the component in a div with a specific class name, then do the css overrides in a nested format for each use case in the override file.
Explanation:
Say your third-party component is FullCalendar. It's being imported and used in the files Foo.tsx and Bar.tsx. In Foo, let's say you want the calendar cells to be green.
To make the modification, you create the file modified-fc.scss and do the following:
// modified-fc.scss
.fc-cell {
background: green !important;
}
You then import modified-fc.scss into _app.tsx in order to apply the styles globally, and you're done. However, this prevents you from changing the cell color to orange in Bar. To circumvent this, just wrap the component:
// Foo.tsx
<div className=".wrapper1">
<FullCalendar/>
</div>
// Bar.tsx
<div className=".wrapper2">
<FullCalendar/>
</div>
and then nest the classes:
// modified-fc.scss
.wrapper1 {
.fc-cell {
background: green !important;
}
}
.wrapper2 {
.fc-cell {
background: orange !important;
}
}
OR
.wrapper1 > .fc-cell {
background: green !important;
}
.wrapper2 > .fc-cell {
background: orange !important;
}
I previously created a swiper (ngx-swiper-wrapper) and I changed the color of the arrows the following way:
::ng-deep.swiper-button-next::after, ::ng-deep.swiper-button-prev::after {
color: $primary-light;
}
Now I created another one on a different page where the color should be black. The problem is when I visit the page with the first swiper and then I navigate to the other page with the second swiper, the color stays the white.
Is there a better way to change the color or a workaround?
Thanks
I've been running into the same issue, and spent days looking for a better solution, till i found one, it works just fine, no need to change the svg image or somthing just add the code below into your css file :
::ng-deep .swiper-button-next,
::ng-deep .swiper-button-prev {
color: #207868 !important;
}
:root {
--swiper-theme-color: #207868 !important;
}
I tried it and changed a few things and it's working:
::ng-deep .swiper{
.swiper-button-next::after,
.swiper-button-next::after{
color: #207868;
or
--swiper-theme-color: #207868;
}
}
I have an app using bootstrap.css for the design. I have a readonly input which looks like disabled because of bootstrap (cursor not allowed, background color grey etc...). I would like the input to look enabled with readonly activated.
How can I do that?
edit (adding more code):
Header:
doctype html
html(ng-app='myApp')
head
title=title
link(rel='stylesheet' href='stylesheets/bootstrap.min-3.1.1.css')
link(rel='stylesheet' href='stylesheets/style.css')
My input: input.form-control(readonly, placeholder='jj-mm-aaaa')
My stylus (style.css):
input[readonly]
background-color: #fff
Assuming your custom css is included after the boostrap.css, place the following code in your custom css file
input[readonly] {
background-color: #fff;
/* any other styles */
}
If you only want to apply this style to specific read only inputs, add a class "exampleclass" to those inputs, and then use:
input[readonly].exampleclass {
background-color: #fff;
}