On my woocommerce site we added a prefix for regular price, called RRP. (as you can see on the attached picture)
I would like to appear an info icon before "RRP" text, and would like to add a tooltip, if someone hover on the icon, a unique text would appear. This would be a short description, what does RRP mean.
We are using css to appear price prefix:
This is an example how we would like to see: https://www.emag.hu/samsung-galaxy-a22-mobiltelefon-kartyafuggetlen-dual-sim-128gb-lte-fekete-sm-a225fzkgeue/pd/DF5FNHMBM/?ref=prod_CMP-167737_12195_125894
del .amount::before {
margin-right: 5px;
font-weight: 400;
font-size: 13px;
}
del .amount::before {
content: 'RRP:';
}
Do you have any idea how can i do this?
photo
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;
}
I added a subcategory in Woocommerce and now I want to display the subcategory in bold and also make the font size bigger, so that it looks like a subcategory and not like one of the product categories.
Here is where I want to change it: https://ecsense.com/ec-sense-products/
(I want to change it for "Single Gas Modules" and "Dual Gas Modules")
Until now I looked through the CSS code which was made by someone else, but I could not find any code for Categories. The Main Categories are already displayed in bold and big by woocommerce.
So I would need a whole new section for Product Categories in my CSS. If anyone knows how to add a CSS code, please tell me.
Try this CSS Code:
#filter-bar .bapf_body >ul >li:nth-child(2)>ul >li> label {
font-size: 20px;
font-weight: 900;
}
Output like this:
Please check this CSS code
.bapf_body ul li > ul li > ul li > label {
font-size: 12px !important;
}
output is like : http://prntscr.com/1gzqcci
I want to change 'Optional' label in Woocommerce Checkout. My site is in another language, however for some reason Woocommerce shows this word in English. I want to change it to 'Neprivaloma'
Didn't find 'code way' of doing this, but possible to do with CSS hack:
span.optional {
font-size: 0 !important;
}
span.optional:after {
content: 'YOUR TEXT';
font-size: 13px;
}
With that we hide default label by setting its font-size to 0 and show our own by giving it font-size back.
According to this blog post, it should be possible to style the ToolbarSearch by customizing the UIIDs ToolbarSearch,TextFieldSearch and `TextHintSearch.
In my CSS File it looks like this:
ToolbarSearch {
color: white;
height:30mm;
width:30mm;
}
TextHintSearch {
color: white;
height:30mm;
width:30mm;
}
TextFieldSearch {
color: white;
height:30mm;
width:30mm;
}
The main thing I want to achieve is a white Search Button, Text, X-Button and Hint.
In the blog post above, it looks right, except the textfieldsearch and -hint:
But in my application it looks like this:
The buttons are in the wrong color. What am I doing wrong?
Notice:
This is how I add it
this.getToolbar().addSearchCommand(e -> {
//TODO search
});
(The algorythm is not implemented yet)
I don't use the CSS plugin so I'm not really sure how this maps there but you need to override the selected/pressed & unselected styles.