I would change the color of the menu items in wordpress. In this site https://www.modacapellishop.it/ I have four voices in the menu (Brand, Prodotti, Modacapelli Choice, Outlet) and I need to change the color of Modacapelli Choice (grey to blue). I added this code on the CSS file:
/* Change color menu Modacapelli Choice */
#menu-item-427 a {
color: #2976ce;
}
It work but just on desktop. On the mobile version in menu navigation sidebar the menu item "Modacapelli Choice" doesn't change the color.
How can I solve that?
Since this is an extremely specific case you can either .menu-item-427 > a { color: red!important; } or do .nav>li.menu-item-427>a { color: red; }
I would recommend the latter.
However both are not great, since it is bound to the ID. I would recommend making an ACF field for the page or the menu-element, then checking if it exists, and creating an inline style or adding a class if it is true.
The user can then also change the color of other elements he wishes to change without contacting you about it.
You would then add a class like this to your menu markup for example.
.is-highlighted-element {
color: red;
}
In Mobile view doesn't have #menu-item-427 this id. so replace with .menu-item-427
Try this css it's works
.menu-item-427 a {
color: #2976ce;
}
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’m using the Shop Konado theme.
I'm trying to disable the hover effect of the products and leave the "buy" button always visible in the mobile version: https://prnt.sc/t2ul5l (print from my store). Another example: https://prnt.sc/luen4q
I tried to use the following code in the additional Wordpress css:
html .shop-item:hover .shop-item-image:after {
background: none;
}
But it did not work.
This is my store:
https://www.arteverdeagro.com.br/loja/product-category/todos-os-produtos-in-natura/
thanks for the help
This should work.
.box-hover{
opacity: 1 !important;
margin-top:10px !important;
}
I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:
.some-company-control(#text-color, #hover-text-color) {
color: #text-color;
&:hover,
&:active {
color: #hover-text-color;
}
}
The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.
Thanks everyone for any suggestions!
Try to add this rule:
&:focus:not(:hover) {
color: #text-color;
}
I have a basic tab collection. Its going to function as buttons, no actual content:
<md-tabs md-align-tabs="bottom">
<md-tab>Canvas 1</md-tab>
<md-tab>Canvas 2</md-tab>
<md-tab>Canvas 3</md-tab>
<md-tab>Canvas 4</md-tab>
</md-tabs>
I'm trying to use the tab collection at the bottom of the page. Any idea about how to move the ink bar to the top of the tab collection instead of the bottom?
md-align-tabs does not change the location of the ink bar in my testing. I was unable to identify a solution with pure CSS.
You are looking to override the md-pagination-wrapper css value. I would not recommend doing it globally because I don't know what else it effects honestly but if you change it to
md-pagination-wrapper {
height: 2px;
...
}
You will get the effect you are looking for. Here is a codepen for example - http://codepen.io/anon/pen/vKdkzj . I would put a custom override class or id on it though so you don't break anything globally.
An example of what the custom override would look something like this -
Put a custom id or class on your tabs :
<md-tabs md-align-tabs="bottom" id="ink-top-fix">
Use to target md-pagination-wrapper from custom id (or class, whatever you choose to use)
#ink-top-fix md-pagination-wrapper {
height: 2px;
}
override .mat-ink-bar class
.mat-ink-bar{
top:0px !important;
}