I'm trying to change the style of the select (dropdown) field in my Woocommerce checkout page. I'm using it with the DIVI theme.
by default the select field does not have the same height as the other:
I managed to find the part to do that in the css by playing with the padding on this class:
.woocommerce-input-wrapper .select2-container--default .select2-selection--single
but then the select option and the arrow are not in the middle:
I can move the content of the field if I decrease the line-height here:
.select2-container--default .select2-selection--single .select2-selection__rendered
but if I decrease it too much, the text will be cut off
How can I move the content of the field to the middle properly?
Thanks
Try this. Change the 40px in the below code to your desired value. Tested and working in windows, google chrome.
.select2-container .select2-selection--single{
height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
line-height: 40px !important;
}
Related
I've been reformatting the Coupon Code box on the Woocommerce checkout page. It was originally huge and at the top of the page, which is terrible design because people will see the big coupon code box and leave your site to go look for a coupon, then never come back.
I have the coupon box where I want and it works just fine if you press enter. The issue is that you can't see the Apply button. It is right below the coupon code box. If you hover over it, the little hand cursor appears. You just can't see it.
How can I get the button to appear to the right of the coupon code box on desktop? It'll get pushed below it on mobile.
You will have to add an item to the cart to see the checkout page: http://198.199.114.131/shop/
Checkout page: http://198.199.114.131/checkout/
Add this style to your theme style.css or any frontend custom css file:
form.checkout_coupon input[type="submit"] {
opacity: 1 !important;
color: #fff !important;
background-color: #dba633 !important;
width: 48% !important;
}
form.checkout_coupon{
width:100% !important;
}
form.checkout_coupon #coupon_code{
width:50% !important;
}
Add this:
input[name="apply_coupon"] {
opacity: 1 !important;
float: left;
background-color: bisque !important;
min-width: 100%;
margin-top: 1em !important;
}
From what I can see, it's the background: none !important; that's not letting you see anything near the coupon box. Remove that piece of code and you can see the button, however, there is no text on the button.
To put the button under the coupon code input box, remove the background: none !important; where you have specified it and then add the following code in your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button {
top: 60px;
}
Currently, top: 3px; is specified.
To display the text, add this code to your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button:before {
content: "Apply Coupon";
}
You can change the Apply Coupon text to whatever text you want to display there.
What I have offered above is a workaround as I do not know what edits you made to the coupon box during your reformatting, but it should solve your problem.
Hope this helps.
I want to change the CSS styling for the first page of my WooCommerce checkout page to make the font larger and increase the margins around the input box. Here is my website:
I used the following code and put it in my child theme on style.css but it doesn't seem to work:
.woocommerce-billing-fields label {
font-size: 55px;
line-height: 23px;
color: #222222;
}
Changed the font size to 45px.
Am I putting the wrong code into my style.css folder?
You might want to add the !important keyword to ensure that the property overwrites any previously set property :
.woocommerce-billing-fields label{
font-size: 55px !important;
line-height: 23px !important;
color: #222222 !important;
}
I am trying to use CSS to make changes to the built-in survey theme "Minimal 2014". Specifically, I am trying to reduce space in several places to make it more compact.
I have managed to reduce the space between questions and between question and answer choices using ".Skin .QuestionText" and ".Skin .QuestionBody" in the custom CSS option under Look & Feel. However, I cannot figure out how to reduce the padding / margin (?) at the bottom of the answer choice (above the radio button), and above the next/previous buttons. Here is a screenshot
I am a CSS novice - if anyone could help, it would be much appreciated. Thanks!
Use the browser's inspector to identify the CSS rules that need to be overridden. You can adjust these as needed:
.Skin #Buttons {
margin-top: 0px; /* 50px by default */
padding: 20px; /* 20px by default */
}
.Skin .MC .MAHR .QuestionBody table td span.LabelWrapper label,
.Skin .MC .SAHR .QuestionBody table td span.LabelWrapper label {
padding-bottom: 5px !important; /* 20px by default */
}
I have a number of issues with my woocommerce pages in my wordpress site that I am hoping someone could help me with. They have been driving me crazy trying to fix.
My theme - Trias - http://www.mojo-themes.com/item/trias-multi-style-corporate-responsive-theme/ does not support woocommerce and this has creatd issues.
First one is the woocommerce pages - category and product fill the entire screen i.e. right to the edge. Any idea how I would change this to be in line with my theme?
At the bottom of these woocommerce category and product pages - the theme ends and you can see grey area beneath the theme area - any ideas on how to prevent this.
Final query and this one is the most annoying - the theme has a floating icon on buttons i.e. a floating small arrow on the left of the arrow before the words start. Problem is on the woocommerce pages - the floating arrow floats above the words on the button. It is super annoying.
My themes button is as:
button,
a.button {
display: inline-block;
position: relative;
margin-top: 30px;
border: 0 none;
/* background: #00a3da url("images/button-link-arrow.png") no-repeat 0 50%;*/
padding: 7px 12px 7px 35px;
text-transform: uppercase;
color: #fff;
font-family: "Oswald";
font-size: 16px;
line-height: 20px;
cursor: pointer;
Please see image of the button with floating arrow: image of button with incorrect floating arrow
Thank you very much in advance for any suggestions at all
— U P D A T E D —
Add this CSS rules to the style.php file of your active child theme or theme
For your icon buttons :
.button.product_type_variable.add_to_cart_button,
.single_add_to_cart_button.button,
button.single_add_to_cart_button,
.button.wc-forward {
padding-left: 34px !important;
}
.button.product_type_variable.add_to_cart_button:before,
.single_add_to_cart_button.button:before,
button.single_add_to_cart_button:before,
.button.wc-forward:before {
top: 6px !important;
}
For your content (only woocommerce pages):
.woocommerce .content-wrap {
width: 934px;
margin: 0 auto;
padding: 20px 30px 20px 36px;
}
You will have to add custom media queries and adapt the values of this rules depending on target screen resolutions.
I think that you haven't set correctly your pages (regarding your theme), that's why you have this kind of "content" problems on woocommerce pages:
The best way to solve this kind of issue is to contact author's theme support threads, opening a ticket.
I'm using Adam Shaw's fullcalendar jquery plugin and it works really well, after speaking to the graphic designer he wishes to use images instead of fullcalendar's prev,next,today and the three view icons (month, week, day).
Using firebug I've isolated that the "prev" icon, for instance, is using the span class
fc-button-prev
However, when I go to the css and create the class applying a background image:
.fc-button-prev {
background-image: url('../images/prev.png');
}
Nothing happens.
Any ideas would be appreciated
May be you have to define display:block in your class like this:
.fc-button-prev {
background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}
because span is an inline element. So, inline element is not take width , height, vertical margin & padding in it.
In fullcalendar 2.x I had to use the following CSS to change "previous" button image:
.fc-prev-button {
background-image: url(../img/icon_arrow_left.png) !important;
background-size: 100% 100%;
width: 50px !important;
height: 50px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fc-prev-button span {
display: none;
}