Thumbnail styling in Studio skin

This is all excellent advice and I can't wait to try it. Thank you both so much! I was on the right track, thinking I needed a user asset .css, and I played around with using one to modify some of the thumbnail styles I found in userstyles.css, but I guess I just hadn't found the right styles yet (or I didn't do it right 🙂 ).

One question---I already have a user asset .css for a couple of other purposes, per Peter's suggestions in another post. Surely I can put all my overrides in one .css for simplicity's sake? I don't need a separate .css just for these thumbnail settings? 

I had a poke around the output using the browser developer tools and there are two possible places to change depending on what you want to do.

If you want a border around the thumbnail (small image) then the style you need to modify is .popup-image-thumbnail.

If you want a border around the full size image then the style you want is .RH-LAYOUT-thumbnail-image.

If you have made any changes to a skin, you will find a file called layoutDiff.css in your skin folder. The skin editor help states for this file "You can make edits directly in this file but do not change the structure of the file. " I'm not entirely certain what they are warning about, but the most strict interpretation is do not add any styles to this file. That is, you can only add properties between the curly brackets for each listed style, but don't add anything outside those brackets. 

The tricky bit is that only one of the styles you need to edit appears in this file. So I think I will recommend creating your own custom css file as suggested by Peter earlier. I think this will be safer rather than having some manual code changes in layoutDiff and some in your own custom stylesheet.

So.

1. Create you css file and add one or both of the following styles, depending on where you want the border:

(popup is the small image, rh-layout is the large image)

.popup-image-thumbnail {

}

.RH-LAYOUT-thumbnail-image {

}

2. Define your border as required.

3. Add the stylesheet in the User Assets section of the skin.

A note about the .RH-LAYOUT-thumbnail-image style. In the default styling, the white frame around the image is actually a large white border defined for the img tag. The close button is positioned based on the sizing of this white border. You may or may not be happy with the positioning of this button after you change the border. You can adjust the positioning in a similar way to what we've suggested for the border by inspecting the output to figure out what you need to change.

The bit in border.css is so that you get the border in the image popup in the output.

________________________________________________________

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

This seems to work. I have used extreme border widths to make it obvious. Try it in a test project.

This is the image style that goes in normal CSS.

img.greenborder {

  border-width: 25px;

  border-color: #008000;

  border-left-width: 25px;

  border-left-color: #008000;

  border-top-width: 25px;

  border-top-color: #008000;

  border-right-width: 25px;

  border-right-color: #008000;

  border-bottom-width: 25px;

  border-bottom-color: #008000;

  border-style: solid;

  border-left-style: solid;

  border-top-style: solid;

  border-right-style: solid;

  border-bottom-style: solid;

}

Add this to the same CSS for your thumbnails.

img.popup-image-thumbnail {

  border-width: 25px;

  border-color: #008000;

  border-left-width: 25px;

  border-left-color: #008000;

  border-top-width: 25px;

  border-top-color: #008000;

  border-right-width: 25px;

  border-right-color: #008000;

  border-bottom-width: 25px;

  border-bottom-color: #008000;

  border-style: solid;

  border-left-style: solid;

  border-top-style: solid;

  border-right-style: solid;

  border-bottom-style: solid;

}

Add this to border.css and put that is user assets.

.RH-LAYOUT-thumbnail-img-container  {

  border-width: 25px;

  border-color: #008000;

  border-left-width: 25px;

  border-left-color: #008000;

  border-top-width: 25px;

  border-top-color: #008000;

  border-right-width: 25px;

  border-right-color: #008000;

  border-bottom-width: 25px;

  border-bottom-color: #008000;

  border-style: solid;

  border-left-style: solid;

  border-top-style: solid;

  border-right-style: solid;

  border-bottom-style: solid;

}

See if that fixes it for you.

________________________________________________________

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

That didn't work and I thought maybe the style should be img.popup-image-thumbnail but that's not working either.

I will look again later.

________________________________________________________

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

The border is definitely lost. Try this.

1. Create a new empty CSS file in a text editor. Call it whatever you like. I'll call it border.css.
2. Create a style .RH-LAYOUT-thumbnail 
3. Add your border definition
4. Go to the skin editor layout tab.
5. Go to User Assets and add border.css there.
6. Generate your output.

I think that should work. Let us know.

________________________________________________________

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

As the border on the main image is thin is it possible that after shrinking it is simply not visible? Have you tried copy the thumbnail into an image editor and magnifying it to check? Just a thought.

It is possible that RoboHelp is only creating a thumbnail of the image itself but I can't check that out right now.

________________________________________________________

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