How to customise Gallery Titles on homepage with CSS

scotthunterscotthunter Registered Users Posts: 45 Big grins

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;
}

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

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

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited 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 );
    }

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;
        }
    
  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    Perfect, thanks :)

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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 :)

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;
            }
    
  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    Thank you Mike

  • beardedlogicbeardedlogic Registered Users Posts: 23 Big grins
    edited 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.

    Kase
    Won't know where I'm going 'til I get there.
    http://kasejameson.smugmug.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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).

  • beardedlogicbeardedlogic Registered Users Posts: 23 Big grins

    @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.

    Kase
    Won't know where I'm going 'til I get there.
    http://kasejameson.smugmug.com
Sign In or Register to comment.