beatrizc

Hey @DanPrime!
You can add an image there via CSS, if it's NOT meant to be a clickable element. Otherwise you'll need JavaScript.
If it's just an image what you're after, this code should help you get there:
.eventitem-column-meta::after { background-image: url(IMAGE.PNG); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: block; height: 200px; width: 100%; } You'll need to:
Replace IMAGE.PNG with the URL of the image you want to use. Modify the height property to make the image bigger or smaller (horizontally it'll reach a maximum width that matches the sidebar content) Change background-position to left or right, if you need to realign the image. -------------------
Note that the code, as is, will apply to ALL event items inside your site.
Therefore ALL of them will have the same image showing in that area.
If you want to narrow things down to ONE event, you can include the Page ID in your code, like so:
#page-id-goes-here .eventitem-column-meta::after { background-image: url(IMAGE.PNG); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: block; height: 200px; width: 100%; } If you need help finding your event's page ID, you can check out this post to know where to look for it.
Hope this helps!

You're welcome!
For the main shop page the code needed is different.
This should do it for the Impression sur porte:
#thumb-impressionsurporte .grid-prices { display: none; } And this other one for the Bois imprimé:
#thumb-boisimprime .grid-prices { display: none; } Hope this helps!

You're welcome!
For the main shop page the code needed is different.
This should do it for the Impression sur porte:
#thumb-impressionsurporte .grid-prices { display: none; } And this other one for the Bois imprimé:
#thumb-boisimprime .grid-prices { display: none; } Hope this helps!

Hey @DanPrime!
You can add an image there via CSS, if it's NOT meant to be a clickable element. Otherwise you'll need JavaScript.
If it's just an image what you're after, this code should help you get there:
.eventitem-column-meta::after { background-image: url(IMAGE.PNG); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: block; height: 200px; width: 100%; } You'll need to:
Replace IMAGE.PNG with the URL of the image you want to use. Modify the height property to make the image bigger or smaller (horizontally it'll reach a maximum width that matches the sidebar content) Change background-position to left or right, if you need to realign the image. -------------------
Note that the code, as is, will apply to ALL event items inside your site.
Therefore ALL of them will have the same image showing in that area.
If you want to narrow things down to ONE event, you can include the Page ID in your code, like so:
#page-id-goes-here .eventitem-column-meta::after { background-image: url(IMAGE.PNG); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: block; height: 200px; width: 100%; } If you need help finding your event's page ID, you can check out this post to know where to look for it.
Hope this helps!

Hey @cinstudio!
You can use the following snippet to change that folder bg color if you're in Brine, 7.0:
.Header-nav-folder { background-color: black !important; } Or this other one if you're in 7.1:
.header-nav-folder-content { background-color: black !important; }  
Assuming that you'll be applying this only for the blog page – if you're adding the code to the Custom CSS window – you can include the page ID in the snippet if you need to, like this:
#page-id-goes-here .header-nav-folder-content { background-color: black !important; } (Same thing for 7.0, but with the corresponding selector from before).
 
Hope this helps!

Thank you, that worked !!

This absolutely did the trick and it's working now! Thank you so much @beatrizc, you rock!

This worked! Thank you so much!

Hey @AJohnston2022!
You can achieve that by changing the hover mode "trigger".
Instead of having the arrow rotate when hovering over the title of the folder, you can make it rotate when you hover anywhere on the entire folder + dropdown container.
To do that, you'll need to modify the hover mode snippet, like so:
.header-nav-item--folder:hover .header-nav-folder-title::after{ transform:rotate(0deg) }; Hope that helps!

Hey @CynMetz!
That issue is coming from a recent update.
There's a new container (.section-border) that carries the background color for the content sections. And since that one isn't being targeted in your current code, it's not set as transparent.
You can easily fix that by swapping that second code line for this one:
.page-section, .section-background, .section-border {background:transparent!important;} Hope that helps!

Hey @studionew!
If I understand correctly what you're trying to do, you can apply flexbox to the summary block to make the height adjustment automatic vs. setting a manual height value for the title container.
Here's the snippet you can use for Grid Summary Blocks:
.sqs-gallery-design-autogrid .summary-item-list { display: flex; flex-wrap: wrap; } .sqs-gallery-design-autogrid .summary-item { display: flex; flex-direction: column; } Keep in mind the code as is will apply to ANY Grid Summary Block you have on the site.
Hope that helps!

Hey @AJohnston2022!
You can achieve that by changing the hover mode "trigger".
Instead of having the arrow rotate when hovering over the title of the folder, you can make it rotate when you hover anywhere on the entire folder + dropdown container.
To do that, you'll need to modify the hover mode snippet, like so:
.header-nav-item--folder:hover .header-nav-folder-title::after{ transform:rotate(0deg) }; Hope that helps!

Hey @studionew!
If I understand correctly what you're trying to do, you can apply flexbox to the summary block to make the height adjustment automatic vs. setting a manual height value for the title container.
Here's the snippet you can use for Grid Summary Blocks:
.sqs-gallery-design-autogrid .summary-item-list { display: flex; flex-wrap: wrap; } .sqs-gallery-design-autogrid .summary-item { display: flex; flex-direction: column; } Keep in mind the code as is will apply to ANY Grid Summary Block you have on the site.
Hope that helps!