Struggling over bad loose ends - Aaron?

ChancyRat · December 21, 2014

Aaron, now that you are doing magic with Smugmug, could I ask for a bit of help?
I have been mired down for months now.
I'll start with just one and follow up with a 2nd once this is worked out.

I have a lot of custom galleries, so I know I will need to look at each one to fix them, but I'll start with one where the problem is. If you click the first video (at the bottom, in the smugmug style gallery group, not the embedded video) in this gallery:
http://www.joinrats.com/ModifyBehavior/Pemy/
you will see that when play is clicked, the image enlarges and juts out past the right margin.

Yet on this page, http://www.joinrats.com/ModifyBehavior/Pemy/
none of the videos jut out when played.

I checked the page layout and they are both set to 960px.

What do I need to do to fix this?

leftquark · December 22, 2014

Hi Rat,
It looks like it's very specific to your browser window size. I could only get it to do that for a very narrow range of window sizes. If I make the window bigger, it fits properly. If I make the window smaller, the video shrinks and fits properly. It looks like you just happened to have your window set at the 1 little size that has errors. If you set the margin to 0 and the left/right padding to 15px, it should help:

.sm-page-node-Gpzsk .sm-video-center {
box-shadow: 0 0 1px 0 #4c4d4f;
background: #fdf7dc;
margin: 0px;
padding: 15px 15px 20px 15px;
}

ChancyRat · December 22, 2014

Aaron, thank you so much for looking into this. However, I think you may not be looking at the right video. Not the embedded video on this page:
http://www.joinrats.com/customize/ModifyBehavior/Pemy/.
The embedded video is the code you tweaked: .sm-page-node-Gpzsk .sm-video-center

The code that's affecting the SM gallery style cluster of videos at the bottom is what I refer to, and, on this page, even if the window size fills my monitor, the video pokes off to the right when I click play. That is the image I attached in my first post, attached again.

/* Add background color to SM style thumbs, image, caption, keywords */
.sm-page-node-Gpzsk .sm-gallery-smugmug{
  background-color:#fbf2c9;
  background-color:rgba(251,242,201,.97);
  padding:5px 15px 0 0;
  opacity:.97;
  filter:Alpha(opacity='97');
  box-shadow:0 0 6px 0 #000;
}

What is causing the video image to be inside a box that is inside the main background of the SM gallery area? It only appears when I click the video to play. That background box is not the same color as the individual embedded videos-in-boxes on the rest of the gallery, and it is not showing up in the other galleries with videos that play properly. I drew 2 arrows on the strange box that appears when I click play, in this gallery, but not in the other gallery on videos where I click play.

Sorry if I'm not being clear.

leftquark · December 23, 2014

I see now. I've duplicated your issue. Could you give me some examples of pages where this doesn't happen? My guy reaction is that it's because you're not using a stretchy layout -- the width of the screen is just too narrow to display thumbnails AND a video and since the video player is it's own object with some minimum width. When I increased the content part of the window to be wider, the video player fit fine. Is there a reason you don't like stretchy? If you can provide a link to one or more pages that work properly I can try to dig deeper.

ChancyRat · December 23, 2014

Oh good for duplication. Not crazy over here.
And, below is my wandering attempt to figure this out, but after a long wander, I did discover the problem.

The code for the video blocks is affecting the video play in the SM gallery style. DUH.
I tested this by removing the video code in this gallery, where this is a 2nd gallery that has a problem in video play mode: extra box appears when video is played, and it and the video then jut out over the right margin of the background.
http://www.joinrats.com/EarningTrust/Letratsdecide/

The code I removed (since then put back):

.sm-page-node-gZ7Sq .sm-video-center{
  box-shadow:0 0 1px 1px #4c4d4f;
  background:#FFFDC9;
  margin:5px 5px 5px 5px;
  padding:20px 20px 20px 20px;
}

So now I'm really stumped. How can I control the background and borders/etc., of embedded videos in a gallery, but not simultaneously affect video play in the main SM gallery area at the bottom?

:crazy

Meandering mind struggle to get the logic (feel free to ignore):
http://www.joinrats.com/ModifyBehavior/PositiveReinforcement/Method/

has videos (scroll to very bottom) that do not override the right margin.
BUT they also do NOT have that odd box that I drew arrows to in the previous post. That's why I asked you what is the code that is causing that box for the problem video? I did an extensive search in my site CSS, could find nothing to ID it (but what do I know

).

The layout specs are the same in both galleries. The SM style is the same.
The only thing different in the problem gallery is the addition of the codes to control for the background of embedded youtube videos, text boxes, SM videos. Can that code be influencing the videos in the main SM gallery at the bottom?

I wondered if the issue is the aspect ratio of the videos. I see the options range from auto to 1080p. The video in this one that has no problem: http://www.joinrats.com/ModifyBehavior/PositiveReinforcement/Method/ only goes up to 720. BUT it can't be that because another video on the problem page which has the smaller ratio, up to 720 only, also sticks out.

And in this gallery the first video has the larger aspect ratio options but does not stick out or create an extra box.: http://www.joinrats.com/Enrichment/Feathers/

Here's another gallery, the one video here sticks out and has the code for video blocks, text blocks, etc., just like the initial problem example I gave: http://www.joinrats.com/Enrichment/Feathers/

It just has to be related to that extra box.

I don't think there's a way through this without finding the code that causes the box to pop into existence only with play, in one gallery but not ...

ChancyRat · December 28, 2014

Bug in formatting code of embedded videos?
Aaron I was wondering if you were able to see the key issue I have identified now?

How can I control the background and borders/etc., of embedded videos in a gallery, but not simultaneously affect video play in the main SM gallery area at the bottom?

Below is the code that is affecting videos in both locations.

Thanks.

ChancyRat wrote: »
Oh good for duplication. Not crazy over here.
And, below is my wandering attempt to figure this out, but after a long wander, I did discover the problem.

The code for the video blocks is affecting the video play in the SM gallery style. DUH.
I tested this by removing the video code in this gallery, where this is a 2nd gallery that has a problem in video play mode: extra box appears when video is played, and it and the video then jut out over the right margin of the background.
http://www.joinrats.com/EarningTrust/Letratsdecide/

The code I removed (since then put back):
.sm-page-node-gZ7Sq .sm-video-center{
  box-shadow:0 0 1px 1px #4c4d4f;
  background:#FFFDC9;
  margin:5px 5px 5px 5px;
  padding:20px 20px 20px 20px;
}

Allen · December 28, 2014

Have you tried using the widget class name to separate it from everything else?

ChancyRat · December 28, 2014

Oh hi Allen!

How do I do that? I draw a blank on the concept of 'widget class name'.

thank you!

Allen · December 28, 2014

ChancyRat wrote: »

Oh hi Allen! <img src="https://us.v-cdn.net/6029383/emoji/wave.gif" border="0" alt="" >
How do I do that? I draw a blank on the concept of 'widget class name'.

thank you!

Each widget has a unique class name. Two videos on your page.

<div id="sm-page-widget-Sc67LSKk" class="sm-page-widget
sm-page-widget-video sm-page-widget-8203732" data-typeid="8203732">

<div id="sm-page-widget-nRfvkdJC" class="sm-page-widget
sm-page-widget-video sm-page-widget-8352081" data-typeid="8352081">

Or target both
.sm-page-widget-video

ChancyRat · December 28, 2014

Let me make sure I understand this because the implications seem huge. Are you saying I should stop embedding video content blocks? Replace them with HTML blocks?

I derive that because your code is divs, which aren't CSS, so I can't use the page's CSS?

That seems like a disproportionately painful solution.

cry

On a side note, I don't believe the html video views get counted in stats?

I would do anything to not have to embed the videos as HTML blocks.

I don't understand why the code for the video blocks can't be blocked from the SM style gallery...

leftquark · December 28, 2014

Allen is pasting the code from SmugMug, not code you should paste in yourself. He was showing you where in our code we display the widget ID. You can then add that widget ID to your CSS code so that only effects the widget and not anything else.

leftquark · December 28, 2014

What Allen is saying, is that your code for the video is effecting BOTH video players ... since you've scoped it to ALL video on THIS page.

Instead of:

.sm-page-node-gZ7Sq .sm-video-center{
  box-shadow:0 0 1px 1px #4c4d4f;
  background:#FFFDC9;
  margin:5px 5px 5px 5px;
  padding:20px 20px 20px 20px;
}

You should have only called out the WIDGET ID for the video player in the middle of your page, rather than all videos on this page.

[COLOR="Red"].sm-page-widget-6536390[/COLOR] .sm-video-center{
  box-shadow:0 0 1px 1px #4c4d4f;
  background:#FFFDC9;
  margin:5px 5px 5px 5px;
  padding:20px 20px 20px 20px;
}

Should do the trick. The part I changed is in red.

ChancyRat · December 28, 2014

leftquark wrote: »

Allen is pasting the code from SmugMug, not code you should paste in yourself. He was showing you where in our code we display the widget ID. You can then add that widget ID to your CSS code so that only effects the widget and not anything else.

ohhhhhh.

Sor-ry.
And - I got it!
Is there a way to group the two widgets? Instead of repeating all the codes twice? As in this example which does not work:

.sm-page-widget-8203732
.sm-page-widget-8352081{
  box-shadow:0 0 1px 1px #4c4d4f;
  background:#FFFDC9;
  margin:5px 20px 5px 20px;
  padding:20px 20px 20px 20px;
}

leftquark · December 28, 2014

ChancyRat wrote: »
ohhhhhh.
Sor-ry.
And - I got it!
Is there a way to group the two widgets? Instead of repeating all the codes twice? As in this example which does not work:
.sm-page-widget-8203732
.sm-page-widget-8352081{
  box-shadow:0 0 1px 1px #4c4d4f;
  background:#FFFDC9;
  margin:5px 20px 5px 20px;
  padding:20px 20px 20px 20px;
}

Remove the line break and replace with a comma:

.sm-page-widget-8203732, .sm-page-widget-8352081{
  box-shadow:0 0 1px 1px #4c4d4f;
  background:#FFFDC9;
  margin:5px 20px 5px 20px;
  padding:20px 20px 20px 20px;
}

ChancyRat · December 28, 2014

Thank you! and 2nd problem: background color in lightbox mode
Thank you both so much!

Okay, second problem.
How can I change the background color in lightbox mode? I thought I had already done so in the main CSS, but at some point it disappeared.

Example:

http://www.joinrats.com/Enrichment/Fountains/i-6XjdjkL/A:
in this gallery the background is grey (wrong).

ChancyRat · January 1, 2015

Oooo-kayyy.

When you guys don't talk to me I figure I'm supposed to figure something out, at least try to get further.

So I removed all the lightbox code from the sitewide CSS.
Then found I'd already asked this question once:
http://dgrin.com/showthread.php?t=242392
but I had no memory of it.

I won't bore you with the details but I now have the background color right.

I also did a careful inspection of my site-wide css to minimalize what's there. I think this is a good start to my next question: I'm unable to get the gallery titles to wrap when they're long.

Example folder, and two examples in the image attached:
http://www.joinrats.com/ModifyBehavior

And the code is this, from this http://dgrin.com/showthread.php?t=237930:

/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p {
  padding-left: 0!important;
  padding-right: 0!important;
  overflow: visible !important;
  white-space:normal !important;
  height: 41px !important;
}

Thanks (and happy new year!)

leftquark · January 1, 2015

That code works fine when I put it into your site.

ChancyRat · January 1, 2015

leftquark wrote: »

That code works fine when I put it into your site.

Thank you so much for looking. I am totally confused now, because the code was and still is in the sitewide CSS, and the image and problem I reported were based on the code being there. So - what does it mean that you "added it" and it works right?

ChancyRat · January 2, 2015

As much as I love you all,

which is a lot,

lust,
I hate in equal measure struggling through CSS.
But, I did again. So I got the titles to wrap by removing this code from the css.
As a result though, I've lost two customizations which I need back.
1. How do I change the font size of the captions of photos in the SM gallery style?
2. Can you tell me now how to change the font size of the titles (of galleries in Folders)?

Thankkkkks....

/* Change Font Size/Color of photo caption in a sm style gallery */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
font-size: 20px;
/* background-color: rgba(255, 255, 204, 1) !important; /*
padding: 2px 10px 2px 10px !important; 
}

/* titles on thumbs in folders */
.sm-tiles-grid ul li a p {
font-size:95%!important;
padding-left: 0!important;
padding-right: 0!important;
text-align:center;
overflow: visible !important;
white-space:normal !important;
height: 41px !important;
}

ChancyRat · January 3, 2015

Ahhh, you guys - the pain and the bliss are so intermingled.
Okay so adding the font size to that code did work this time. Apparently I had tried it before but when the conflicting bad code interfered, giving me misleading results.

Please remember that all of my code was given to me by Dgin magicians - I didn't put it there in the first place. So it's misleading to think that since it's there I must know how to tweak it. Not.

Okay, so now: why won't the background (behind the titles of galleries in the folder view) reduce in size to fit the borders I added?

http://www.joinrats.com/ModifyBehavior

Nothing I do to add padding or margins in this code (and I don't see any other relevant CSS) will limit the darker color to fit only inside the borders:

.sm-tile-content > .sm-tile-info {
background-color: rgba(255, 255, 175, 1) !important;
}

/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p {
  box-shadow: 1px 1px 1px 0px #4A4B4C;
  padding-left: 4px !important;
  font-size: 18px !important;
  padding-right: 4px !important;
  overflow: visible !important;
  white-space:normal !important;
  height: 60px !important;
}

ChancyRat · January 3, 2015

Well I figured that one out too. Oh my aching head.
Except - now I have two complete rectangles for each title, one with the nice title and one blank one, and all I did to get that was change the layout for the titles to be under instead of bottom bar. The code was perfect when I had bottom bar, but I would like "under".

Removing this code clears the extra rectangle of blank space, but then I loose all my formatting. I don't know what correct code (the .sm type?) that I need to allow me to use the "under" option.

This time I'm really at a dead end to my knowledge of SM's special codes.

/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p {
  box-shadow: 1px 1px 1px 0px #4A4B4C;
  text-align: center;
  padding-left: 12px !important;
  font-size: 20px !important;
  padding-right: 12px !important;
  overflow: visible !important;
  white-space:normal !important;
  height: 75px !important;
 background-color: rgba(255, 255, 175, 1) !important;
}

leftquark · January 7, 2015

So the code above effects anything with a paragraph style (the "p" after ".sm-tile-info") and you'll see the HTML for that as a "<p>" ... for example "<p title="Positive Reinforcement">

In the HTML we have 2 paragraphs styles: 1 for the title and 1 for the caption. Your code effects ANY p that it see's so it's adding 1 box for title and 1 box for the caption. If you had captions you would see the caption inside that second box.

To get rid of the box around those captions you could change your code to only touch the first "<p>" (aka the titles):

/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p[COLOR="Red"]:nth-of-type(1)[/COLOR] {
  box-shadow: 1px 1px 1px 0px #4A4B4C;
  text-align: center;
  padding-left: 12px !important;
  font-size: 20px !important;
  padding-right: 12px !important;
  overflow: visible !important;
  white-space:normal !important;
  height: 75px !important;
 background-color: rgba(255, 255, 175, 1) !important;
}

ChancyRat · January 11, 2015

Sorry for the delay in responding Aaron and thank you so much for your detailed explanation. I see I was able to remove the 2nd blank box by changing the code per your version. Big "but", though:

You said "2 paragraphs styles: 1 for the title and 1 for the caption. Your code effects ANY p that it sees so it's adding 1 box for title and 1 box for the caption".

How is it that a caption option is possible/visible for gallery thumbnails in a folder? There is no field for a caption of a gallery thumbnail, I think. Nothing in the gallery settings, and since javascript is banned, not even using that method.

I would LOVE to take advantage of the blank field that ostensibly is for a caption of a gallery thumbnail, but how?

Then, to keep following your logic, where captions ARE, under photos, I tried a test. There are two videos in this gallery and I added p tags to both of the captions. We only have to add the p tags, correct? Not <html> or other tags? So that's what I did. The captions did not format with a box, borders, and background. Are you saying they should have? The gallery: http://www.joinrats.com/RatHealth/Ratexams/Vetratexams/i-dXqvvFs

Maybe I wasn't clear in describing the problem. This is a folder with gallery thumbnails where a 2nd empty box is appearing under the gallery titles when the setting is set to "under". The second empty box does not appear if the folder is set to titles as "bottom". Here's the example folder with current image with two boxes, one empty: http://www.joinrats.com/ModifyBehavior.

thanks.

leftquark wrote: »
So the code above effects anything with a paragraph style (the "p" after ".sm-tile-info") and you'll see the HTML for that as a "<p>" ... for example "<p title="Positive Reinforcement">

In the HTML we have 2 paragraphs styles: 1 for the title and 1 for the caption. Your code effects ANY p that it see's so it's adding 1 box for title and 1 box for the caption. If you had captions you would see the caption inside that second box.

To get rid of the box around those captions you could change your code to only touch the first "<p>" (aka the titles):
/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p[COLOR="Red"]:nth-of-type(1)[/COLOR] {
  box-shadow: 1px 1px 1px 0px #4A4B4C;
  text-align: center;
  padding-left: 12px !important;
  font-size: 20px !important;
  padding-right: 12px !important;
  overflow: visible !important;
  white-space:normal !important;
  height: 75px !important;
 background-color: rgba(255, 255, 175, 1) !important;
}

ChancyRat · October 9, 2015

leftquark wrote: »
So the code above effects anything with a paragraph style (the "p" after ".sm-tile-info") and you'll see the HTML for that as a "<p>" ... for example "<p title="Positive Reinforcement">

In the HTML we have 2 paragraphs styles: 1 for the title and 1 for the caption. Your code effects ANY p that it see's so it's adding 1 box for title and 1 box for the caption. If you had captions you would see the caption inside that second box.

To get rid of the box around those captions you could change your code to only touch the first "<p>" (aka the titles):
/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p[COLOR=Red]:nth-of-type(1)[/COLOR] {
  box-shadow: 1px 1px 1px 0px #4A4B4C;
  text-align: center;
  padding-left: 12px !important;
  font-size: 20px !important;
  padding-right: 12px !important;
  overflow: visible !important;
  white-space:normal !important;
  height: 75px !important;
 background-color: rgba(255, 255, 175, 1) !important;
}

Aaron, hello again on this topic from Jan. 2015 where you so kindly got my gallery titles in grid mode to wrap and go on more than one line.

Now that the SM code has been tweaked to allow 2 lines, the code is broken.
I tried removing it but it doesn't adjust for 3-4 lines (which I have, because, to copycat another DGrinner, I can be verbose)

Would you be able to help me tweak to allow 3-4 lines to wrap?
Examples of broken can be seen here, for example the 3rd gallery on the top row:
http://www.joinrats.com/EarnTrust

THANK YOUUUUU.

leftquark · October 9, 2015

I think all you need are these 2 additional lines:

/* For webkit browsers (like Chrome/Safari), turn off the fix to clamp things to 2 lines */
.sm-tiles-info-over .sm-tile-info-text, .sm-tiles-grid.sm-tiles-info-after .sm-tile-info-text, .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info-text {
	-webkit-line-clamp: initial !important;
}

/* Remove the clamp to 2 lines */
.sm-tiles-grid.sm-tiles-info-after .sm-tile-info p, .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p {
    max-height: none !important;
}

Allen · October 9, 2015

I have example of 1, 2 & 3 lines here. Looks like the auto height to fit stopped working for more then 2 lines.
http://www.photosbyat.com/Birds/2006-Birding/Birding-2006-July-August

Your code addition didn't work.

leftquark · October 9, 2015

Allen wrote: »

Looks like the auto height to fit stopped working for more then 2 lines.

Yea ... it's actually quite annoying how browsers handle overflow. Built in with super easy code, they'll truncate one line of text and automatically add "..." but if you want to add more lines, they won't do that. There are some workarounds for webkit browsers (like Safari and Chrome) which support a "-webkit-line-clamp" command, but other browsers like Firefox and IE don't support it. In order to make the truncation work on all browsers we have to force the line height to a specific maximum: in this case we're having to clamp them to the height of 2 lines. The code above removes that clamp.

Allen · October 9, 2015

Changed my rule to add red and seems to work. FireFox & IE now ok "all folders"
Chrome no

.sm-tiles-grid ul li a p {
font-size:95%!important;
padding-left:0!important;
padding-right:0!important;
color:gold!important;
text-align:center;
overflow:visible!important;
white-space:normal!important;
height:auto!important;
max-height: none !important;
}

Allen · October 9, 2015

Added
/* For webkit browsers (like Chrome/Safari), turn off the fix to clamp things to 2 lines */
.sm-tiles-info-over .sm-tile-info-text,
.sm-tiles-grid.sm-tiles-info-after .sm-tile-info-text,
.sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info-text {
-webkit-line-clamp: initial !important;
}
along with my last post change and Chrome also now works.

ChancyRat · October 9, 2015

Wow, great answers back so fast. THANK YOU BOTH.
Now - All I did was add Aaron's code, without changing any of my existing code, and now I've even got 5 wrapping lines of title. Woo hoo!!! :ivar :ivar :ivar

One small problem: The titles are no longer centered. How do I return them to being centered? Image shows what I mean.

This is the code I added:

/* For webkit browsers (like Chrome/Safari), turn off the fix to clamp things to 2 lines */ .sm-tiles-info-over .sm-tile-info-text, .sm-tiles-grid.sm-tiles-info-after .sm-tile-info-text, .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info-text {     -webkit-line-clamp: initial !important; }  /* Remove the clamp to 2 lines */ .sm-tiles-grid.sm-tiles-info-after .sm-tile-info p, .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p {     max-height: none !important; }

Allen - were your posts just about your personal code for your site? My material looks ok on Chrome and IE (can't tell about Safari). Should I add this code anyway?:

/* For webkit browsers (like Chrome/Safari), turn off the fix to clamp things to 2 lines */
.sm-tiles-info-over .sm-tile-info-text,
 .sm-tiles-grid.sm-tiles-info-after .sm-tile-info-text,
 .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info-text {
    -webkit-line-clamp: initial !important;
}

Allen · October 9, 2015

I added red to my existing rule in post 28 and new rule in post 29.

I noticed that some of the single lines did not center.

I only have Safari on Win7 and it doesn't work. They stopped updating Safari at that time for PC.
I looked at Screenfly for the Apple Ipad (all) and it works there so assume that's Safari?

Struggling over bad loose ends - Aaron?

Comments