|
Jade
|
September 21, 2015 at 12:25 am
Hi there
Event Espresso is adding a bunch of code that is messing up the styling.
The code doesn’t seem to be relevant on these pages – is there a way I can exclude them for this extraneous code?
eg
https://www.southgatemelbourne.com.au/offers-promotions/
https://www.southgatemelbourne.com.au/news/
<div id=”espresso-notices”/>
<div id=”espresso-ajax-loading” style=”display: none;”>
<div id=”espresso-ajax-notices”>
In particular I believe this line is breaking my CSS nth child rule:
thanks!
Jade
|
|
Jade
|
September 21, 2015 at 4:11 am
Seems that line of code didn’t publish:
<a id="checkout" style="float: left; margin-left: -999em;"/>
|
|
Tony
|
September 21, 2015 at 7:09 am
Hi Jade,
To remove those sections from those specific pages you can add:
add_filter( 'FHEE__EE_Front_Controller__display_errors', 'ee_remove_notices_from_front_page' );
function ee_remove_notices_from_front_page($display_errors) {
if( is_page( array( 996, 14 ) ) ) {
$display_errors = false;
}
return $display_errors;
}
I’ll check to see if we can only include those sections within EE pages.
-
This reply was modified 9 years ago by
 Josh. Reason: code edit
|
|
Jade
|
September 21, 2015 at 7:53 pm
Thanks Tony. This has successfully removed the notices.
However, I also need to remove the offscreen checkout link – this is the one that’s causing my nth-child(4n) to be miscounted on the article tiles.
<div id="news-articles" class="children-tiles news-tiles">
<a id="checkout" style="float: left; margin-left: -999em;"/>
<article id="post-12093" class="quarter">
<article id="post-11969" class="quarter">
<article id="post-11953" class="quarter">
<article id="post-11886" class="quarter">
Is there a filter to remove this too?
thanks
Jade
|
|
Josh
|
September 22, 2015 at 12:26 pm
Hi Jade,
Those are added by an action, so they can be removed via an action like this:
add_action('template_redirect', 'ee_remove_cart_markup');
function ee_remove_cart_markup(){
if( is_page( array( 996, 14 ) ) ) {
remove_action( 'loop_start', array( 'EED_Single_Page_Checkout', 'set_checkout_anchor' ), 1 );
}
}
I can also give you a little background info on why the markup is added to some pages, but not all of them. You’ll find that the markup isn’t added to a regular WP page like
https://www.southgatemelbourne.com.au/about/location-parking/
but as you pointed out, they’re on the other pages. It turns out the other pages are including a loop of WP posts, possibly and archive of posts. When EE sees an archive of posts, it will add its checkout stuff because there’s a chance that one of those posts has an EE shortcode on it.
If it becomes a game of whack-a-mole to remove the EE notices and cart markup from any of the pages you’re working, please let us know and we might be able to offer some advice on how to avoid the CSS nth rule breakage.
|
|
Jade
|
September 22, 2015 at 5:41 pm
Thanks Josh. I’ve tested this on our dev site and unfortunately it’s not working for me.
https://dev.southgatemelbourne.com.au/news/
There is the potential in the future we may want to integrate event listings into the What’s on page (when I can figure out how to get a paginated loop working nicely with a merged query of normal posts and EE posts – tips appreciated!)
So perhaps looking at a CSS fix might be a better option…?
thanks,
Jade
|
|
Josh
|
September 23, 2015 at 8:25 am
Hi Jade,
It turns out we have some readymade code that you can use/adapt/reuse to make a merged query of normal posts and EE posts in our github snippets library. Here’s a link to the code:
https://github.com/eventespresso/ee-code-snippet-library/blob/master/templates/de_ee_filter-events-to-posts.php
We’re happy to help you get the nth selector issue straightened out. Can you post the CSS code you’re trying to get working, and let us what it’s supposed to style?
|
|
Jade
|
September 23, 2015 at 7:22 pm
Brilliant, thanks Josh. I will check this out.
The relevant CSS is:
.children-tiles article{float:left;width:23.404255%;margin-right:2.12766%; margin-bottom:2.12766%; background-color: #ffffff; border-radius: 2px;}
.children-tiles article:nth-child(4n){margin-right: 0;}
(This is for desktop, it drops down to 3n, 2n as the columns drop with screen size)
|
|
Jade
|
September 23, 2015 at 7:27 pm
As you can see on this page: https://www.southgatemelbourne.com.au/offers-promotions/
The 3rd & 4th columns of children-tiles/articles run together with no margin between, so the 4n is applying to 3n instead.
The same CSS logic is used successfully on this page http://www.southgatemelbourne.com.au/southgate-cinema/
Which incidentally doesn’t have the hidden checkout button, despite actually being a loop of espresso events!
|
|
Jade
|
September 23, 2015 at 7:29 pm
To clarify, it’s not applying to 3n, it just seems to be counting the checkout button as the first child.
|
|
Josh
|
September 24, 2015 at 10:54 am
I’ve run into this before, instead of using nth-child, it’d be better to use nth-of-type like this:
.children-tiles article:nth-of-type(4n) {
margin-right: 0;
}
There’s a good explanation why it’s more bulletproof to use nth-of-type in this article:
https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
|
|
Jade
|
September 25, 2015 at 4:14 am
Thanks so much Josh! I didn’t know this option existed – always assumed that nth-child meant nth-of-type.
Sorted 🙂
|
