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.

Add a CSS Block to your page and 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.

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.

Updated: 12-31-20

CSS


/**
* Adds Popup Logo Entry on a Selected Page
************************************************/
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer,
.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-folders,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-slideshow,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-galleries,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-pagetitle,
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-breadcrumb {
	opacity: 0;
	transition: opacity 1s ease-in-out 3s;
}

.sm-user-ui .sm-page-widget-image {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 100%;
	opacity: 0;
	z-index: -1;
}

.sm-user-ui .sm-page-initialized .sm-page-layout-region-header,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-footer,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-text,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-html,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-images,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-folders,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-slideshow,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-galleries,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-pagetitle,
.sm-user-ui .sm-page-initialized .sm-page-layout-region-body .sm-page-widget-breadcrumb {
	position: relative;
	opacity: 1;
}

.sm-user-ui .sm-page-initialized .sm-page-widget-image {
	animation: logoFade 3s ease-in-out 0s;
}

@keyframes logoFade {

	0%	 {opacity: 0;}
	25%	 {opacity: 1;}
	75%	 {opacity: 1;}
	100% {opacity: 0;}

}

Powered by SmugMug Owner Log In