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;
}
Related
I'm building a website using Contact Form 7 for WordPress and am having issues styling the select menu. Specifically, I cannot move the arrows or add padding to the dropdown so it's not so tight.
I've tried using this CSS to add spacing to the dropdown items (and some other CSS trickery) but it has no effect:
options {
padding: 20px 10px!important;
margin: 20px 10px!important;
line-height: 36px!important;
border-bottom: 10px solid tan!important;
}
Do you know if there's a way to control the styling behavior of CF7's select menu (arrow and options dropdown)?
Thank you!
Demo Website:
https://miles.birdhouse-demos.com/connect/
CSS styling for <select/> fields is very limited and does not allow you to achieve this. You will need to use a hybrid field plugin that constructs dropdowns with HTML lists that can be styled, such the Hybrid HTML Dropdown plugin, which can be styled and can be loaded on your page to convert your existing <select/> fields into hybrid ones,
<script type="text/javascript">
(function(){
let sel, hyd;
document.addEventListener('DOMContentLoaded', (e) => { //instantiate on document ready.
sel= document.querySelector('#my-select-list');
hyd = new HybridDropdown(sel,{});
})
})
</script>
Alternatively, you can install the Smart Grid-layout extension for CF7 which has a dynamic-dropdown field tag you can use instead of the CF7's default dropdown, and has as the option to display as a Hybrid Dropdown field for you.
Try this
It's possible to customize the dropdown arrow with this code:
select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 2px;
}
Here is a list about what you can do with this code:
Remove completely the arrow, to do so, simply remove this line: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
Customize the arrow size. You need to add the following line to the code given above: background-size: 30px 30px;
You can change the value in px.
Change the arrow, to do so, replace the URL in the following line of code: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you have any questions, let me know.
Thanks.
Credit: Kevin - From: https://www.jotform.com/answers/2449062-how-can-i-remove-modify-change-the-dropdown-arrow-using-css
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;
}
This is a wordpress website - https://smecollaborative.org/
Down the page there is a section pulling from the Events Calendar. Each Event has a featured image. You can use CSS to hide the featured image of each image, but the challenge is using the Fusion Builder element, the featured image is replaced with a 'placeholder' image off a calendar, and I can't get that thing hidden.
Here are the two snippets I've tried:
.single-tribe_events .page-header-image-single {
display: none;
}
.tribe-events-event-image img {
display:none!important;
}
.fusion-events-shortcode .tribe-events-event-image {
height: auto !important;
}
The 2 snippets you tried are wrong because:
snippet 1. is targeting the header image on the tribe event single page.
snippet 2. is targeting an img tag which does not exist in this case.
You should target the parent item to also hide the clickable link to it:
.fusion-events-post div.fusion-events-thumbnail {
display: none;
}
I added the extra div to the thumbnail selector to override the standard display: block; without having to use !important
Or, in case you only want to hide it if the image is missing you can do:
.fusion-events-post .fusion-events-thumbnail span {
display: none;
}
This one will only target the placeholder in case it is present
In prime-ng turbo table , when we put filter dropdown in scrollable table dropdown going inside the table
Without scrollbale table dropdown works perfect.
This works perfect
but when scrollable table , dropdown is going inside the table
Not works perfect.
so I want to do dropdown outside the table not inside the table.
This is a link https://primeng-table-bry1sl.stackblitz.io/ to see the code. Please see in 1024 resolution so you can see the scroll in the table and select one of the brand to filter the data.
Can anyone help me.
Try to use appendTo="body" attribute available on dropdown of Primeng, which might be helpful in your case.
Complete example here -
<p-dropdown appendTo='body' [options]="value" [style]="{'width':'100%'}" placeholder="Select"></p-dropdown>
Reference from here
The problem is here:
.ui-table-resizable .ui-table-thead>tr>th, .ui-table-resizable .ui-table-tfoot>tr>td, .ui-table-resizable .ui-table-data>tr>td {
/* overflow: hidden; */
}
Try to comment the overflow attribute or set to visible ... it works!
Solved by overwriting the below overflow to be visible:
//Old code in primeng.min.css
.ui-table-scrollable-header, .ui-table-scrollable-footer {
**overflow: hidden;**
border: 0 none;
}
//add this to your stylesheet instead
.ui-table-scrollable-header, .ui-table-scrollable-footer {
**overflow: visible;!important**
border: 0 none;
}
Also, add this in your stylesheet after the code above:
.ui-table-scrollable-view {
overflow: hidden!important;
}
see here result image
I am using woocommerce on my site(http://masterscoffeeandwater.com/bottled-water/) and I want to style button "add to cart" on my site ,currently it is appearing as text link that is very boring ..
I am using below CSS but it's not working
.single_add_to_cart_button:hover {
background: green !important;
}
.single_add_to_cart_button {
background: red !important;
}
any help would be appreciated
I am stuck here
add your class 'single_add_to_cart_button' to add-to-cart.php (wp-content/themes/YOUR THEME/woocommerce/loop/add-to-cart.php)
you will find 'anchor' tag there. just add class in that.