Thumbnail borders and frames

paulpegg · 2015-03-27 03:37:13

I am finally getting around to exploring CE4 for my sites. I am trying to replicate the gallery styling as shown here http://photoimpressions.org/galleries/france/ . You will notice that there is a gradient on the frame and the border is one color. I cannot find any place in CE4 Gallery that provides a border and frame for the thumbnail image. Am i missing something, or has this feature been dropped?

rod barbee · 2015-03-27 04:59:52

dropped
you can only place a single border around the thumbnails, it's fixed at 1 px. That check box is near the top of the CE4 Standard settings

Otherwise, you're looking at custom css

paulpegg · 2015-03-27 05:17:15

OK, can I cut and paste from the CE3 css? What are the pieces I will need?

Thanks,
Paul

rod barbee · 2015-03-27 05:27:54

I don't know off the top of my head. You'd have to compare the html structure and css classes from CE3 to CE4 and see what selectors are needed, then you could probably use the same css on those selectors.
You can use Firebug or the Inspector tool in just about any browser to figure out the selectors.

this is the selector and styling that's currently applied

.ce3standard .gallery-icon {
    background-color: #FFF;
    border: 4px solid #CCC;
    margin: 0px auto;
    padding: 4px;
    position: absolute;
    text-align: center;

this looks like the analogous selector but I've not tested it.

.ce4-standard .griditem

paulpegg · 2015-03-27 06:55:49

Thanks, I'll dig in to it a bit. I'll let you know if I work it out.
Paul

paulpegg · 2015-04-08 23:46:31

I completed the transfer of the CE3 site to CE4. I decided to use the 1px frame as is. www.photoimpressions.org

I have one more item that I would like to change and that is the placement of the title and caption in the galleria. The default is on the bottom left and i would like to see them centered. i can't find the css item to control that. Where will I find it?

Thanks,

Paul

rod barbee · 2015-04-09 00:08:38

Do you mean the gallery large images or are you looking to control the text for a Galleria slide show? I ask because you don't have a Galleria slide show on your site and this is posted under CE4 Gallery.

if it's the title/caption for the large images, try this with custom css:

.mfp-title {
    text-align: center;
}

paulpegg · 2015-04-09 00:31:02

Yes, I meant the large images. Thank you.

rod barbee · 2015-04-09 00:43:16

And the Highslide presentation has a text alignment drop-down, if you'd rather not mess with custom css.

paulpegg · 2015-04-12 04:18:22

Okay, I got custom to work and am now trying to get the thumbnail shadow under control. I used
#.ce4-standard .griditem {
box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
}
to control the shadow on the box but that is not what I want to do. (it is turned off right now) http://photoimpressions.org/galleries/paris/

I have been scouring the css files and can't find any controls for the thumbnail.

rod barbee · 2015-04-12 04:33:52

the selector should be:

.ce4-standard .griditem

putting the hashtag (#) before messes it up.

Looking at your css file you have a lot of .# or #.
You can't mix them like this

a dot denotes a class
a hashtag denotes an ID

so instead of #.the-grid, you should have #the-grid

and it looks like what you've done with the custom css file has broken your page layout too

rod barbee · 2015-04-12 04:40:00

To control the thumbnail drop shadow, try this:

.ce4-standard .drop-shadow img {
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.25);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}

and change box-shadow properties as needed.

(and get rid of all the other box shadow stuff you have in your css file

paulpegg · 2015-04-12 04:53:32

I was changing those things as you wrote your last message. Take a look now.

Thanks a lot.

Paul

rod barbee · 2015-04-12 05:09:03

looks good to me. Assuming, of course, you're getting what you wanted.

paulpegg · 2015-04-12 05:18:04

YES! That is what I wanted.
Now on to HTML5! (Another day).

rod barbee · 2015-04-12 05:35:58

yay! I think it looks great. Nice and clean.

Community @ The Turning Gate

#1 2015-03-27 03:37:13

Thumbnail borders and frames

#2 2015-03-27 04:59:52

Re: Thumbnail borders and frames

#3 2015-03-27 05:17:15

Re: Thumbnail borders and frames

#4 2015-03-27 05:27:54

Re: Thumbnail borders and frames

#5 2015-03-27 06:55:49

Re: Thumbnail borders and frames

#6 2015-04-08 23:46:31

Re: Thumbnail borders and frames

#7 2015-04-09 00:08:38

Re: Thumbnail borders and frames

#8 2015-04-09 00:31:02

Re: Thumbnail borders and frames

#9 2015-04-09 00:43:16

Re: Thumbnail borders and frames

#10 2015-04-12 04:18:22

Re: Thumbnail borders and frames

#11 2015-04-12 04:33:52

Re: Thumbnail borders and frames

#12 2015-04-12 04:40:00

Re: Thumbnail borders and frames

#13 2015-04-12 04:53:32

Re: Thumbnail borders and frames

#14 2015-04-12 05:09:03

Re: Thumbnail borders and frames

#15 2015-04-12 05:18:04

Re: Thumbnail borders and frames

#16 2015-04-12 05:35:58

Re: Thumbnail borders and frames

Board footer