Hi,
I’ve tried to make several changes to the carousel on my home page (www.lmmc.co.uk/new) but none seem to be taking effect.
I’m looking to resize the images however the fix below failed to work.
/* Page Builder Post Loop Carousel */
.vantage-carousel-wrapper .vantage-carousel li.carousel-entry .thumbnail a {
width: 242px !important;
height: 162px !important;
background-size: 242px 162px !important;
}I’m also looking to change the glow colour on hover, which I’ve discovered as #3279BB, however when I alter the hex code in the only instance that it occurs on the stylesheet, there is also no change.
I’d really appreciate any help.
Hi Matthew
Thanks for running Vantage.
Please remember that any changes made directly to any files like style.css will not survive a theme update. Here is Greg on Custom CSS if you’re keen: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/.
The CSS you’ve pasted is the default size. So just pasting that with out editing it to your required size won’t produce a change.
However that’s for the Post Loop Carousel: what you see as Latest Posts here: http://demo.siteorigin.com/vantage/.
The glow effect is used on the Grid template, example here: http://hitdelete.com/our-work/
To change the grid thumbnail hover color insert the following under Appearance > Custom CSS and edit as required:
/* Vantage Grid Thumbnail Hover Background */ .vantage-grid-loop article .grid-thumbnail:hover{ border-color:#00bafa; -webkit-box-shadow:0 0 5px rgba(0,187,251,0.75); -moz-box-shadow:0 0 5px rgba(0,187,251,0.75); box-shadow:0 0 5px rgba(0,187,251,0.75); }Here is Chris on what RGBA is about: http://css-tricks.com/rgba-browser-support/.
To change the outputted size of the thumbs in the grid layout you can use Simple Image Sizes:
https://wordpress.org/plugins/simple-image-sizes/
Please be very careful, this plugin is powerful.
Hi Andrew,
Thank you very much. That’s allowed me to change the glow on the grids on my News page.
However, apologies, when I referred to the glow, I meant the overlay on the post carousel on the homepage (http://www.lmmc.co.uk/new/), which I’m using on the ‘Who we’re working with…’. I’d like to change the colour of the blue transparent overlay.
Thanks again,
Matt
No problem, I’m with you now. This is the selector you’ll need to paste into Appearance > Custom CSS to adjust that:
.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a span.overlay { background: #3279BB !important; }And adjust as required.
Hi,
Just one last thing – with regard to that overlay, how do I then alter the opacity?
Thanks for all your help,
Matt
No problem. Here we go:
.vantage-carousel-wrapper .vantage-carousel li.carousel-entry .thumbnail a:hover span { opacity: 0.5 !important; }