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.
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
})}
How to edit the tabs separately, I want to place the background image on tab 1 different from tab 2.
QWidget::tab {
border-image: url(:/Tabs/tab_notclick.png);
min-width:96px;
min-height:18px;
}
QWidget::tab2 {
borrder-image: url(:/Tabs/tab2_notclick.png);
min-width:96px;
min-height:18px;
}
QWidget::tab:selected{
border-image: url(:/Tabs/tab_click.png);
}
This might not fix it but in the tab2 part of the stylesheet border is spelt borrder, which would end up making that part of the stylesheet not work as expected.
This:
borrder-image: url(:/Tabs/tab2_notclick.png);
Needs to be this:
border-image: url(:/Tabs/tab2_notclick.png);
Please let me know if this fixes the problem or not.
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 am trying to style my react component. But i get for my understanding weird behaviour.
<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd'
: 'timeline-item-icon-even'], [inProgress])}>
What i get in the dom is:
timeline-item-icon-odd___3K5am progress
where progress is from the variable inProgress.
In my opinion i tought this is the way to do it but apparently it only renders the first class and completely ignoring the second.
I have set up a single html an css file where i checked my styles before applying and there they all work correctly.
CSS:
.timeline-item-icon-odd {
background-color: gray;
border-color: gray;
}
.progress {
background-color: green !important;
border-color: green !important;
}
So what i want to achieve is as to have the background according to the variable in inProgress.
I hope somebody has any idea.
Thank you in advance!
Regards
If you want to add inProgress together with your other conditional css classes you need to add inProgress like this:
<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd'
: 'timeline-item-icon-even',inProgress])}>
I hope this would solve the issue. I have tried this and it worked.
The Solution:
<div className={classNames(
scss[isOdd ? 'timeline-item-icon-odd' : 'timeline-item-icon-even'],
scss[inProgress]
)}
>
The solution was the scss in front. So a syntax error.
I am struggling to find a way to give CSS to all placeholders in my application,
I have tried the following:
.customField input::-webkit-input-placeholder {
color: #2e4bc5;
}
.x-text-field input::webkit-input-placeholder{
color :#2e4bc5
}
Any help would be appreciated.
Try this:
.customField .x-input-el::-webkit-input-placeholder {
color: #2e4bc5;
}