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;
}
}
Related
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
})}
I am using react and want to change text highlight color.
First I went for a working solution:
Highlight.css
::selection {
background:#fbc308;
color: black
}
somecomponent.tsx
import './highlight.css'
However, it changes text highlight color for every elements, which is not I want.
And,
<div style={{"::selection" : {
background:"#fbc308",
color: "black"}}}><p>Something</p></div>
didn't work (error)
So, I went for:
.somecomponent p::selection {
...style
}
But however it only changes p elements. I want to change all text highlight color in a component.
Thanks.
Thanks for Eduard's answer, I resolved it by
.somecomponent *::selection
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:
I've been trying to replace to current CSS class of the resizeable handles in Extjs, specifically the ones for the popup windows. I am trying to change the colour of it and it doesnt seem to be working. Here is my css code
.linkWindow .x-toolbar-footer,
.x-resizable-handle, .x-resizable-handle-west, .x-resizable-handle-east, .x-resizable- handle-south, .x-resizable-handle-over .x-resizable-handle-east, .x-resizable-handle-over .x-resizable-handle-west, .x-resizable-proxy, .x-resizable-overlay
{
color: #045BB3;
background-color: #045BB3;
background: #045BB3;
border-color: #045BB3;
}
I am not sure what to do anymore. Any help would be greatly appreciated!!
Also it should be noted I am developing for IE 7
I'm guessing Extjs css is overwriting your own. try to add !important at the end of your properties like this:
.linkWindow .x-toolbar-footer,
.x-resizable-handle, .x-resizable-handle-west, .x-resizable-handle-east, .x-resizable- handle-south, .x-resizable-handle-over .x-resizable-handle-east, .x-resizable-handle-over .x-resizable-handle-west, .x-resizable-proxy, .x-resizable-overlay
{
color: #045BB3 !important;
background: #045BB3 !important;
border-color: #045BB3 !important;
}
The handles are actually gif images. You'd need to edit the gifs for each piece of the splitter bar. For instance extjs4/resources/themes/images/default/sizer/s-handle.gif is one.
Is it possible to keep the color on a link with a class while other links do change.
For example I have a theme but i want it to support different colors set by the user.
Most links change color on :hover but some must stay the same color.
#red is generated by the theme. I want to 'inherit' the a.someclass:link color in the a.someclass:hover
example:
a:link
{
color: #red;
}
a:hover {
color: #black;
}
The above part is generated which I cannot alter.
As suggested in answers and comments below I need to build this with jQuery
sure I can copy #red to the a.someclass:hover {} but then i have to hardcode the color and since the user should be able to change the color that is not an option.
I need something to overide the a:hover { color } if the class is someclass
You can make use of currentColor
a.no-color-change:hover {
color: currentColor;
}
Why not do this then?
a:link, a.someclass:hover
{
color: #red;
}
At least if I understand your question correctly.. This will make sure both your <a> tags will have the same color as the <a class="someclass"> ones when hovered.
Like maxisam said above you will probably have to use js to do this. Try using jQuery's .hover() or .mouseover() .mouseout() to change the css. You would of course have to trigger these functions somehow when the user switches themes. Good luck.
As suggested by #danferth and #maxisam here is my jQuery solution
I've written to make this work:
$(document).ready(function(){
// getting the color before the color is changed ( not sure this is needed )
var thecolor = $('.article-title').css("color");
$(".article-title").mouseover(function() {
// setting the color previously picked
$(this).css({'color':thecolor});
});
});
where .article-title is the class of the links I want to alter