Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
I trying get a grey border, 8px of padding & drop shadow around the image inside the pangolin theatre frame, using custom css
my code is:
.vegas-slide img {border: 1px solid #d3d3d3;
box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
padding: 8px;}
It doesn't work.
Pangolin test site: http://www.michaelregan.uk/pricing/
With pangolin vegas theatre the minimum width you can now set is 920px
Where as in the okapi vegas theatre, it went down to 400px where I could then put a border padding & drop shadow,
around the outside of the frame, as in my backlight 111 site.
Spent a couple of hours trying different code & I am stuck!
Any help much appreciated
MikeR
Offline
If I'm not mistaken, Vegas renders images as background. You can't put a border on a background image.
Offline
This code that Rod provided a while back will put it outside the frame:
.gallery.vegas-container { box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.5); }
Charlie
www.stalkinglight.com
Offline
Charlie thanks, I already have Rod's code for the outer border already in my css.
Matt shame about the minimum width increase from okapi backlight 111, from 400px to 920px
Trying to upgrade existing backlight 111 site to pangolin 121
The only other thing I can think of, is to do the border & padding in photoshop & add it to the image.
Or not use the vegas slideshow.
Offline
two ideas for shadow:
1) Your Photoshop solution
2) make all images the same aspect ratio and orientation and apply the custom css to the frame
for the size:
size is determined by height in the in-line styling. To override that, try this:
#gallery.gallery.vegas-container {
height: 400px !important;
width: 400px;
margin: 0 auto;Set height and width as needed.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hi Rod
Brilliant that code has worked!
But is now made a much larger slideshow on my home page, much too small!
Is there a way to target this piece of css code to specific pages,
so I can have different size slideshows on different pages, as per my backlight 111 site?
Thanks for your help!
Offline
first, adjust the height and width sizes to your needs. And yes, you can target specific pages.
If you look at the source code for a page, you'll see that the <body> tag has several classes, including a page-template class and an album-template class and a slug class. You can use these to target specific pages.
on your greeting card page you have these body classes:
<body class="pangolin type-page template-id-1 pages-template-id-13 pages-template-identifier-pricing album-template-id-24 slug-greeting-card-slideshow cart-unready crg-unready"you can target that page using the slug class:
.slug-greeting-card-slideshow #gallery.gallery.vegas-container {
height: 400px !important;
width: 400px;
margin: 0 auto;
}Or you could create several vegas templates that represent different sizes you want. Then write css targeting each template using the album-template-id class. That way you just have to assign a certain "size" template to an album that the css will automatically target that album using that template.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hi Rod
Works absolutely perfectly! Amazing!
Thank you so much!!
Offline
It made my day when Matt and Ben added those body classes!
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
It looks like it behaves itself as the browser resizes too, but I've not tested in on mobile devices.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Does that have anything to do with the resize issues discussed before? Like when changing from portrait to landscape on mobile?
Charlie
www.stalkinglight.com
Offline
not that I know of. Backlight 1.2.1 still has that issue, but Matt's squashed it in the 1.2.2 beta
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Ah, cool - that's good to know. Thanks.
Charlie
www.stalkinglight.com
Offline
Hi Rod
On a mobile phone & a desktop my 3 different size slideshows are not scaling down,
when reducing the browser to mobile phone size, with half the page off the screen
http://www.michaelregan.uk/greeting-car … d-samples/
http://www.michaelregan.uk/christmas-ca … s-samples/
http://www.michaelregan.uk/photographic-print-prices/
This my css code
.slug-greeting-card-slideshow-portrait #gallery.gallery.vegas-container {
height: 574px !important;
width: 400px;
margin: 0 auto;
border: 1px solid #d3d3d3;}
.slug-christmas-card-slideshow #gallery.gallery.vegas-container {
height: 502px !important;
width: 698px;
margin: 0 auto;}
border: 1px solid #d3d3d3;}
.slug-photographic-print-slideshow #gallery.gallery.vegas-container {
height: 502px !important;
width: 755px;
margin: 0 auto;
border: 1px solid #d3d3d3;}
Any ideas what I could do?
Thanks Mike R
Offline
As mentioned above, there's a fix coming for the vegas slideshow resizing issue.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
That said, you're going to need to drop the "height: ...px !important" statements, else our fix isn't going to help you. The slideshow sets height on it's own, so it needs to be allowed to do that.
Offline
Pages: 1