Create a Popup Logo Page - Fine Art Prints for Sale

Create a Popup Logo Page

If you've always wanted to add a Popup Logo before your main site loads, then sit tight and I'll try to explain how to do that.

Add a Single Photo Block to your page and save it. That is going to be your logo.

Then you are going to decide what type of content your home page will contain. Do you want your background to display a Slideshow or do you want some text and/or some Galleries? If you want to display a Slideshow, then follow the instructions below. If you prefer some text and/or some Galleries, then scroll down to the Using Content/Gallery CSS section.

Using a Slideshow CSS

If you are using a Slideshow as your home page's background, make sure you select "Mask ON" in your slideshow section. Then drop a CSS Block into "Just the Page". Copy the code below and save it. Scroll down to the Common CSS and copy that code under the code you just pasted and save it. If you did it correctly, you should see your logo when you first visit your site.

Logo Entry Page with Slideshow Example


.sm-page-widget-image,	
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
	opacity: 0;
	}	
	
.sm-page-initialized .sm-page-layout-region-header,
.sm-page-initialized .sm-page-layout-region-footer {
	position: relative;
	z-index: 10;
	opacity: 1;
	}	
	
.sm-user-ui .sm-page-layout-region-header,
.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; 
	}	

This may get complicated if you have a lot of widget blocks. In this example I'm going to use just use a Gallery Block, but you can add as many blocks as you'd like, you'll just have to add more code. Copy the CSS below and save it.

You'll see some tabs that says "Content, Theme, Background and Layout". Click on Background and select Photo and Mask ON. Doesn't matter what photo, it won't be displayed. Scroll down to the Common CSS and copy that code under the code you just pasted and save it. If you did it correctly, you should see your logo when you first visit your site.

Logo Entry Page with Content Example


.sm-page-widget-image,	
.sm-user-ui .sm-tiles-cover .sm-image,
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-center .sm-page-widget-galleries,
.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-center .sm-page-widget-galleries,
	.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-center .sm-page-widget-galleries,
.sm-page-initialized .sm-page-layout-region-footer {
	position: relative;
	z-index: 10;
	opacity: 1;
	}	

Common CSS

Depending on the size of your logo, you may need to adjust the margin-top: -50px; 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.


.sm-page-widget-image {
	width: 100%;
	margin-top: -50px;
	position: absolute;
	top: 0;
	-webkit-transform: translateY(-50%);	
	   -moz-transform: translateY(-50%);	
	     -o-transform: translateY(-50%);	
	        transform: translateY(-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-ransition-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