CHANGE FOOTER TEXT AND ICON COLOR

tunasub

I would like to create an entire site footer, drawing inspiration from the footer of this art gallery website baltic.art/learn

How do i create white text, different from that of the text on the page?

Also how would one change the color of a social media button to white?

Hikin' Mike

We need to see your website.

tunasub

www.connorhelsel.com/

Hikin' Mike

If you are trying to add a Logo Entry Popup (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Popup-Logo-Page) then you need to follow the tutorial. You are missing some code on your site right now.

Specifically this:

.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;
    opacity: 1;
    }   

.sm-page-initialized .sm-page-layout-region-header {
    z-index: 10;
    }

.sm-page-initialized .sm-page-layout-region-center .sm-page-widget-galleries,
.sm-page-initialized .sm-page-layout-region-footer {
    z-index: 5;
    }

That should go above the other code:

.sm-page-widget-image {
    width: 100%;
    margin-top: -150px;
    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; 
        }       

}

tunasub

How would I run it with multiple single photos on the page?

I use a single photo as a custom button, which needs to then fade in with the rest of the media.

Hikin' Mike

Sorry, I don't understand.

tunasub

Currently the popup entry code fades in and out a photo that needs to stay on the page after the initial animation.

Hikin' Mike

@tunasub said:
Currently the popup entry code fades in and out a photo that needs to stay on the page after the initial animation.

Currently you don't have ALL OF THE CODE like I mentioned earlier.

This is what I see when I visit your site:

This is what I see when I remove the broken code

Looks like you have a button that is either you've removed the image URL or you have it set to private.

Is the image I see on the second photo supposed to be your popup image? The popup only displays when the page is first loaded. It isn't supposed to stay.

You need to copy the code I provided above or the popup will not work.