How to customise Gallery Titles on homepage with CSS

scotthunter · March 2, 2018

Hi,

I have some CSS in the homepage theme for my gallery titles. I am trying to figure out a way to have the text capitalised on top of the gallery thumbnails without having to type in full caps in the title text as this makes the page title on the browser tab appear in full caps also.

I also want to reduce the size of the info covering inner box within the gallery thumbnails on the home page to about half the height it currently is, but can't figure out a way to do it.

Site address is:

http://www.scotthunterphotography.com

Current CSS is here:

.sm-user-ui .sm-tile-info .sm-tile-title {
font-size: 130%;
font-weight: bold;
min-height: 50px;
padding: 50px 0;
color: rgba( 255, 255, 255, 1.0 );
background: rgba( 40, 45, 57, 0.5 );
}
.sm-user-ui .sm-tile-info .sm-tile-title:hover {
font-size: 130%;
font-weight: bold;
color: rgba( 25, 27, 35, 1.0 );
background: rgba( 220, 245, 255, 0.4 );
}
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
opacity: 0.8;
}

Hikin' Mike · March 2, 2018

Remove that and use this:

.sm-user-ui .sm-tile-info .sm-tile-title {
    font-size: 130%;
    font-weight: bold;
    min-height: 25px;
    padding: 25px 0;
    color: rgba( 255, 255, 255, 1.0 );
    background: rgba( 40, 45, 57, 0.5 );
    }


.sm-user-ui .sm-tile-info .sm-tile-title:hover {
    font-size: 130%;
    font-weight: bold;
    color: rgba( 25, 27, 35, 1.0 );
    background: rgba( 220, 245, 255, 0.4 );
    }

.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
    opacity: 0.8;
    }

.sm-user-ui .sm-tiles-info-cover .sm-tile-title {
    text-transform: uppercase;
    bottom: 55%;
    }

It's pretty much the same thing, but I edited a few things: min-height: 25px;, padding: 25px 0; to reduce the height of your "title box" and added the uppercase code. Because of the smaller title box I added bottom:55% so it was centered again.

scotthunter · March 3, 2018

Thank you so much, that's just what I'm looking for

scotthunter · March 6, 2018

Almost there...

How do I make the background gallery images change to 100% opacity on rollover from their semi-transparent state or vice versa?

http://www.scotthunterphotography.com

.sm-user-ui .sm-tile-info .sm-tile-title {
font-size: 140%;
font-weight: bold;
min-height: 25px;
padding: 15px 0;
color: rgba( 255, 255, 255, 1.0 );
background: rgba( 40, 45, 57, 0.7 );
}

.sm-user-ui .sm-tile-info .sm-tile-title:hover {
font-size: 140%;
font-weight: bold;
color: rgba( 25, 27, 35, 1.0 );
background: rgba( 220, 245, 255, 0.6 );
}

.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
opacity: 0.8;
}

.sm-user-ui .sm-tiles-info-cover .sm-tile-title {
text-transform: uppercase;
bottom: 60%;
}

Hikin' Mike · March 6, 2018

@scotthunter said:
Almost there...

How do I make the background gallery images change to 100% opacity on rollover from their semi-transparent state or vice versa?

The first one controls the titles as viewed. Just edit the background 0.7 from 0 (transparent) to 1 (solid). If you want to change the color of the background the first three numbers are the color in RGB (40, 45, 57).

.sm-user-ui .sm-tile-info .sm-tile-title {
font-size: 140%;
font-weight: bold;
min-height: 25px;
padding: 15px 0;
color: rgba( 255, 255, 255, 1.0 );
background: rgba( 40, 45, 57, 0.7 );
}

This one controls the rollover.

.sm-user-ui .sm-tile-info .sm-tile-title:hover {
font-size: 140%;
font-weight: bold;
color: rgba( 25, 27, 35, 1.0 );
background: rgba( 220, 245, 255, 0.6 );
}

scotthunter · March 7, 2018

Hi Mike

Thanks, however I am trying to change the opacity of the background image using this bit of code:

.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info, .sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info { opacity: 0.7; }

However this seems to affect the text transparency as well. Can this be independent from the text?

Also, can you add a fade affect of 1 sec on rollover which is activated when the cursor is over the image, not just the box?

Full CSS block is here:

.sm-user-ui .sm-tile-info .sm-tile-title {
    font-size: 140%;
    font-weight: bold;
    min-height: 25px;
    padding: 15px 0;
    color: rgba( 255, 255, 255, 1.0 );
    background: rgba( 40, 45, 57, 1.0 );
    }


.sm-user-ui .sm-tile-info .sm-tile-title:hover {
    font-size: 140%;
    font-weight: bold;
    color: rgba( 25, 27, 35, 1.0 );
    background: rgba( 220, 245, 255, 1.0 );
    }

.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
    opacity: 0.7;
    }

.sm-user-ui .sm-tiles-info-cover .sm-tile-title {
    text-transform: uppercase;
    bottom: 60%;
    }

Hikin' Mike · March 8, 2018

If you want the image do be at 100% opacity when hovered, add this:

.sm-user-ui .sm-tile-content > .sm-tile-info:hover {
    background-color: transparent;
     -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
         -ms-transition: all 1s ease-in-out;
          -o-transition: all 1s ease-in-out;
             transition: all 1s ease-in-out;
    }

scotthunter · March 8, 2018

Perfect, thanks

scotthunter · March 9, 2018

Hi Mike,

Is there a way to make gallery titles adopt the heading font instead of the body font? I want font "Raleway" for the headers and gallery titles and a "Lora" for body text.

Thanks

Hikin' Mike · March 9, 2018

Looks like you're using Raleway for both the Headers and Body text. You need to change it in your Theme: Customize > Entire Site > Theme > Active Theme > Basic.

scotthunter · March 10, 2018

I changed the body text font for a standard text block, however it also changes the top menu font. Is there a way of having a different font / colour for body text and menu bar text? I want body text to be white and "Lora", and the menu text to be "Raleway" and light blue, changing to a darker blue on hover.

Thanks

scotthunter · March 10, 2018

I think it would be easier to independently change font of a standard text content block if this is possible as title blocks and gallery titles seem to adopt the body text font for some reason.

Hikin' Mike · March 10, 2018

Yes. Change the Body Text font to 'Lora'. The to change the menu font/color, add this to your theme's custom CSS:

.sm-user-ui .sm-page-widget-nav-popover {
    font-family: Raleway;
    }

.sm-user-ui .sm-page-widget-nav-color-default a:active, 
.sm-user-ui .sm-page-widget-nav-color-emphasized a, 
.sm-user-ui .sm-page-widget-nav-color-emphasized a:visited, 
.sm-user-ui .sm-page-widget-nav-color-emphasized a:active, 
.sm-user-ui .sm-page-widget-nav-color-muted a:active {
    color: #B5E8FF;
    }   

    .sm-user-ui .sm-page-widget-nav-color-default a:hover,
    .sm-user-ui .sm-page-widget-nav-color-emphasized a:hover,
    .sm-user-ui .sm-page-widget-nav-color-muted a:hover {
        color: blue;
        }

scotthunter · March 31, 2018

Thank you Mike

beardedlogic · April 15, 2018

Hello! Fancy meeting you here. I've used a snippet of the code above to differentiate the Body text and the Menu text. I would, however, like to enlarge the font size of my menu text. I've tried changing the percentage in the "font-size" property (or attribute... I don't know codespeak yet). That does nothing, though.

Oh, and @Hikin' Mike , I bought one of your prints today! I'm super excited to get it!

UPDATE: I did not successfully nab a snippet of code and make them different fonts. I refreshed and dumped my cache and it went to the same font the Body is now. I want my Menu font to be Dr Sugiyama. I don't care about the Header and Body fonts yet.

Hikin' Mike · April 15, 2018

@beardedlogic said:
Oh, and @Hikin' Mike , I bought one of your prints today! I'm super excited to get it!

Saw that, Thanks!

@beardedlogic said:
UPDATE: I did not successfully nab a snippet of code and make them different fonts. I refreshed and dumped my cache and it went to the same font the Body is now. I want my Menu font to be Dr Sugiyama. I don't care about the Header and Body fonts yet.

Remove ALL of the code your using and put this in you THEME'S Custom CSS, not a CSS block:

/**
* Fonts
***************************************************/
@font-face {
    font-family: 'Dr Sugiyama';
    font-style: normal;
    font-weight: 400;
    src: local('Dr Sugiyama Regular'), 
         local('DrSugiyama-Regular'),
         url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOYo.eot'),  
         url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOYo.eot?#iefix') format('embedded-opentype'),
         url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOYg.woff') format('woff'),
         url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOY4.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sm-user-ui .sm-page-widget-nav-popover {
    font-family: 'Dr Sugiyama';
    min-height: 25px;
    padding: 15px 0;
    }

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-xl {
    font-size: 150%;
    }

You called out a font-weight: 700, but that font only display 400 (regular).

beardedlogic · April 15, 2018

@Hikin' Mike said:
Remove ALL of the code your using and put this in you THEME'S Custom CSS, not a CSS block:

/**
* Fonts
***************************************************/
@font-face {
  font-family: 'Dr Sugiyama';
  font-style: normal;
  font-weight: 400;
  src: local('Dr Sugiyama Regular'), 
       local('DrSugiyama-Regular'),
       url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOYo.eot'),  
       url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOYo.eot?#iefix') format('embedded-opentype'),
       url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOYg.woff') format('woff'),
       url('https://fonts.gstatic.com/s/drsugiyama/v6/HTxoL2k4N3O9n5I1boGI7ZbWOY4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sm-user-ui .sm-page-widget-nav-popover {
    font-family: 'Dr Sugiyama';
    min-height: 25px;
    padding: 15px 0;
  }
  
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-xl {
  font-size: 150%;
  }

You called out a font-weight: 700, but that font only display 400 (regular).

Thank you, sir. I can tinker with that to get the size and spacing I want. I'll be honest, I didn't even know there was a THEME CSS. You're an excellent teacher! They should make you the Great Potentate of all the DGrinners. Hope you've had a great Sunday.

How to customise Gallery Titles on homepage with CSS

Comments