Struggling over bad loose ends - Aaron?

ChancyRat · October 9, 2015

Well everything is broken now. I tried to apply what you instructed Allen, which didn't work. Then I tried to revert back, plus something else - and you know how that goes, all downhill. I'll have to wait until I'm home to retrieve my original CSS. As it is now, for the most part I've lost the borders and background (on some not all gallery thumbnails). And the centering isn't right.

Allen · October 9, 2015

ChancyRat wrote: »

Well everything is broken now. I tried to apply what you instructed Allen, which didn't work. Then I tried to revert back, plus something else - and you know how that goes, all downhill. I'll have to wait until I'm home to retrieve my original CSS. As it is now, for the most part I've lost the borders and background (on some not all gallery thumbnails). And the centering isn't right.

You probably left off a }. Common problem when somethings go bork.

ChancyRat · October 9, 2015

I did not see any missing anything, but, I had some code commented out... I removed it. Now I'm back to the state I was in in post #30, great seeing 5 lines of titles and wrapping. But the titles are not centered in the tiles. Here's all the code (I believe) that applies: what should I change?

.sm-tiles-info-after .sm-tile-info {
    padding: 0.5em 0.5em 0 0;
    }

.sm-tiles-grid.sm-tiles-info-after .sm-tile-info p, .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p {
    height: 0 !important;
    }

/* Borders for thumbnails in folders, and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile{
    box-shadow: 0px 0px 1px 0px #6B6B6B;
    border-radius: 1px;
  padding: 10px 10px 0px 10px !important;
  background-color: rgba(255, 255, 211, 1) !important;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

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


/* 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;
}

.sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info {
    padding-bottom: 20px;
}

ChancyRat · October 9, 2015

ARGHH. Titles not showing in full... no idea...

Allen · October 9, 2015

ChancyRat wrote: »

ARGHH. Titles not showing in full... no idea...

Add red

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

ChancyRat · October 9, 2015

Fabulous, Allen! Your last post gave me back the multi-lines. Now I'm back to "how do I center the titles". Oddly there seem to be two conflicting rules about alignment: The top image shows a "push to the left", and the bottom one shows a "push to the right". The latter becomes visible when a title is long enough. Otherwise a short title reverts to the former.

Allen · October 9, 2015

I mentioned in post #31 that my single lines would not center. I worked on that some time ago
and have not solved it yet.

My one lines are to the left. You can see it better with short titles. My multi-lines shifted to the right.

ChancyRat · October 9, 2015

Allen wrote: »

I mentioned in post #31 that my single lines would not center. I worked on that some time ago
and have not solved it yet.

My one lines are to the left. You can see it better with short titles. My multi-lines shifted to the right.

lust
Clarity - love it.

Okay - so how about tweaking margins or padding ... would that force a fix...

Allen · October 9, 2015

ChancyRat wrote: »

lust
Clarity - love it.

Okay - so how about tweaking margins or padding ... would that force a fix...

Change these and see how it works.

.sm-tiles-info-after .sm-tile-info {
    padding: [COLOR=Red]0.5em 1em[/COLOR];
}

.sm-tile-info {
    text-align: left;
    [COLOR=red][strike][COLOR=#bbbbbb][b]display: flex;[/b][/COLOR][/strike][/COLOR]
    flex-direction: row;
    align-items: center;
}

Allen · October 9, 2015

I added this to my "all folders" CSS and it seems to center all the titles. Changed flex to block. Will now have
to look around site for anything gone wacko.

.sm-tiles-grid .sm-tile-info {
    display: block;
}

ChancyRat · October 10, 2015

Allen wrote: »
I added this to my "all folders" CSS and it seems to center all the titles. Changed flex to block. Will now have
to look around site for anything gone wacko.
.sm-tiles-grid .sm-tile-info {
    display: block;
}

LOVELY. I just added this code and not your additional tweak from the previous post... lookin' good....

ChancyRat · October 10, 2015

Aaron - about that space for captions for gallery thumbs
Following up on a bit of this thread from January, regarding CAPTIONS FOR GALLERY THUMBS IN FOLDERS, we had this dialogue:

ChancyRat wrote: »

[...] now I have two complete rectangles for each title, one with the nice title and one blank one [...]

/* 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;
}

Aaron, you replied:

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):
Code:
/* 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;
}

Can we exploit, and use to generate captions for gallery thumbnails, this bit: "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."

Allen · October 10, 2015

The image you show is a folder or gallery name, there is no applicable caption.

ChancyRat · October 10, 2015

Allen wrote: »

The image you show is a folder or gallery name, there is no applicable caption.

If I understand you, Allen, there's a placeholder for a caption for a gallery thumbnail - it's the 2nd box below the title in my image, a box with a border - but we can't put text into it. I had to ask - it's just so close - I mean, there's the box! Craving text!

Allen · October 10, 2015

ChancyRat wrote: »

If I understand you, Allen, there's a placeholder for a caption for a gallery thumbnail - it's the 2nd box below the title in my image, a box with a border - but we can't put text into it. I had to ask - it's just so close - I mean, there's the box! Craving text!

Are you referring to the thumbnails in a thumbnail style gallery? I see both the title and caption there.
At least part of the caption because the download button with text takes up 60% and the caption is
hugely truncated.

ChancyRat · October 10, 2015

The image is from a folder. It's the thumbnail image assigned to the gallery.
The title of the gallery is in the first block.
Aaron said the 2nd empty box was for a caption.
Sorry for not being clear - hope I am now.

Allen · October 10, 2015

Featured images in folders only carry the gallery title not any photo title and caption.

ChancyRat · October 10, 2015

Allen wrote: »

Featured images in folders only carry the gallery title not any photo title and caption.

If I'm beating a dead horse, just shoot me.

I hear you. I hear you - I just - it's just that in my image there's a 2nd box, below the gallery title, for a caption. If there is a box for a caption --- see where this leads one? --- can't a caption go into it?

Have box, have caption?

Allen · October 10, 2015

ChancyRat wrote: »

If I'm beating a dead horse, just shoot me.
I hear you. I hear you - I just - it's just that in my image there's a 2nd box, below the gallery title, for a caption. If there is a box for a caption --- see where this leads one? --- can't a caption go into it?

Have box, have caption?

I did not see that on your site, got a direct link to this?

ChancyRat · October 10, 2015

Ouch, I can't reproduce it. In my code, I removed the RED, which Aaron had given me to HIDE the 2nd caption box. But now removing it does not bring back the 2nd box.

/* 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;
}

This image is what happens when I now remove the red text Aaron provided.

Allen · October 10, 2015

Notice he talks about gallery titles and not captions.

/* Place Titles on Thumbnails in Folders. Will wrap the long gallery titles in the grid format. */

ChancyRat · October 10, 2015

Yes, that's what I have in my css comments. Aaron in the thread on DG, though, said:

"In the HTML we have 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. If you had captions you would see the caption inside that second box."

That's an enticing tidbit!!! "If I had captions"??? Okay there's a box, let me at it. lol.

Struggling over bad loose ends - Aaron?

Comments