Vegas slide show discrepancies

Daniel Leu · 2018-04-23 22:10:16

rod barbee wrote:

looks like Daniel beat me to it.

pideja · 2018-04-23 22:16:54

Thanks, Rod and Daniel,

I don't know if you had noticed but the CSS file code was written in triplicates! Yes, there was three repeats of the code. Rod indicated a problem on line 524; that's what put on to it. The entire CSS is 201 lines long. No wonder it was out of whack. I corrected the color and voilà: back to normal.

But this time with a single CSS file! Ah, the beauty of it all.

Thank you again Rod and Daniel.

pideja · 2018-04-23 23:17:58

I guess I spoke too soon: the Vegas slide show again displays large images.
Trying to control the image size I wrote this code:

 .pages-template-identifier-theater .the__copy > .content,
	  .pages-template-identifier-gallery-theater .the__copy > .content {
	  	 background-color: transparent;
	  	 
.pages-template-identifier-theater .slug-photos > ,
	  .pages-template-identifier-gallery-theater .slug-photos >  {
        box-shadow: 5px 10px 20px 10px #888888;
        box-sizing: border-box;
        text-align: center;
        width: 50%;
        max-width: 500px;    
    }

I noticed that there was some colored background under the images that showed up. Of course, that was a few minutes ago when the images displayed at the correct size. So, I went and wrote the three top lines and it works fine. Feeling lucky, I wrote some lines I thought might control the size and overall look of the presentation. Alas, I'm still missing something because it has no effect on the presentation.

rod barbee · 2018-04-23 23:52:24

this;
.pages-template-identifier-theater .slug-photos >
and this:
.pages-template-identifier-gallery-theater .slug-photos >

do nothing. they are classes placed in the body tag and are used to specifically target a page. You need to add the selector for the gallery section of the page.

rod barbee · 2018-04-23 23:56:51

you've manage to style the slide shows before. I think this is the selector you used

.the__gallery > .content

so the full selectors would be

.slug-photos .the__gallery > .content, .slug-photos .the__gallery > .content

rod barbee · 2018-04-24 00:03:19

also, you don't need all those body selectors. In fact, what you have is formatted incorrectly.

this: .pages-template-identifier-theater .slug-photos >
says that for the css to be effective, the element or class being targeted needs to be inside the class "slug-photos" which itself needs to be inside the class "pages-template-identifier-theater"
This is impossible since they are both in the body tag.
so use either "slug-photos" or "pages-template-identifier-theater"

if you're writing css that relies on both of those being in the body class, then write it like this:

.pages-template-identifier-theater.slug-photos (no space between the two)

pideja · 2018-04-24 00:36:44

I've tried all these combinations:

.pages-template-identifier-theater .the__gallery > .content,
.pages-template-identifier-gallery-theater.the__gallery > .content {

.pages-template-identifier-theater.slug-photos .the__gallery > .content,
.pages-template-identifier-gallery-theater.slug-photos .the__gallery > .content {

.pages-template-identifier-theater.slug-photos > .content,
.pages-template-identifier-gallery-theater.slug-photos > .content {

no sucess.

rod barbee · 2018-04-24 01:17:40

Notice in the inspector all those selectors in red:

That indicates an error. The problem is the missing curly brace after this rule:

.pages-template-identifier-theater .the__copy > .content,
	  .pages-template-identifier-gallery-theater .the__copy > .content {
	  	 background-color: transparent;

And that breaks all the css that follows.

But even after fixing that you'll still see a problem. The width of the slideshow is contained, but it will now be tall and skinny.

You had this working once before. See if you can find that (probably in one of the css files you uploaded to backlight/custom/css/) and swap it out for the box-shadow/width controlling code you have now.

rod barbee · 2018-04-24 01:46:11

Ok,

Instead of this:

.pages-template-identifier-theater.slug-photos .the__gallery > .content,
         .pages-template-identifier-gallery-theater.slug-photos .the__gallery > .content {
 box-shadow: 5px 10px 20px 10px #888888;
 box-sizing: border-box;
 text-align: center;
 /*width: 50%;*/
  max-width: 450px;    
 }

try this. using .slug-photos covers both sites

.slug-photos .the__gallery  {	
       box-shadow: 5px 10px 20px 10px #888888;
       max-width: 450px
    }
	
.slug-photos #gallery.vegas-container {
	max-height:600px;
	}

adjust max-width and height to suit your needs.

pideja · 2018-04-24 21:52:55

Works great Rod, thanks.

In it's first incarnation, this site is almost done.

Couldn't have done it without you.

I should be able to put it online by Friday at lucnadeau.ca at last replacing the old CE4 version that's on there now.

Thanks again to you and Daniel.

pideja · 2018-04-27 01:43:49

UPDATE:
For some reason, the Album pages (Oeuvres & Prints) are not the same today. Yesterday, when I last posted all looked good. I was near completion.
But, I log on today and on the English side, I get very large images with only the title and no caption ( I use the "instructions" date for English caption) where as on the French side they are much smaller, with no titles or caption at all!

No CSS has been altered and no Backlight settings have been changed. The lucen-prints template uses luc-en-albums.css while the lucfr-oeuvres page uses luc-fr-albums.CSS because of differences in language mostly. They are identical.

Would it be better to have just one CSS file (luc-albums.CSS) residing in the same folder as the main CSS used for the site? I would have to have another PHP callup for this one, no?

Anyway, it remains that whatever solution, there is something giving different instructions to the French and English sides.

Last edited by pideja (2018-04-27 01:44:26)

pideja · 2018-04-27 07:44:53

I inserted the code from the two "albums" css on the French and the English sides into the main "lucnade.css" file. I then activated the php plugin in both French and English sides and de-activated the corresponding css file in each template. Now, all templates are php activated and all the css is in one file. This helped a bit. But, I am still stuck with that beige background, in the large images. Also, no caption or title on the French side.

UPDATE: Re-published the French side...now with caption & title!

All that's left is that pesky beige background.

Last edited by pideja (2018-04-27 07:49:17)

rod barbee · 2018-04-27 08:22:12

that beige area is coming from the custom css for that page template starting on line 29:

	.the__copy>.content {
		background-color: rgba(213, 204, 185, 0.7);
		border-radius: 0;
	 	width: 100%;
		max-width: 1440px;
		padding: 50px;
		font-size: 1.25rem;
		color: black;
	}

could you include links to specific pages when asking new questions so we don't have to search through the thread for a link? (or better yet, start a new topic since this last question is different than the subject of the original post)

pideja · 2018-04-27 19:15:03

Sorry about that. If need be, I'll start a new thread with the necessary links.

Community @ The Turning Gate

#26 2018-04-23 22:10:16

Re: Vegas slide show discrepancies

#27 2018-04-23 22:16:54

Re: Vegas slide show discrepancies

#28 2018-04-23 23:17:58

Re: Vegas slide show discrepancies

#29 2018-04-23 23:52:24

Re: Vegas slide show discrepancies

#30 2018-04-23 23:56:51

Re: Vegas slide show discrepancies

#31 2018-04-24 00:03:19

Re: Vegas slide show discrepancies

#32 2018-04-24 00:36:44

Re: Vegas slide show discrepancies

#33 2018-04-24 01:17:40

Re: Vegas slide show discrepancies

#34 2018-04-24 01:46:11

Re: Vegas slide show discrepancies

#35 2018-04-24 21:52:55

Re: Vegas slide show discrepancies

#36 2018-04-27 01:43:49

Re: Vegas slide show discrepancies

#37 2018-04-27 07:44:53

Re: Vegas slide show discrepancies

#38 2018-04-27 08:22:12

Re: Vegas slide show discrepancies

#39 2018-04-27 19:15:03

Re: Vegas slide show discrepancies

Board footer