What I tried:
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
in css:
.woocommerce-product-gallery__trigger img {
display: none !important; ---///this works in chrome but not in mozilla
}
in js i tried without and with setTimeout:
setTimeout(() => {
$('woocommerce-product-gallery__trigger').find('img').removeAttr('alt');
$('woocommerce-product-gallery__trigger').empty() ---////this tried when remove supports emoji in WP(see first 2 remove_action())
$('woocommerce-product-gallery__trigger').contents().remove()---////this tried when remove supports emoji in WP(see first 2 remove_action())
},2000)
Also i went to woocommerce plugin assets/js/single-product.js and remove this glass from this.$target.prepend( 'HERE IT WAS')
But still I have this:
If you want to remove Magnifying glass icon and disable zoom function on product page Woocommerce, you can follow this full tutorial Remove Magnifying glass icon and disable zoom function on product page Woocommerce:
Edit woocommerce.css
Connect to your website using FTP protocol, then go to /youwebsite.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css
Edit this file with text editor tool and find class: .woocommerce div.product div.images .woocommerce-product-gallery__trigger, add display:none; to this class and it will be like this:
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
display: none;
position: absolute;
top: .5em;
right: .5em;
font-size: 2em;
z-index: 9;
width: 36px;
height: 36px;
background: #fff;
text-indent: -9999px;
border-radius: 100%;
box-sizing: content-box;
}
You can also hide Magnifying glass icon using your child theme'css file
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
display: none;
}
This what i did, not ideal, but...
setTimeout(() => {$('.woocommerce-product-gallery__trigger').find('img').detach();
$('.woocommerce-product-gallery__trigger').text(' ');
},1000)
setTimeout() is needed, maybe better put this into after_setup_theme hook, without setTimeout, but this works for me.
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
is anyone here using Elementor?
I'm trying to create a header with Elementor. 3 columns, I have a logo in the left, search bar in the middle and a navigation menu on the right side.
Basically, what I wanted to achieve is something like this.
Expected Output
But what I'm currently done is Output
Adding a border on it Output-with-Border
Here is the issue when the screen/window is resized Issue
Where it should be something like this Expected-output-on-resize
To give you more details, I wanted to achieve the same functionality as the below code on Elementor.
.container {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 18px;
}
.flex1 {
flex-basis: auto;
}
.flex1:after {
content: 'auto';
}
.flex2 {
flex: 1;
flex-basis: fill;
}
.flex2:after {
content: 'fill-remaining-space';
}
.flex3 {
flex-basis: min-content;
}
.flex3:after {
content: 'min-content';
}
<ul class="container">
<li class="flex flex1"><div style="background: #000; width: 200px;">Logo</div></li>
<li class="flex flex2"><div style="background: #000; width: 100%; margin-right: 10px; margin-left-10px;">Search-Bar</div></li>
<li class="flex flex3"><div style="background: #000; width: 350px;">Navigation Menu</div></li>
</ul>
I don't think it's possible by using the free version of Elementor. However you can still achieve what you want.
The idea is by using the ShortCode.
Since you are using OceanWP theme plugin then you will need to install the Ocean Extra plugin first.
STEP 1: Create templates
You will need to create a template for those four elements by navigating into your WordPress Dashboard > My Library then create the templates by clicking the Add New button and name them with the following:
search-bar
logo
navigation-menu
header
Each of the templates you created will generate a shortcode so take note of them.
STEP 2: Edit the templates you created using Elementor
Edit the template you created using Elementor, on the search-bar use the widget of Advanced Woo Search since you said you are using its plugin, you may also use its shortcode if it has a shortcode,just search for the widget ShortCode in Elementor then drag and drop it into the section, input the shortcode of the Advanced woo search then make the width full and 100%, save and publish it.
In the template Logo, edit it again using Elementor then use the widget Custom Header Logo as you said you are using it, then go to Advanced > Positioning then set the Width to Inline(Auto) and Vertical Align to Start. This will position the logo in the Left side of the section otherwise, position it into the left side, save and publish it.
Edit the template navigation-menu using Elementor, from the widgets search for Custom Header Nav and use it then position it into the right side of the section.
NOTE: You don't have to change anything in the section of Elementor.
The last thing is the header template, before editing the header template, you must create a shortcode with the tag you created, so don't edit it yet, proceed to next step.
STEP 3: Create a shortcode under your function.php
function cs_custom_header_shortcode( $atts ) {
$logo = do_shortcode('[shortcode of logo template]');
$search = do_shortcode('[shortcode of search-bar template]');
$nav = do_shortcode('[shortcode of navigation-menu template]');
echo '
<div class="cs-flex-container">
<div class="cs-flex-item cs-flex1"><div>'.$logo.'</div></div>
<div class="cs-flex-item cs-flex2"><div>'.$search.'</div></div>
<div class="cs-flex-item cs-flex3"><div>'.$nav.'</div></div>
</div>
';
}
add_shortcode( 'cs_custom_header', 'cs_custom_header_shortcode');
copy and paste the above code into your function.php, I've use your idea, I just replace the tag into div.
Notice the do_shortcode('[shortcode of logo template]');, replace the [shortcode of logo template] with the shortcode of those templates you created.
Your shortcode now for this is [cs_custom_header].
STEP 4: Edit the header template using elementor and use the shortcode [cs_custom_header].
Edit the header template using Elementor, then from the list of widget search for ShortCode then drag and drop it into the section and input the following shortcode [cs_custom_header].
STEP 5: Edit the CSS style.
Go to your Wordpress Dashboard > Appearance > Customize > CSS/JS and input the following CSS style.
.cs-flex-container {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.cs-flex-item {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.cs-flex-item:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 18px;
}
.cs-flex1 {
flex-basis: auto;
}
.cs-flex1:after {
content: 'auto';
}
.cs-flex2 {
flex: 1;
flex-basis: fill;
}
.cs-flex2:after {
content: 'fill-remaining-space';
}
.cs-flex3 {
flex-basis: min-content;
}
.cs-flex3:after {
content: 'min-content';
}
You may also use it into your css child theme and again I just use your css code.
With the code you provided, I assume you know how to work on most of the thing but just lack on idea of how to do it using Elementor so I won't be very specific in everything, just a guide.
The steps maybe long, but you will achieve what you want with it.
Have a nice day.
I'm trying to edit the colors of my user profile page on my site www.wastelandgamers.com/user-profile I would like for the fields tat are blue to be white instead and the text in those fields to be black instead of white.
I am able to change them when I use the developer tools through Google Chrome and get the desired look, however, I am not able to find the HTML doc that I need to change in order to get the look I want. I have searched through nearly all of the relevant site files using file manager through cPanel with no luck.
Here are a screen captures of before and after the color change using developer tools.
Before code change:
After code change:
Code I need to change (.entry-content towards bottom)
.tml-profile {
max-width: 100%;
}
.tml-profile .tml-form-table {
border-collapse: collapse;
}
.tml-profile .tml-form-table th,
.tml-profile .tml-form-table td {
display: block;
vertical-align: middle;
width: auto;
}
.tml-profile .screen-reader-text,
.tml-profile .screen-reader-text span {
height: 1px;
left: -1000em;
overflow: hidden;
position: absolute;
width: 1px;
}
.tml-profile .wp-pwd {
text-align: right;
}
.tml-profile .wp-pwd .dashicons {
font-size: 1em;
line-height: 1;
height: 1em;
width: 1em;
vertical-align: middle;
}
.tml-profile #pass-strength-result {
margin: 0.5em 0;
}
.hidden,
.no-js .hide-if-no-js,
.js .hide-if-js {
display: none;
}
#media screen and (min-width: 768px) {
.tml-profile .tml-submit-wrap input {
width: auto;
}
}
.entry-content tr th, .entry-content thead th {
color: #cbcbcb;
background-color: #fff;
}
I am using the Parabola theme for my site and Theme my login for the profile page.
If anyone knows why I'm unable to find the file I need to edit or of another way to make the change I would really appreciate the help! If you need any more information let me know.
I'm not a fan of WordPress themes, but some of them do allow for custom CSS. Google found me this:
we have created a special input field right in theme’s settings page.
You’ll find it by going to Appearance > Theme Settings, then expanding
the Miscellaneous Section by clicking on it. The Custom CSS field is a
bit further down.
You should see this: https://www.cryoutcreations.eu/wp-content/uploads/2012/11/themesettings-customcssjs.png
In this area (indicated by the blue box), you will want to PRECISELY recreate the code you have circled above (http://i.stack.imgur.com/00cxb.png) EXCEPT for changing the #colour to your desired colour.
So I have a hover effect on a link.
I know that if you click something on mobile, it activates the :hover attribute.
But, it will also follow the link.
I want to know if there is some way I can have the hover effect appear on mobile and pc alike without having to click and follow the link.
I guess you can use touchstart event
Please see How do I simulate a hover with a touch in touch enabled browsers?
You could refer the code snippet over here
http://codepen.io/mickeykay/pen/wiLno
HTML
<h3>Test me in mobile!</h3>
<p>Tap the image to see the :hover effect. Tap anywhere else inside this iframe to un-hover.</p>
<span class="container">
<img src="http://www.mightyminnow.com/wp-content/uploads/2013/06/tech_tip_icon.jpg" />
<span class="details">Details go here</span>
</span>
CSS
.container {
position: relative;
}
.container .details {
display: inline-block;
position: absolute;
top: 100%;
padding: 10px 15px;
z-index: 1;
display: none;
width: 200px;
background: #222;
color: #FFF;
}
.container:hover .details,
.container .details:hover {
display: block;
}
/* jQuery enabled behavior for mobile */
.touch .container.no-hover .details {
display: none !important;
}
Jquery
// Add no-touch class to body for mobile touch events and toggle hover class on elements that need it
if ("ontouchstart" in document.documentElement) {
document.documentElement.className += " touch";
}
// Add and remove no-hover class to <li>'s for mobile hover events
jQuery('.touch .container').each(function() {
var div = jQuery(this);
div.hover(function() {
div.removeClass('no-hover');
});
jQuery('*').not(div).bind('click', function() {
div.addClass('no-hover');
});
});
My wordpress is running a 2014 theme. I am hoping that I can add the word menu next to the lined menu for people who do not know that the lines are a menu. This menu with lines only shows when the site is sized down to the size of a mobile site. The website is dreamgardens.tlchatt.com . I have scoured the web to figure it out. I managed to get my own header image into the theme. Seems like it would be a simple task. I was able to make the area around the button larger in two different ways by changeing style.css .
It looks like the change to the mobile menu occurs based on this Javascript.
( function( $ ) {
var body = $( 'body' ),
_window = $( window );
// Enable menu toggle for small screens.
( function() {
var nav = $( '#primary-navigation' ), button, menu;
if ( ! nav ) {
return;
}
button = nav.find( '.menu-toggle' );
if ( ! button ) {
return;
}
I am hoping to make the mobile menu have the text menu to the right of it much like this website http://chattanoogagb.kokofitclub.com/. I do not understand this code well enough to locate where the mobile re sized code is and alter it to include the text Menu.
The above Java Script and PHP refers to this style.css entry
.menu-toggle {
cursor: pointer;
font-size: 0;
height: 48px;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 48px;
}
.menu-toggle:before {
color: #fff;
content: "\f419";
margin-top: 16px;
}
The \f419 seems to refer to a style sheet genericons.css which has this code.
.genericon-menu:before { content: '\f419'; }
I am wondering if there is a simple aditional line of code I can insert somewhere to place the word "Menu" somewhere near the mobile toggled menu button. Some kind of subtext or something would be fine.
This is not the most elegant way maybe to do this, but you need to change the following lines 1000-1004
.menu-toggle:before {
color: #fff;
content: "\f419";
margin-top: 16px;
}
to this
.menu-toggle:before {
color: #fff;
content: "MENU";
font-weight: bold;
font-size: 12px;
margin-top: 16px;
}
Remember, this goes in your child themes' style.css. Don't edit the twentyfourteen theme directly.
Based on your site it is not responsive - so my assumption you have no media queries? Any way I would use 'Responsive Select Menu' from the plugins library. Set it to 768px and you should be all good. Let me know how you get on :)