Removing description space above video and photo Galleries, Header and Navigation bar background ...

APROGERS

Hey I am struggling with a few final tweaks to my sm site riotmob.com. I found most of what I needed searching this site and thank you.

1 . Removing the description space on galleries so title rests closer to gallery image.
2. I want to invert the header / title and navigation bar colors while leaving the rest of the site as is.
3. Video galleries have a white small icon and the final play button are white and not matching my site colors. Also it seems to be an extra click for videos. Click thumbnail/click another bigger picture/ then click 1 more time to play. Its very clunky and last image has white play icon not yellow like the rest. Thanks in advance and sorry if I missed the fixes you already discussed. I searched alot

Hikin' Mike

@APROGERS said:
3. Video galleries have a white small icon and the final play button are white and not matching my site colors.

@media screen and (min-width: 961px) and (max-height: 750px) and (orientation: landscape) {

  .sm-user-ui .sm-lightbox-v2-nav-button.sm-button.sm-button-skin-default.sm-button-nochrome {
    color: #fcc511;
  }

}

.sm-user-ui .sm-lightbox-v2-video-play-icon,
.sm-user-ui .sm-tile-content > .sm-tile-info-icon {
  color: #fcc511;
}

You might want to re-read and edit your #3.

APROGERS

Oooops fat fingers. I would mention spell check did not catch that which is odd.

APROGERS

Ohhhh thanks for #3 worked perfectly

APROGERS

https://www.aaronpaulrogers.com/Projects-Work-Reels/Video-Editor-Producer/1883-TheRoadWest
is has been killing me. You see the title 1883 The road west , this and all titles are too high. I want those right above thumbnail. Is it possible?

Hikin' Mike

I figured it was a fat-finger thing.

This will center the Gallery Title and remove any margins. There is still some room on top of the video box, but I can't see any way to remove it. IMO, your gallery titles need room above the titles, but that's just me.

.sm-user-ui .sm-gallery-cover,
.sm-user-ui .sm-page-layout-row:first-child > .sm-page-layout-column>.sm-gallery .sm-gallery-header {
    min-height: auto;
}

.sm-user-ui .sm-gallery-cover-info .sm-gallery-cover-title,
.sm-user-ui .sm-gallery-cover-info .sm-gallery-cover-description {
    max-width: 100vw;
}

APROGERS

Thanks and yes I will add a space but they look good on mobile so that is the last bridge to jump off. Tell me I would like my header background to be yellow with black fonts but keep the rest of my site the way it is. I almost had it by using accent colors except it did not work on mobile any suggestions?

APROGERS

BTW that space above thumbnail I believe is where the description goes but remains even if empty. From what I can tell that is the culprit.

APROGERS

That fixed all but 2. It may be an aspect Ratio thing.

Hikin' Mike

@APROGERS said:
Thanks and yes I will add a space but they look good on mobile so that is the last bridge to jump off. Tell me I would like my header background to be yellow with black fonts but keep the rest of my site the way it is. I almost had it by using accent colors except it did not work on mobile any suggestions?

This should work.

/* Header and Navigation Colors */
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
  background-color: #fcc511;
}

.sm-user-ui h2.sm-page-widget-logo-subtext,
.sm-user-ui .sm-page-widget-logo-text-container a h1,
.sm-user-ui .sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-color-default a:active,
.sm-user-ui .sm-page-widget-nav-color-default a:visited,
.sm-user-ui .sm-accordion > .sm-accordion-item > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:visited,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:visited {
  color: black;
}

  .sm-user-ui .sm-page-widget-nav-color-default a:hover,
  .sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:hover{
    color: #333;/* Change it to black if you don't want a diffferent hover */
  }

.sm-user-ui .sm-accordion > .sm-accordion-item > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:visited,  
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:visited {
  border-bottom-color: rgba( 0, 0, 0, 0.04 );
}

Hikin' Mike

@APROGERS said:
BTW that space above thumbnail I believe is where the description goes but remains even if empty. From what I can tell that is the culprit.

It could be. I really didn't investigate it.

Hikin' Mike

@APROGERS Unrelated, If you want to change the colors/font of the SmugMug's Privacy/Cookie pop-up, I have this:

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Customize-Your-Privacy-and-Cookie-Policy-Popup

APROGERS

@Hikin' Mike said:

@APROGERS said:
Thanks and yes I will add a space but they look good on mobile so that is the last bridge to jump off. Tell me I would like my header background to be yellow with black fonts but keep the rest of my site the way it is. I almost had it by using accent colors except it did not work on mobile any suggestions?

This should work.

/* Header and Navigation Colors */
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
  background-color: #fcc511;
}

.sm-user-ui h2.sm-page-widget-logo-subtext,
.sm-user-ui .sm-page-widget-logo-text-container a h1,
.sm-user-ui .sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-color-default a:active,
.sm-user-ui .sm-page-widget-nav-color-default a:visited,
.sm-user-ui .sm-accordion > .sm-accordion-item > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:visited,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:active,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:visited {
  color: black;
}

  .sm-user-ui .sm-page-widget-nav-color-default a:hover,
  .sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:hover{
    color: #333;/* Change it to black if you don't want a diffferent hover */
  }

.sm-user-ui .sm-accordion > .sm-accordion-item > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:visited,  
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > .sm-accordion-item-label,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:active,
.sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:visited {
  border-bottom-color: rgba( 0, 0, 0, 0.04 );
}

Thanks so much... Really can't tell you how much I struggled with this

APROGERS

Ohhhh the extra space on a few of the videos was aspect ratio. They had black bars. I zoomed in a bit and filled the 16:9 space and it seems to work now. Appreciate your time brother.