CHANGE FOOTER TEXT AND ICON COLOR

tunasubtunasub Registered Users Posts: 9 Big grins
edited April 6, 2018 in SmugMug Customization
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?

Comments

  • tunasubtunasub Registered Users Posts: 9 Big grins
    www.connorhelsel.com/
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited April 7, 2018

    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; 
            }       
    
    }
    
  • tunasubtunasub Registered Users Posts: 9 Big grins
    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.
  • tunasubtunasub Registered Users Posts: 9 Big grins
    Currently the popup entry code fades in and out a photo that needs to stay on the page after the initial animation.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @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.

Sign In or Register to comment.