Create a Popup Logo Entry Page with SmugMug - Mike Matenkosky

Create a Popup Logo Entry Page with SmugMug

If you’ve always wanted to add a popup logo entry page on your SmugMug site, then sit tight and I’ll try to explain how to do that.

Add a Single Photo Block to your page, select your popup logo and save it.

You’ll see some tabs that says “Content, Theme, Background and Layout”. Click on Background and select “Type” > Photo or Slideshow and select Mask ON. Leave Photo blank.

Copy the CSS below and save it. When you publish it, if you did it correctly, you should see your popup logo when you first visit your site/page.

Depending on the size of your header/navigation/logo, you may need to adjust the top: 33%; to suit. If you need to edit the @keyframes, animations, transitions etc, you can read about it here.

If you still have questions, feel free to post your question on the Dgrin SmugMug Customization Forum and myself of another helper can help you.

CSS


/**
* Adds Popup Logo Entry on a Selected Page
************************************************/
/* Start Just for Loggedin and Edits */
.sm-user-ui .sm-flex-items-center {z-index: 1000;}
.sm-page-initialized.sm-page-edit .sm-page-layout-region-body .sm-page-widget-pagetitle,
.sm-page-initialized.sm-page-edit .sm-page-layout-region-body .sm-page-widget-text,
.sm-page-initialized.sm-page-edit .sm-page-layout-region-body .sm-page-widget-html,
.sm-page-initialized.sm-page-edit .sm-page-layout-region-body .sm-page-widget-images,
.sm-page-initialized.sm-page-edit .sm-page-layout-region-body .sm-page-widget-galleries,
.sm-page-initialized.sm-page-edit .sm-page-layout-region-body .sm-page-widget-slideshow {z-index: 0;}
/* End Just for Loggedin and Edits */

.sm-page-widget-image,	
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-pagetitle,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-text,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-html,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-images,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-galleries,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-slideshow,
.sm-user-ui .sm-page-layout-region-footer {
	opacity: 0;
	}		
	
	.sm-user-ui .sm-page-layout-region-header,
	.sm-user-ui .sm-page-layout-region-body .sm-page-widget-pagetitle,
	.sm-user-ui .sm-page-layout-region-body .sm-page-widget-text,
	.sm-user-ui .sm-page-layout-region-body .sm-page-widget-html,
	.sm-user-ui .sm-page-layout-region-body .sm-page-widget-images,
	.sm-user-ui .sm-page-layout-region-body .sm-page-widget-galleries,
	.sm-user-ui .sm-page-layout-region-body .sm-page-widget-slideshow,
	.sm-user-ui .sm-page-layout-region-footer {
		-webkit-transition: opacity 5s ease-in-out 2s;
		   -moz-transition: opacity 5s ease-in-out 2s;
		     -o-transition: opacity 5s ease-in-out 2s;
		        transition: opacity 5s ease-in-out 2s; 
		}
		
.sm-page-initialized .sm-page-layout-region-header,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-pagetitle,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-text,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-html,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-images,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-galleries,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-slideshow,
.sm-page-initialized .sm-page-layout-region-footer {
	position: relative;
	opacity: 1;
	}	
	
.sm-page-initialized .sm-page-layout-region-header {
	z-index: 2;
	}

.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-pagetitle,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-text,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-html,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-images,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-galleries,
.sm-page-initialized .sm-page-layout-region-body .sm-page-widget-slideshow,
.sm-page-initialized .sm-page-layout-region-footer {
	z-index: 1;
	}

.sm-page-widget-image {
	width: 100%;
	position: absolute;
	top: 33%;/* Adjust Pop-up Logo */
	-webkit-transform: translate( 0, -50% ); 
	   -moz-transform: translate( 0, -50% ); 
	    -ms-transform: translate( 0, -50% );
        	transform: translate( 0, -50% ); 	
	}	
	
.sm-user-ui .sm-page-widget-content .sm-tile-single.sm-tile-center .sm-tile-wrapper {
	border: 0;
	box-shadow: none;
	}
	
.sm-page-initialized .sm-page-widget-image { 
	-webkit-animation: 3s ease-in-out 0s normal none 1 running logoFade;
	   -moz-animation: 3s ease-in-out 0s normal none 1 running logoFade;
	     -o-animation: 3s ease-in-out 0s normal none 1 running logoFade;
         	animation: 3s ease-in-out 0s normal none 1 running logoFade;
	}
	
.sm-page-initialized .sm-page-widget-image .sm-tile-single { 
	-webkit-animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
	   -moz-animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
		-o-animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
		   animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
	-webkit-transition-delay: 3s; 
	   -moz-transition-delay: 3s; 
	     -o-transition-delay: 3s;
         	transition-delay: 3s; 	
	}
	
.sm-user-ui .sm-page-background-mask { 
	opacity: 1 !important; 
	}
	
.sm-page-initialized .sm-page-background-mask { 
	opacity: 0 !important; 
	-webkit-transition: opacity 1s ease-in-out 3s; 
	   -moz-transition: opacity 1s ease-in-out 3s; 
	     -o-transition: opacity 1s ease-in-out 3s;
         	transition: opacity 1s ease-in-out 3s; 
	}

@keyframes logoFade {
	0% { opacity: 0; }
	33% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
	}
	
	@-webkit-keyframes logoFade {
		0% { opacity: 0; }
		33% { opacity: 1; }
		80% { opacity: 1; }
		100% { opacity: 0; }
		}
	@-moz-keyframes logoFade {
		0% { opacity: 0; }
		33% { opacity: 1; }
		80% { opacity: 1; }
		100% { opacity: 0; }
		}
	@-o-keyframes logoFade {
		0% { opacity: 0; }
		33% { opacity: 1; }
		80% { opacity: 1; }
		100% { opacity: 0; }
		}

@keyframes logoHide {
	0% { width: 100%; height: 100%; }
	100% { visibility: hidden; }
	}
	
	@-webkit-keyframes logoHide {
		0% { width: 100%; height: 100%; }
		100% { visibility: hidden; }
		}
		
	@-moz-keyframes logoHide {
		0% { width: 100%; height: 100%; }
		100% { visibility: hidden; }
		}
	@-o-keyframes logoHide {
		0% { width: 100%; height: 100%; }
		100% { visibility: hidden; }
		}
	
@media only screen and ( max-width: 670px ) {

	.sm-page-widget-image { 
		display: none; 
		}		
	
}

Powered by SmugMug Log In