CSS Selector for headlines and images

fulo · December 13, 2016

Since two days I'm setting up my (private) gallery. There are 3 CSS-issues, I don't get to work. In every case, I can't find the correct selector:

1 | I’d like to add a white border around all my images, as well in the thumbnail-views of the galleries/recent photos as in the lightbox, too.
2 | I’d like to change the font-size of the logo h1.
3 | I’d like to change the font-family and weight for the headline in the meta description under the thumbnail-images in the galleries and the recent photos view (homepage).

You can find the gallery here: fuchslocher.smugmug.com
Thanks a lot for your help!

fulo · December 13, 2016

Ignore #1. I should have taken a look to the FAQ first. I'm sorry. Shame … :)

fulo · December 13, 2016

Well, don't ignore it. I used the code from the FAQ, but it doesn't work for any tweak…

Hikin' Mike · December 13, 2016

This should take care of most of your requests. Add these to your theme's CSS:

/**
* Border Around Images
**************************************************/
.sm-user-ui .sm-tile-page .sm-tile-content, 
.sm-user-ui .sm-tile-album .sm-tile-content, 
.sm-user-ui .sm-tile-folder .sm-tile-content, 
.sm-user-ui .sm-lightbox .sm-lightbox-image, 
.sm-user-ui .sm-gallery-roworganic .sm-tile-content,
.sm-user-ui .sm-tiles-fit.sm-tiles-uncropped .sm-image {
    border: 1px solid #fff;
    }

    /* Decrease Width to Show Border on Homepage */
    .sm-user-ui .sm-tiles-fit.sm-tiles-uncropped .sm-image {
        width: 99%;
        }

/**
* Logo Font
**************************************************/
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-text.sm-page-widget-logo-xs {
    font-size: 30px;
    }

/**
* Captions (Descriptions)
**************************************************/
.sm-user-ui .sm-tile-caption {
    font-weight: 900;
    }

To add fonts, take a look at this: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

fulo · December 14, 2016

Hi Mike,

thanks a lot for your help!

#1 Works generally fine. Only on the homepage, where I have a vertical alignment of the pictures with size set to "auto", the border on the right side gets cropped.
#2 worked fine.
#3 changes the description, but not the headline, wich I was looking for (maybe I wasn't precise enough, sorry for that). I tried to change the .sm-tile-caption to .sm-tile-title, but this has no effect.

fulo · December 14, 2016

Addition:

#3 works with the .sm-tile-title as long as I use "!'important". At least for the homepage where I list the recent photos. Within the galleries I as able to change the font-family and weight, but the color doesn't change - although firebug shows, that it gets inherited…

Maybe anyone has an idea on this?

Thanks a lot

Hikin' Mike · December 14, 2016

The border works for a 1px border. If you increase that, you need to decrease the width here:

 /* Decrease Width to Show Border on Homepage */
    .sm-user-ui .sm-tiles-fit.sm-tiles-uncropped .sm-image {
        width: 99%;
        }

Unrelated, my youngest daughter (15) has been trying to learn German on her own. She looked at your site briefly and was able to understand some words. She was happy!

Hikin' Mike · December 14, 2016

Sorry about the confusion. I would say most of the time you don't need !important. The Title is here, .sm-user-ui .sm-tile-info .sm-tile-title.

fulo · December 14, 2016

Hi Mike,

thanks again. The border on the homepage looks great, now.
The headline selector works, too. (Strange, I tried exactly the same before, too, without success. Maybe I just forgot a ; or anything like that.)
But: Still the same with the headline in the gallery. The color doesn't change here.

Unrelated: So your daughter chose a really simple language to learn on her own. ;) Nice to hear, that she was able to understand some parts. It's probably helpful that the sentences are very short.

Hikin' Mike · December 14, 2016

The gallery titles are links, so you'll need to add this .sm-user-ui .sm-tile-info .sm-tile-title a:

.sm-user-ui .sm-tile-info .sm-tile-title,
.sm-user-ui .sm-tile-info .sm-tile-title a { 
    color: #5e4828;
    }

Not sure why she picked German. I think she's doing pretty good with no teacher. In high school I took a year of German and I didn't do too well. I really didn't do well in all subjects though...lol!

fulo · December 14, 2016

Thanks a lot. I tried it with .sm-tile-title:a instead of .sm-tile-title a. I mixed it up with pseudo-class like a:hover. I'm really out of this for too long…
Thanks to you I've nearly finished. I just have to figure out how to show the date/time, the photo was captured next to the title/description. But therefore I have opened a separate topic.

/edit: There is one more thing: The text-indent on the homepage doesn't fit anymore for the images in portrait mode. They moved a bit to the left. I think this is because of the border and the decreased width…

/edit: The 2nd one more thing: How can I change the thumbnails that get automatically set for the folders? (I can't post links, but I mean the two thumbs after clicking "Fotos" in the left navigation bar.

OT: At least, you did well in photography. It seems, you get along quite well with it. :)

Hikin' Mike · December 14, 2016

Thanks! I get lucky occasionally with my photography...lol!

Try this for the border:

/* Decrease Width to Show Border on Homepage */
.sm-user-ui .sm-tiles-fit.sm-tiles-uncropped .sm-image {
    margin: 0;
    width: 94%;
    }

Hikin' Mike · December 14, 2016

The 2nd one more thing: How can I change the thumbnails that get automatically set for the folders? (I can't post links, but I mean the two thumbs after clicking "Fotos" in the left navigation bar.

In the Organizer, there are settings for the Folders/Pages/Galleries. It's the "Feature Image".

fulo · December 14, 2016

Thanks Mike, you are awesome. :) The indent suits well, now.

The setting for the "Feature Image" is not what I'm looking for. Or at least, it doesn't work. I tried this already a lot of times before, but any change here has no effect.
(In the Organizer I choose the folder in the left menu bar. Then: Settings > Folder > Basics > Feature Image)

Hikin' Mike · December 14, 2016

Are you trying to change the two thumbnails here: http://www.almaaction.de/Alma/Fotos/ or the large top picture here: http://www.almaaction.de/Alma/Fotos/2015/

The first is the Feature Image and the other one is for the galleries. Those are "Cover Image". If you're still having problems, you might want to contact the Smugmug Heros.

fulo · December 15, 2016

Hi Mike,

I try to change the first one.
I made you a screenshot,showing the settings I made. Could you verify this?
If it should work like this, I will contact the heroes afterwards.

Thanks a lot!

http://xchange.fuchsbox.de/feature.jpg

Hikin' Mike · December 15, 2016

Looking at your screenshot, this is what you've changed: http://www.almaaction.de/Alma/

fulo · December 15, 2016

Now I got it. I had to choose the gallery inside the folder to set the image for the folder. Not what I expected, but not unreasonable. Depends on the point of view.

Finally, all my problems got solved. Thanks a lot for your help!

Hikin' Mike · December 15, 2016

Good to hear!

CSS Selector for headlines and images

Comments