Thumbnail styling in Studio skin

I have posted this as a bug. See RH-10913 | Tracker (adobe.com)

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

@Amebr You are correct---I deleted two of the semicolons and it still worked just fine. Thanks for your help! 

As far as I'm aware, there is nothing that uses 3 semi-colons in CSS. It should be safe to delete 2.

@11491779 Yes, Inspect mode is what I used to figure this out. As for the three semicolons---I don't know what the significance is. After generating the output with the original Studio skin, I found the code below in userstyles.css, so I copied it into my user asset .css and made the changes I needed. I really know very little about CSS so I just left all three semicolons there.

.RH-LAYOUT-thumbnail-close {
  background-image: url('cross.svg');;;
}

@Peter Grainge Just in case you want to try this yourself, I think I have cracked the code 😉

Rather than position the "X" inside the popup as I originally had it, I decided to try to center it on the corner rather than leave it so far above the popup. Here's the result:

To my eye (and my co-worker's), this looks centered. Here are the settings I used:

.RH-LAYOUT-thumbnail-close {
background-image: url('../Studio-custom-tiles-85/cross_Blue.svg');;;
border-color: #00477b;
border-width: 2px;
position: absolute;
right:  -0.25rem;
top: 0.9rem;
}

If my boss is happy with it on Monday, this will be a major win! Thanks again for your help.

Yes, the output is showing our custom "X" button in blue with a blue border.

My boss doesn't like the placement of the X at the top right corner, outside the popup. (This doesn't bother me at all.) The screens I need to capture have a LOT of white background, so I can move the button a little and it doesn't obscure anything important. However, I am running out of time on this project, so if I can't get it right once the borders are added, I may have to persuade him to give it up. 😉

Yes using .RH-LAYOUT-thumbnail-image gives this. Is it not now a case of just changing the closing image? Wouldn't moving it partly obscure the image with a more realistic narrow border?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Brilliant! I totally missed the fact that you and Amber were talking about different styles.

I first applied the border to .RH-LAYOUT-thumbnail-container, but .RH-LAYOUT-thumbnail-image is the right one. So now the border surrounds only the popup and doesn't add any space at the top. (The button position may need to be adjusted, but I'll experiment with that after I decide on the correct border width.)

I can't tell you how much I appreciate your help on this!

What I posted looked fine this morning but now I come back to it, I am seeing this problem.

Have you tried using the styles that @Amebr posted?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

OK, I'm having great success with this! And I have answered my own question---you can put all this stuff in the same user asset .css. 

I was able to get the border around the thumbnail in the reading panel. Looks great, just need to decide what size and color it should be.

But now that I tried putting the border around the pop-up, I'm having a new issue. By default in the Studio skin, the thumbnail close button was a white "X" on a white background, so we created a new image in blue. I also moved the position of that button a little. So the "before" pop-up with no border looked like this (I'm using a screen shot from Adobe.com since I can't share my actual work):

But now that I've added the border per Peter's instructions, the "after" pop-up looks like this:

I'm not sure what I've done wrong, but it seems to have added a lot of space (not white border) to the top of the pop-up only. Below is the code I had added to my user asset .css to replace the button and change the position.  

.RH-LAYOUT-thumbnail-close {
background-image: url('../Studio-custom-tiles-75/cross_Blue.svg');;;
border-color: #00477b;
border-width: 2px;
position: absolute;
right:  0.25rem;
top: 2.25rem;
}

I tried commenting out the position-related code and the button reverted to its original position but I still got the extra space at the top. Any thoughts on what might be going on?