Options

I need the "like button" ciode

brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
edited August 28, 2013 in SmugMug Customization
Well the code that makes it hold the color change after it's been selected by the viewer...

I did a custom icon and hover state for mine, as well as an active state icon. Bit I cannot get the icon to stay in the active state once clicked.

http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Sports-Images/Football-Best-of-2008/i-p9dw7mw

Andy's site shows an example that the "like" button changes color and stays that color after clicked...
http://www.moonriverphotography.com/Galleries/Landscapes-for-Sale/i-kKS5c55/A
Click it...
/*Change the Like Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-like {
  background-color: transparent;
  border: 0;
  background-image: url(http://www.brandolinoimaging.com/photos/i-8dJWwvx/0/O/i-8dJWwvx-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-like .sm-fonticon {
  display: none;
}

/*Opacity and Fade for Like Button*/
.sm-user-ui .sm-gallery .sm-button-image-like {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-like:hover {
   opacity: 1;
   background-image: url(http://www.brandolinoimaging.com/photos/i-LdftqDb/0/O/i-LdftqDb-O.png);
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-like:active {
   opacity: 1; 
   background-image: url(http://www.brandolinoimaging.com/photos/i-Grm4pWM/0/O/i-Grm4pWM-O.png);
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

[COLOR=Red].sm-user-ui .sm-gallery .sm-button-image-like .sm-button-image-liked {
   opacity: 1; 
   background-image: url(http://www.brandolinoimaging.com/photos/i-Grm4pWM/0/O/i-Grm4pWM-O.png);
  /* transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;*/[/COLOR]
}

I thought the part in red would "hold" the active state, but it does not.

Comments

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins
    edited August 25, 2013
    Try ".sm-user-ui .sm-gallery .sm-button-image-like .sm-button-image-liked:visited".
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 25, 2013
    GOT IT!!wings.gif
    .sm-user-ui .sm-gallery .sm-button-image-liked {
   opacity: 1; 
   background-image: url(http://www.brandolinoimaging.com/photos/i-Grm4pWM/0/O/i-Grm4pWM-O.png);
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

    Keeps the active state after clicking... not sure I need all the transition stuff with it.
    Might remove the smily now that I can make the active state stick.
  • Options
    firefox13firefox13 Registered Users Posts: 64 Big grins
    edited August 28, 2013
    Love the "like" and "info" buttons and function. I was looking for something similar.
    Any chance of getting the final code.
    Thanks
    Phil

    www.pcpimages.com
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 28, 2013
    firefox13 wrote: »
    Love the "like" and "info" buttons and function. I was looking for something similar.
    Any chance of getting the final code.
    Thanks
    /*Change the Download Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-download {
  background-color: transparent;
  border: none;
  background-image: 
    url(http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-Fp3hpWK/0/O/sc-download-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-download .sm-fonticon-Download {
display: none;
} 

/*Opacity and Fade for Download Button*/
.sm-user-ui .sm-gallery .sm-button-image-download {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-download:hover {
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

/*Change the Image Info Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-info {
  background-color: transparent;
  border: 0;
  background-image: url(http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-mn84Hvf/0/O/sc-info-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 80px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-info .sm-fonticon {
  display:none;
}

/*Opacity and Fade for Info Button*/
.sm-user-ui .sm-gallery .sm-button-image-info {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-info:hover {
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

/*Change the Like Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-like {
  background-color: transparent;
  border: 0;
  background-image: url(http://www.brandolinoimaging.com/photos/i-8dJWwvx/0/O/i-8dJWwvx-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-like .sm-fonticon {
  display: none;
}

/*Opacity and Fade for Like Button*/
.sm-user-ui .sm-gallery .sm-button-image-like {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-like:hover {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-liked {
   opacity: 1; 
   background-image: url(http://www.brandolinoimaging.com/photos/i-Grm4pWM/0/O/i-Grm4pWM-O.png);
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
  • Options
    firefox13firefox13 Registered Users Posts: 64 Big grins
    edited August 28, 2013
    brandofamily wrote: »
    /*Change the Download Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-download {
  background-color: transparent;
  border: none;
  background-image: 
    url(http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-Fp3hpWK/0/O/sc-download-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-download .sm-fonticon-Download {
display: none;
} 

/*Opacity and Fade for Download Button*/
.sm-user-ui .sm-gallery .sm-button-image-download {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-download:hover {
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

/*Change the Image Info Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-info {
  background-color: transparent;
  border: 0;
  background-image: url(http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-mn84Hvf/0/O/sc-info-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 80px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-info .sm-fonticon {
  display:none;
}

/*Opacity and Fade for Info Button*/
.sm-user-ui .sm-gallery .sm-button-image-info {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-info:hover {
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

/*Change the Like Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-like {
  background-color: transparent;
  border: 0;
  background-image: url(http://www.brandolinoimaging.com/photos/i-8dJWwvx/0/O/i-8dJWwvx-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-like .sm-fonticon {
  display: none;
}

/*Opacity and Fade for Like Button*/
.sm-user-ui .sm-gallery .sm-button-image-like {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-like:hover {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-liked {
   opacity: 1; 
   background-image: url(http://www.brandolinoimaging.com/photos/i-Grm4pWM/0/O/i-Grm4pWM-O.png);
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

    Thanks Heaps.
    Phil

    www.pcpimages.com
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 28, 2013
    All I aks is that you save the images to your account or use different images so you're not linking to my account.
  • Options
    firefox13firefox13 Registered Users Posts: 64 Big grins
    edited August 28, 2013
    brandofamily wrote: »
    All I aks is that you save the images to your account or use different images so you're not linking to my account.

    No worries - thanks
    Phil

    www.pcpimages.com
Sign In or Register to comment.