Dear stackoverflowers,
Somehow the text in the dropboxes of the checkout page are not aligned in the middle. Website https://www.narwal.shop/checkout/
Link to image:
Does someone how I can fix this? Thank you in advance.
you can change line-height to 10px of below CSS:
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: 10px;
}
in this file:
https://www.narwal.shop/wp-content/plugins/woocommerce/assets/css/admin.css?ver=3.3.5
Or you can create custom.css file and put above css in that file, do not forgot to include that custom.css file in that page.
Related
I want to add some css to fix rtl of this web page: http://homedoctor.sa/ar/insurance/
I tried the css on chrome dev tool and live css editor, and it seems to work perfectly. However, when I add the same code through wordpress (Appearance > Customize > Additional CSS) it shows no change.
I have tried adding !important but that didn't work either. enter image description here
Here's the css:
.rtl .elementor-7410 .elementor-element.elementor-element-3b979d8f .elementor-heading-title {
font-size: 35px;
margin-top: 17px;
}
.rtl .elementor-7410 .elementor-element.elementor-element-18d64e63 .elementor-image-box-content .elementor-image-box-title {
float: right;
}
.elementor-7410 .elementor-element.elementor-element-3b979d8f {
text-align: center;
}
.elementor-7410 .elementor-element.elementor-element-5d12ca7f .elementor-heading-title {
text-align: center;
}
I see you're using elementor page builder to create your pages. The thing with elementor is that it's css is pasted in Elementor edit page and not in the Appearance > Customization > Additionoal CSS.
You can add them in the Elementor > Navigate to Section > Click on Section where you want to place this > Goto Advanced options in left Elementor Panel > Custom CSS and paste your CSS over there.
This should solve your problem and can help you edit your pages.
I tried to change the colors of my primary navigation menu
and ended up with the text and the background the same color: https://adamfout.com/
I have no idea how to fix it. I deleted some of the CSS I created, and when I'm logged into WordPress it looks fine, but when I visit on mobile or an incognito browser I can't see the menu items unless I hover.
I changed the colors in the stylesheet too, but I tried to change them back and that didn't work either. I'm at a loss. I don't know CSS or WordPress very well.
if you go to appearance/customize you will find a customize css box at the bottom. There you can put:
To change the text color:
#menu-menu-1 li a{
color: black;
}
To change the background color:
.nav-primary{
background-color: red;
}
I am working on website.In that I am using Photo Book Gallery plugin for slider purpose.But in slider show's vertical white thin line between two pages.I want to remove that line.
Please help me,if is there any solution.
URL:-http://www.h2interios.com
Add this css in your stylesheet
#main-content .container::before{
background-color: transparent;
}
.booklet .b-wrap-right
{
background: none !important
}
Add this code in your stylesheet
I am relatively new to the WordPress. I am using free version of the WonderPlugin slider in my site. There is a link coming in the top left corner of the slider showing wonderplugin.com.
Is it possible to remove that link from the free version of the WonderPlugin.
I am using WordPress 4.0 and WonderPlugin Slider Free Version 2.6
First of all if you want to use free version of the WondePlugin, you should be fine to show the wonderplugin link on the slider. You can avoid that link by using commercial version of plugin.
As far as free version is concern, the link can be removed by the custom css.
On the edit slider screen of the plugin click on Option tab.
Click on Advance Option and put following css in the Custom CSS box.
div.amazingslider-box-1 :nth-child(3) {
visibility: hidden;
}
This will hide the link.
CSS
.wonderpluginslider-container{
display: none
}
JS
jQuery('.wonderpluginslider-container')
.show()
.find('a[href="http://www.wonderplugin.com/wordpress-slider/"]')
.parent().remove();
Thanks for the answers but it doesn't work with the WonderPlugin Grid Gallery Free Version 2.2., which I was looking for when I stumpled over the thread. To remove the watermark from the grid gallery, go to wonderplugin-carousel/engine/wonderplugingridgallery.js and look for
<div style="display:none;position:absolute;top:4px;left:4px;padding:2px
Change the display:block to display:none and the watermark is no longer visible.
You have to search for:
wpositioncssdefault:"display:block;position:absolute;bottom:8px;right:8px; line 162
in the wonderplugincarousel.js and then you change display:block; to display:none;. Cheers!
wonderplugincarousel.js
Line No.259 replace display:block with display:none,
change visibility:visible to visibility:hidden
and remove !important
and change mklink.css("visibility")=="visible" to mklink.css("visibility")==""
Open engine\wonderplugingallery.js and search for var commonOptions. Then change
var commonOptions = {
/* other options */
...
fv: true,
...
}
to
var commonOptions = {
/* other options */
...
fv: false,
...
}
and the plugin will take care rest(no custom CSS and JS headache).
I have checked it with Version 8.6 and it's working.
These solutions are all updated and solved by WonderPlugin admins. But here is the new solution for WonderPlugin Portfolio Grid Gallery (Version 11.8):
open: engine\wonderplugingridlightbox.js
on line 66 :
title='WordPress Gallery'><div style='display:block;width:180px;height:20px;text-align:center;border-radius:3px;-moz-border-radius:3px
Change display:block to display:none
And here we go!
Open your style.css and then put the code below
div.html5gallery-container-0
div.html5gallery-box-0
div.html5gallery-elem-0
div.html5gallery-elem-img-0
a{
visibility: hidden;
}
A simple solution
div.amazingcarousel-image :nth-child(3) { visibility: hidden;}
because free version link is the 3rd child div in parent div with class- amazingcarousel-image
search for this.options.watermarktext=this.options.vermk; and replace this.options.vermk with nil
Good way to purchase the plugin and it is removed automatically but in free version you can add the following css to make it invisible.
div.amazingslider-box-1 div:nth-child(3) {
visibility: hidden !important;
width:0 !important;
height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
There is no style.css file. There are only wonderpluginslider.css and wonderpluginsliderengine.css
So do you know where the file and code?
Also i inspected that element on my internet browser and i saw this codes:
<div class="amazingslider-text-box-1" style="display: block;">
<div class="amazingslider-text-wrapper-1" style="width: 100%; height: auto; position: absolute; left: 0px; bottom: 0px; margin-bottom: 0px;"></div>
</div>
<div style="display:block;position:absolute;top:6px;left:6px;font:12px A…or:#fff;opacity:0.9;filter:alpha(opacity=90);cursor:pointer;"
<a target="_blank" title="Responsive jQuery Slider" style="text-decoration:none;font:12px Arial,Tahoma,Helvetica,sans-serif;color:#333;" href="http://wonderplugin.com/wordpress-slider/">
WordPress Slider Free Version
</a>
</div>
"Wonder Plugin" (Free Wordpress Slider Plugin)
The main navigation menu on wordpress twenty twelve theme is left aligned by default. I am trying to center align the menu on my child theme but just cannot figure it out. Any suggestions?
If you use Firefox with the add-on Firebug, you can inspect the CSS of the header menu bar to find the appropriate code. I happen to use a child theme of Twenty Twelve myself, which also features center aligned menu items.
Assuming you are using a self-hosted website with the WordPress.org script, it should be a simple fix, as follows:
1) If you haven't already, you'll need to create a child theme. To do this, simply create a new folder in the 'themes' directory of your WordPress installation, and name it something like 'Twenty Twelve Child Theme'. For more information on child themes, see this page.
2) You will now need to create a new style sheet file for your child theme, and make it load the stylesheet for the parent theme, or your site will load without any styles. To do this, open Notepad and add the following.
/*
Theme Name: Twenty Twelve Child Theme
Theme URI:
Description: Child theme for Twenty Twelve
Author: <You Name here>
Author URI:
Template: twentytwelve
Version: <Add any number to your liking here, for instance '0.5'>
*/
#import url("../twentytwelve/style.css");
The section wrapped in slashes with asterikses is a comment. You can add comments anywhere in your style sheet to label and organize your customizations. The following '#import' rule loads the stylesheet of the parent theme, so that your child theme does not render your website as a mere skeleton.
Save this file to your child theme directory with the file name 'styles.css', and remember to select 'All files' in 'File type' list.
3) Now that the base of the child theme has been created, we can proceed to the customization part. First we will add the CSS rule for the theme's navigation menu into the child theme's style sheet. This code already exists within the parent theme's style sheet, so we are practically going to override it with our customization.
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom-color: #EDEDED;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #EDEDED;
border-top-style: solid;
border-top-width: 1px;
display: inline-block !important;
text-align: left;
width: 100%;
}
The declarations within this CSS rule define the appearance of the navigation menu as a container. To center align the menu elements, simply replace the value of the 'text-align' property with 'center'.
Save the file again and reload your website; the menu items should now be center aligned.
Within your Dashboard > Appearance > Editor, open your 'style.css' and scroll down until you see the heading;
/* =Main content and comment content
-------------------------------------------------------------- */
scroll down slightly and add the line text-align: center; to the bottom of your .entry-header .entry-title leaving the rest as it is.
..having done the above, here's what mine code looks like;
.entry-header .entry-title {
font-size: 20px;
font-size: 1.428571429rem;
line-height: 1.2;
font-weight: normal;
text-align: center;
}
Add this code part to your container div's css.
margin:0 auto;
it'll make the div align center.
Just add the lign: text-align: center; to .main-navigation
It should look like:
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
text-align: center; }