I need the "like button" ciode

brandofamily

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.

Hikin' Mike

Try ".sm-user-ui .sm-gallery .sm-button-image-like .sm-button-image-liked:visited".

brandofamily

GOT IT!!

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

firefox13

Love the "like" and "info" buttons and function. I was looking for something similar.
Any chance of getting the final code.
Thanks

brandofamily

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;
}

firefox13

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.

brandofamily

All I aks is that you save the images to your account or use different images so you're not linking to my account.

firefox13

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