I'm trying to remove some CSS, which is added on the front-end by Wordpress. On last update Wordpress is adding class like this:
<main id="app" class="wp-container-620d4049355bb wp-block-group">
<div class="wp-container-620d404934f13 entry-content wp-block-post-content">
wp-container-620d4049355bb / wp-container-620d404934f13 for main blocks.
The problem is it's also adding some CSS:
.wp-site-blocks > * + * {
margin-top: var( --wp--style--block-gap );
}
.wp-site-blocks > * {
margin-top: 0;
margin-bottom: 0;
}
.wp-container-620d4049355bb > * {
margin-top: 0;
margin-bottom: 0;
}
.wp-container-620d404934f13 > * + * {
margin-top: var( --wp--style--block-gap );
margin-bottom: 0;
}
This CSS have a conflict with my blocks, where I'm adding single classes for setting margin.
Does anyone could help me how can I remove that css? Or remove that class? Funny fact is that wp-container-620d42ff1d800 is different every page refresh.
Thank you!
The blockGap feature, var( --wp--style--block-gap ); is not enabled by default. If you enabled blockGap or appearanceTools in theme.json, you can disable it again by setting it to null:
theme.json:
{
"version": 2,
"settings": {
"spacing": {
"blockGap": null
}
}
}
See the theme.json reference:
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#spacing
If you want to remove the wp-container-random and the generated alignments, margins, and flex styles, you can disable the Layout feature.
Add this to your themes functions.php or similar:
remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
And if you have Gutenberg active:
remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
Source for the wp_render_layout_support_flag: https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/layout.php#L142
Related
I try to remove white space above the header in WooCommerce email notifications.
I already pasted the email files into the folders:
public_html -> wp-content -> themes -> flatsome-child -> woocommerce -> emails
I already tryed to hide the header with:
/*do_action( 'woocommerce_email_header', $email_heading, $email );*/
But this is not solution because, yes it removes the white space above the header but also hides de header and I don't want this.
I just want to remove the empty space above the header (look the image attached)
The white space is applied via CSS. If you want to apply your own styles or want to modify the existing one in WooCommerce email notifications:
1) You can overwrite the template file:
The template file can be overridden by copying it to yourtheme/woocommerce/emails/email-styles.php.
Replace line 50 - 56 #version 4.0.0
#wrapper {
background-color: <?php echo esc_attr( $bg ); ?>;
margin: 0;
padding: 70px 0;
-webkit-text-size-adjust: none !important;
width: 100%;
}
With
#wrapper {
background-color: <?php echo esc_attr( $bg ); ?>;
margin: 0;
padding: 70px 0;
padding-top: 0;
-webkit-text-size-adjust: none !important;
width: 100%;
}
Also see: Template structure & Overriding templates via a theme - How to Edit files
OR
2) Use the woocommerce_email_styles filter hook:
// Add CSS to email
function filter_woocommerce_email_styles( $css, $email ) {
$extra_css = '#wrapper { padding-top: 0 }';
return $css . $extra_css;
}
add_filter( 'woocommerce_email_styles', 'filter_woocommerce_email_styles', 10, 2 );
Code goes in functions.php file of the active child theme (or active theme).
Optional: via $email->id == ... you can target specific emails, see How to target other WooCommerce email notifications
I want to add 'continue shopping' / 'add product' link before order review on checkout page. But I want it to be inline with "Your order" text.
See this screenshot: https://ibb.co/47f6vd7
I tried this code:
add_action('woocommerce_checkout_order_review','woocommerce_checkout_before_order_review_add_product');
function woocommerce_checkout_before_order_review_add_product(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if(!empty($continue_shopping_url)){
echo "$add_product_label";
}
}
But it show on the line below "Your order" text. So it looks ugly.
How do i make it inline with "Your order" text using additional css?
First of all you are using the wrong hook.
While woocommerce_checkout_order_review will cause the text to be added insde the #order_review div, the woocommerce_checkout_before_order_review hook will cause it to be placed before the #order_review div.
So you get:
function action_woocommerce_checkout_before_order_review(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if ( ! empty ( $continue_shopping_url ) ) {
echo '<div class="my-label">' . $add_product_label . '</div>';
}
}
add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );
Which CSS you will have to apply for this is completely theme dependent,
but using display: inline-block; can certainly come in handy
Make sure you have a child theme setup. You can then add the 'Continue shopping' link via the woocommerce_checkout_before_order_review action hook:
add_action( 'woocommerce_checkout_before_order_review', 'woocommerce_checkout_add_continue_shopping_link' );
function woocommerce_checkout_add_continue_shopping_link() {
printf( 'Continue shopping', wc_get_page_permalink( 'shop' ) );
}
Add the above code snippet to the functions.php of your child theme. Then take care of the CSS styling in the style.css of your child theme.
For instance like this:
body.woocommerce-checkout h3#order_review_heading {
float: left;
width: auto;
}
body.woocommerce-checkout a.checkout-continue-shopping {
font-size: 0.8em;
float: left;
padding: 0.5em 1em;
background: #444;
text-decoration: none;
color: white;
margin-left: 2em;
margin-top: 0.25em;
}
Which will give you the following result:
You will probably also have to add some CSS media queries to make this look good on mobile and tablet.
I'm using code mirror from ngx-codemirror. I want to split the line when it fits to the width of the parent. I have found some solutions to split the like using,
lineWrapping: true
and in styles
.CodeMirror-wrap pre {
word-break: break-word;
}
Using this I was able to split the line but I need to show the line number too.
The line number is not shown for the line that was just split.
This is the stackblitz link to my issue : code-mirror-line-break-issue
Screenshot :
Please help me with this.
This is not feasible using Code Mirror options, as this is something that is a bit counter intuitive that is rarely (ever?) wanted.
Like I said in my comment, say 2 persons discussing on a phone/web chat about a piece of code/json. They will not see the same thing when one mentions a line number to the other if they have different windows/screen sizes
Solution
As a hack, you can create your own elements representing line numbers and place them over the default line numbers.
Here is the stackblitz demo
Note: This a a very basic example. If you change code mirror settings (font size, gutters,...), you might need to tweak the css or do more calculation based on these settings.
component.html
<div class='codeMirrorContainer'>
<ngx-codemirror
#codeMirror
[options]="codeMirrorOptions"
[(ngModel)]="codeObj"
></ngx-codemirror>
<ul class='lineContainer' [style.top.px]="-topPosition">
<li [style.width.px]='lineWidth' *ngFor="let line of lines">{{line}}</li>
</ul>
</div>
component.css
li
{
height: 19px;
list-style: none;
}
.codeMirrorContainer
{
position:relative;
overflow: hidden;
}
.lineContainer
{
position:absolute;
top:0;
left:0;
margin: 0;
padding: 5px 0 0 0;
text-align: center;
}
::ng-deep .CodeMirror-linenumber
{
visibility: hidden; /* Hides default line numbers */
}
component.ts
export class AppComponent
{
#ViewChild('codeMirror') codeMirrorCmpt: CodemirrorComponent;
private lineHeight: number;
public lineWidth;
public topPosition: number;
public lines = [];
codeMirrorOptions: any = ....;
codeObj :any = ...;
constructor(private cdr: ChangeDetectorRef)
{
}
ngAfterViewInit()
{
this.codeMirrorCmpt.codeMirror.on('refresh', () => this.refreshLines());
this.codeMirrorCmpt.codeMirror.on('scroll', () => this.refreshLines());
setTimeout(() => this.refreshLines(), 500)
}
refreshLines()
{
let editor = this.codeMirrorCmpt.codeMirror;
let height = editor.doc.height;
this.lineHeight = editor.display.cachedTextHeight ? editor.display.cachedTextHeight : this.lineHeight;
if (!this.lineHeight)
{
return;
}
let nbLines = Math.round(height / this.lineHeight);
this.lines = Array(nbLines).fill(0).map((v, idx) => idx + 1);
this.lineWidth = editor.display.lineNumWidth;
this.topPosition = document.querySelector('.CodeMirror-scroll').scrollTop;
this.cdr.detectChanges();
}
}
I want to achieve that when the page attribute selects a certain template, the background color of the page can be randomly changed. (Only this page, not for all pages).
Unfortunately, my code (PHP) doesn't work.
add_filter( 'body_class','modele_bg_couleur' );
function modele_bg_couleur($classes)
{
if(is_page_template('modele-bg-couleur.php')){
$test = array("beige", "azure", "linen", "snow");
$classes[] = $test[array_rand($test)];
}
return $classes;
}
add_action( 'admin_head', 'modele_bg_couleur_css' );
function modele_bg_couleur_css(){
echo "
<style type='text/css'>
.beige {
background-color: beige;
}
.azure {
background-color: azure;
}
.linen {
background-color: linen;
}
.snow {
background-color: snow;
}
</style>
";
}
The body_class filter lets you add classes to the front end of your site. The admin_head action lets you add custom code to the admin pages (Wordpress back end). So right now you are adding a body class to the front end of your site but applying the CSS to the back end.
I'm assuming you want this to work on your front end. You can then just add the following CSS to your theme via the customizer or via your own child theme:
body.beige { background-color: beige!important; }
body.azure { background-color: azure!important; }
body.linen { background-color: linen!important; }
body.snow { background-color: snow!important; }
Has anyone been able to add navigation arrows for Next/Prev slides in the new woocommerce slider?
The thumbnail navigation particularly on mobile/table is great, but having arrows as well for desktop users would be a dream! Arrows on the main product image are preferred over the lightbox. You will understand why on our site:
http://52.56.199.58/collection/bedroom/giorgetti-syn-bedside-table/
Would seem an easy and obvious option that Woocommerce has forgotten. Any help or guidance would be much appreciated.
Cheers
You can update the Flexslider options in WooCommerce V3 by hooking into the 'woocommerce_single_product_carousel_options' filter. So specifically to enable the navigation arrows the 'directionNav' option should be set to 'true'.
Put this example function in your functions.php file and you should be good to go:
// Update WooCommerce Flexslider options
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );
function ud_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
return $options;
}
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;}
li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {visibility:visible;content: '\f105';
font-family: FontAwesome;margin-right: 10px;font-size: 70px; }
a.flex-prev::before {
visibility:visible;
content: '\f104';
font-family: FontAwesome; margin-left: 10px;font-size: 70px;}
Some more tested value with woocommerce 3.5.3
add_filter('woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options');
function ud_update_woo_flexslider_options($options) {
// show arrows
$options['directionNav'] = true;
$options['animation'] = "slide";
// infinite loop
$options['animationLoop'] = true;
// autoplay (work with only slideshow too)
$options['slideshow'] = true;
//$options['autoplay'] = true;
// control par texte (boolean) ou bien par vignettes
// $options['controlNav'] = true;
//$options['controlNav'] = "thumbnails";
// $options['mousewheel'] = true;
return $options;
}