Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-07-14 20:31:11

MikeR
Member
Registered: 2016-09-23
Posts: 44

Vegas Pangolin Theatre Border

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

#2 2017-07-14 21:25:26

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,992
Website

Re: Vegas Pangolin Theatre Border

If I'm not mistaken, Vegas renders images as background. You can't put a border on a background image.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#3 2017-07-14 21:35:02

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 276
Website

Re: Vegas Pangolin Theatre Border

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); }

Offline

#4 2017-07-14 23:02:20

MikeR
Member
Registered: 2016-09-23
Posts: 44

Re: Vegas Pangolin Theatre Border

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

#5 2017-07-15 00:17:27

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Re: Vegas Pangolin Theatre Border

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 1.1.1 test site, Pangolin test site

Offline

#6 2017-07-15 01:48:56

MikeR
Member
Registered: 2016-09-23
Posts: 44

Re: Vegas Pangolin Theatre Border

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

#7 2017-07-15 02:19:00

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Re: Vegas Pangolin Theatre Border

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 1.1.1 test site, Pangolin test site

Offline

#8 2017-07-15 03:02:38

MikeR
Member
Registered: 2016-09-23
Posts: 44

Re: Vegas Pangolin Theatre Border

Hi Rod

Works absolutely perfectly! Amazing!

Thank you so much!!

Offline

#9 2017-07-15 04:55:54

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Re: Vegas Pangolin Theatre Border

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 1.1.1 test site, Pangolin test site

Offline

#10 2017-07-15 05:23:26

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Re: Vegas Pangolin Theatre Border

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 1.1.1 test site, Pangolin test site

Offline

#11 2017-07-15 05:26:48

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 276
Website

Re: Vegas Pangolin Theatre Border

Does that have anything to do with the resize issues discussed before? Like when changing from portrait to landscape on mobile?

Offline

#12 2017-07-15 06:10:54

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Re: Vegas Pangolin Theatre Border

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 1.1.1 test site, Pangolin test site

Offline

#13 2017-07-15 06:29:32

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 276
Website

Re: Vegas Pangolin Theatre Border

Ah, cool - that's good to know. Thanks.

Offline

#14 2017-07-19 04:05:02

MikeR
Member
Registered: 2016-09-23
Posts: 44

Re: Vegas Pangolin Theatre Border

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

#15 2017-07-19 08:12:30

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Re: Vegas Pangolin Theatre Border

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 1.1.1 test site, Pangolin test site

Offline

#16 2017-07-19 14:35:39

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,992
Website

Re: Vegas Pangolin Theatre Border

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB