My Free MFC Profile Help: Cool Status & Gallery Effects for Black Themes

If you have a black/dark theme for your profile, you might like the effects on this profile:
(scroll over the Status icon, and click on the Galleries to see what I'm talking about.)

Just add these codes to your css section to get yours to do the same thing:

CSS Code:

/*gallery effect*/
.gallery_image img,.grid2colb,div[style='border: none; float:left; margin-right: 5px; margin-bottom: 5px; text-align: center;'] a img {
  padding:9px;
  margin-bottom:5px;
  background:rgba(133,133,133,0.5);
  border:1px solid #fff;
  -webkit-box-shadow:inset 0 0 5px 0 #21a210,inset 0 3px 3px -3px #40b606b,0 2px 3px 0 #7a7a7a;
  -moz-box-shadow:inset 0 0 5px 0 #21a210,inset 0 3px 3px -3px #40b606,0 2px 3px 0 #7a7a7a;
  box-shadow:inset 0 0 5px 0 #21a210,inset 0 3px 3px -3px #40b606b,0 2px 3px 0 #7a7a7a;
  -webkit-transition:all 0;
  -moz-transition:all 0;
  transition:all 0;
}

.gallery_image img:hover,.hdr-arrow-us,.hdr-arrow-us2,div[style='border: none; float:left; margin-right: 5px; margin-bottom: 5px; text-align: center;'] a img:hover {
  -webkit-box-shadow:inset 0 0 5px 0 #bcbcbc,inset 0 3px 3px -3px #bcbcbc,0px 0 5px 2px #bcbcbc;
  -moz-box-shadow:inset 0 0 5px 0 #bcbcbc,inset 0 3px 3px -3px #bcbcbc,0px 0 5px 2px #bcbcbc;
  box-shadow:inset 0 0 5px 0 #bcbcbc,inset 0 3px 3px -3px #bcbcbc,0px 0 5px 2px #bcbcbc;
  border:1px solid #c04a4a;
}

.gallery_image img,.hdr-arrow-intl,.hdr-arrow-us,.hdr-arrow-us2,div[style='border: none; float:left; margin-right: 5px; margin-bottom: 5px; text-align: center;'] {
  background:none!important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  color:#FFF;
  text-transform:uppercase;
  font-style:normal;
  text-shadow:0 0 0 #bcbcbc;
  font-weight:none;
}

img[src='http://img.myfreecams.com//images/lock-icon.gif'],.hdr-arrow-us,.hdr-arrow-us2 {
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  background:url(http://i1276.photobucket.com/albums/y475/cssmfc/lock_bg_zps0bcfa204.png) center!important;
  width:40px!important;
  height:40px!important;
  padding:10px!important;
  margin:3px!important;
  border:#358110 1px solid!important;
}

div[style='padding:8px;'] a:after,.homepage-masthead,.boots:hover:after,#promofooter #promos h4 a,div[style='padding:8px;text-align:center;']:after,#promofooter #promos h4 a,div[style='padding:8px;text-align:center;']:before,#ca_box,.bottom_footer,.list,.all,.banners,.compressed-view .ux-thumb-wrap,#tabledrive,div[style='margin:20px;']:after,a[style='font-size:18px;'] {
  position:absolute;
}

div[style='padding:8px;'] a:after {
  content:url (http://s16.postimg.org/tushhtin5/es_new_pic.png);
  margin-top:-4px;
  margin-left:-51px;
}

.gallery_image img {
  width:90px;
  height:90px;
  margin-bottom:0!important;
  color:#ccc;
}

.gallery_image {
  background:#000!important;
  margin:5px!important;
  color:#FFF;
}

#masthead-expanded .playlist-bar-item a.playlist-thumb-empty,.gallery_image {
  background:#ccc;
}

.gallery_image {
  border:none;
  float:left;
}

div[style='border: none; float:left; margin-right: 5px; margin-bottom: 5px; text-align: center;'] a:after,#sp-results {
  display:none;
}

#gallery a[style='font-size:18px;'] {
  position:absolute!important;
  bottom:262px!important;
  z-index:8888;
  right:110px!important;
  margin-left:752px;
  font-size:11px!important;
  width:37px!important;
  border:solid 1px #000;
  letter-spacing:-1px;
  padding:5px;
  color:#FFF;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  background:#000;
  text-decoration:none;
}

#gallery {
  position:fixed;
  bottom:0;
  left:-40px;
  width:100%!important;
  background-repeat:repeat;
  z-index:8888;
  padding:40px 50px;
  padding-bottom:0;
  background:rgb(69,72,77);
  background:-moz-linear-gradient(top,rgba(69,72,77,1) 0%,rgba(0,0,0,1) 6%,rgba(137,137,137,1) 6%,rgba(0,0,0,1) 11%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(69,72,77,1)),color-stop(6%,rgba(0,0,0,1)),color-stop(6%,rgba(137,137,137,1)),color-stop(11%,rgba(0,0,0,1)));
  background:-webkit-linear-gradient(top,rgba(69,72,77,1) 0%,rgba(0,0,0,1) 6%,rgba(137,137,137,1) 6%,rgba(0,0,0,1) 11%);
  background:-o-linear-gradient(top,rgba(69,72,77,1) 0%,rgba(0,0,0,1) 6%,rgba(137,137,137,1) 6%,rgba(0,0,0,1) 11%);
  background:-ms-linear-gradient(top,rgba(69,72,77,1) 0%,rgba(0,0,0,1) 6%,rgba(137,137,137,1) 6%,rgba(0,0,0,1) 11%);
  background:linear-gradient(to bottom,rgba(69,72,77,1) 0%,rgba(0,0,0,1) 6%,rgba(137,137,137,1) 6%,rgba(0,0,0,1) 11%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d',endColorstr='#000000',GradientType=0);
}

#gallery .gallery_image {
  background:#999!important;
  border:1px solid #000;
  border-radius:5px 0 5px 0;
  -moz-border-radius:5px 0;
  -ms-border-radius:5px 0 5px 0;
  -o-border-radius:5px 0 5px 0;
  -webkit-border-radius:5px 0 5px 0;
}

.img {
  opacity:1;
  padding:0;
  border:solid 1px #EFEFEF;
  -webkit-box-reflect:below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(.7,transparent),to(rgba(0,0,0,0.4)));
  -webkit-box-shadow:0 0 20px rgba(255,255,255,0.8);
  -moz-box-shadow:0 0 20px rgba(255,255,255,0.8);
  box-shadow:0 0 20px rgba(255,255,255,0.8);
}

.img:hover {
  opacity:1;
  -moz-box-shadow:1px 1px 5px #000;
  -webkit-box-shadow:1px 1px 5px #000;
  box-shadow:1px 1px 5px #000;
  -webkit-box-reflect:below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(.7,transparent),to(rgba(0,0,0,0.4)));
  -webkit-box-shadow:0 0 20px rgba(255,255,255,0.8);
  -moz-box-shadow:0 0 20px rgba(255,255,255,0.8);
  box-shadow:0 0 20px rgba(255,255,255,0.8);
}

.thumbnail {
  width:80px;
  height:80px;
  display:block;
  float:left;
  padding:8px 22px 9px 10px;
  background:url(http://i1275.photobucket.com/albums/y446/EsmeProductions/profilepicBG_zpsb623beaa.png);
}

.online {
  display:marker;
  opacity:1;
  font-weight:normal;
  color:#2C062F;
  font-size:9px;
  text-shadow:0 0 0 #555;
  padding-left:6px;
  padding-right:6px;
  width:30px;
  heigh:70px;
  position:relative;
  top:-20px;
  left:-22px;
  padding-top:5px;
  padding-bottom:5px;
}

.online a {
  display:marker;
  color:#FFF;
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  transition:all 1s;
  font-weight:bold;
  padding-left:6px;
  padding-right:6px;
  width:30px;
  heigh:70px;
  position:relative;
  top:-20px;
  left:-22px;
  padding-top:5px;
  padding-bottom:5px;
}

.online a:hover {
  display:marker;
  color:#FFF;
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  transition:all .3s;
  padding-left:6px;
  padding-right:6px;
  width:30px;
  heigh:70px;
  position:relative;
  top:-20px;
  left:-22px;
  padding-top:5px;
  padding-bottom:5px;
  text-transform:uppercase;
}

.online:hover {
  display:marker;
  opacity:1;
  padding-left:6px;
  padding-right:6px;
  width:30px;
  heigh:70px;
  position:relative;
  top:-20px;
  left:-22px;
  padding-top:5px;
  padding-bottom:5px;
}

.right-box .ipad,#userprof_state a,input[value='Make Post'],input[value='Send Message'],a[style='font-size:18px;'] {
  -webkit-box-shadow:0 2px 3px 0 #000000;
  -moz-box-shadow:0 2px 3px 0 #000000;
  box-shadow:0 2px 3px 0 #000000;
  background:#000000;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/dzz_zps6c4975ca.png) no-repeat,-moz-linear-gradient(top,#000000 0%,#595959 68%);
}

.right-box .ipad,#userprof_state a,input[value='Make Post'],input[value='Send Message'],a[style='font-size:18px;'] {
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/dzz_zps6c4975ca.png) no-repeat,-webkit-linear-gradient(top,#000000 0%,#595959 68%);
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/dzz_zps6c4975ca.png) no-repeat,-o-linear-gradient(top,#000000 0%,#595959 68%);
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/dzz_zps6c4975ca.png) no-repeat,-ms-linear-gradient(top,#595959 0%,#d10cbc 14%,#292729 100%);
}

.right-box .ipad,#userprof_state a,input[value='Make Post'],input[value='Send Message'],a[style='font-size:18px;'] {
  -webkit-transition:all 0;
  -moz-transition:all 0;
  transition:all 0;
  background-position:-50px 0;
}

.right-box .ipad:hover,#userprof_state a:hover,input[value='Make Post']:hover,input[value='Send Message']:hover,a[style='font-size:18px;']:hover {
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/dzz_zps6c4975ca.png) no-repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0%,#292729),color-stop(68%,#292729));
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/dzz_zps6c4975ca.png) no-repeat,-webkit-linear-gradient(top,#292729 0%,#292729 68%);
}

.right-box .ipad:hover {
  background-position:100px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
}

.callout,#userprof_state a:hover {
  background-position:80px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
}

#globalheader #globalnav.nosearch,input[value='Make Post']:hover {
  background-position:100px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
}

#globalnav.nosearch,input[value='Send Message']:hover,a[style='font-size:18px;']:hover {
  background-position:100px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
}

#globalheader #globalnav.nosearch,input[value='Make Post'],input[value='Send Message'] {
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  color:#ababab;
  border:none!important;
  text-align:center!important;
  -webkit-box-shadow:0 2px 4px 0 #000000;
  -moz-box-shadow:0 2px 4px 0 #000000;
  box-shadow:0 2px 4px 0 #000000;
  text-shadow:0 -1px #8e1b68;
}

input[value='Make Post'] {
  margin-top:15px;
  margin-bottom:1px;
  letter-spacing:-1px;
}

#pro {
  position:fixed;
  top:33px;
  right:-2px;
  display:block;
  width:180px;
  height:69px;
  z-index:9999;
}

.pro {
  margin-bottom:-1px;
  overflow:hidden;
}

.rop {
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/wb_zps7a613e35.gif) no-repeat;
  font-family:Tahoma,Geneva,sans-serif;
  font-size:12px;
  color:#FFF;
  position:absolute;
  text-align:center;
  left:150px;
  height:58px;
  width:258px;
  padding:1px;
  -webkit-transition:all .75s ease-out 0;
  -moz-transition:all .75s ease-out 0;
  -ms-transition:all .75s ease-out 0;
  -o-transition:all .75s ease-out 0;
  transition:all .75s ease-out 0;
  cursor:pointer;
  border-radius:7px 7px 0 0;
  -moz-border-radius:7px 7px 0 0;
  -webkit-border-radius:7px 7px 0 0;
  transition:width 2s,height 2s;
  -moz-transition:width 2s,height 2s,-moz-transform 2s;
  -webkit-transition:width 2s,height 2s,-webkit-transform 2s;
  -o-transition:width 2s,height 2s,-o-transform 2s;
  opacity:.6;
  top:8px;
}

.rop:hover {
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/wb_zps7a613e35.gif) no-repeat;
  height:58px;
  width:258px;
  left:-83px;
  cursor:pointer;
  font-family:'Century Gothic';
  font-size:12px;
  color:#FFF;
  text-shadow:0 0 1px #333;
  -webkit-transition:all .75s ease-out 0;
  -moz-transition:all .75s ease-out 0;
  -ms-transition:all .75s ease-out 0;
  -o-transition:all .75s ease-out 0;
  transition:all .75s ease-out 0;
  opacity:1;
}

#socials {
  position:fixed;
  top:93px;
  right:-2px;
  display:block;
  width:180px;
  height:69px;
  z-index:9999;
}

.socials {
  margin-bottom:-1px;
  overflow:hidden;
}

.sop {
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/so_zps395def45.gif) no-repeat;
  font-family:Tahoma,Geneva,sans-serif;
  font-size:11px;
  color:#FFF;
  position:absolute;
  text-align:center;
  left:150px;
  height:58px;
  width:258px;
  padding:1px;
  -webkit-transition:all .75s ease-out 0;
  -moz-transition:all .75s ease-out 0;
  -ms-transition:all .75s ease-out 0;
  -o-transition:all .75s ease-out 0;
  transition:all .75s ease-out 0;
  cursor:pointer;
  border-radius:7px 7px 0 0;
  -moz-border-radius:7px 7px 0 0;
  -webkit-border-radius:7px 7px 0 0;
  transition:width 2s,height 2s;
  -moz-transition:width 2s,height 2s,-moz-transform 2s;
  -webkit-transition:width 2s,height 2s,-webkit-transform 2s;
  -o-transition:width 2s,height 2s,-o-transform 2s;
  opacity:.6;
  top:8px;
}

.sop:hover {
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/so_zps395def45.gif) no-repeat;
  height:58px;
  width:258px;
  left:-83px;
  cursor:pointer;
  font-family:'Century Gothic';
  font-size:11px;
  color:#FFF;
  text-shadow:0 0 1px #333;
  -webkit-transition:all .75s ease-out 0;
  -moz-transition:all .75s ease-out 0;
  -ms-transition:all .75s ease-out 0;
  -o-transition:all .75s ease-out 0;
  transition:all .75s ease-out 0;
  opacity:1;
}

#navhead {
  position:fixed;
  top:10px;
  right:10px;
  padding-left:10px;
  display:block;
  width:600px;
  height:42px;
  z-index:9999;
  background:rgba(90,59,92,0.5) url() left no-repeat;
}

#nv a {
  padding:11px 11px 4px 8px;
  display:inline-block;
  float:inherit;
  position:relative;
  text-transform:uppercase;
  border-left:0 solid #aaaaaa;
  border-right:1px solid #aaaaaa;
  color:#C0C0C0;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  -ms-transition:all .5s;
  -o-transition:all .5s;
  text-shadow:0 2px 1px #000;
  text-decoration:none;
  font-size:16px;
}

#nv a:hover {
  font-weight:bold;
  font-style:none;
  color:#FF00FF;
  padding:11px;
  background:rgba(250,179,255,0.8);
  -webkit-box-shadow:inset 0 10px 10px 0 #000;
  -moz-box-shadow:inset 0 5px 5px 0 #000;
  box-shadow:inset 0 5px 5px 0 #000;
  text-shadow:-4px 8px 9px #000;
  font-size:17px;
  position:relative;
  -moz-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -webkit-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -o-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -ms-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
}

#logo {
  position:fixed;
  bottom:9px;
  left:6px;
  padding-left:9px;
  display:block;
  width:40px;
  height:40px;
  z-index:9999;
  background:rgba(204,204,204,0.1) url() left no-repeat;
  -moz-border-radius:20px;
  border-radius:20px;
  -ms-border-radius:20px;
  -o-border-radius:20px;
  -webkit-border-radius:20px;
  -webkit-box-shadow:0 1px 2px 0 #000000;
  -moz-box-shadow:0 1px 2px 0 #000000;
  box-shadow:0 1px 2px 0 #000000;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  -webkit-transition:all 0;
  -moz-transition:all 0;
  transition:all 0;
  background-position:-100px 0;
  text-align:center!important;
  font-size:11px;
  color:rgba(153,153,153,0.4);
}

#logo:hover {
  position:fixed;
  bottom:9px;
  left:6px;
  padding-left:9px;
  display:block;
  width:50px;
  height:50px;
  z-index:9999;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png);
  -moz-border-radius:25px;
  border-radius:25px;
  -ms-border-radius:25px;
  -o-border-radius:25px;
  -webkit-border-radius:25px;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background:url(http://i963.photobucket.com/albums/ae117/dexdesign2002/black2hover_zps24f7ad9d.png) no-repeat;
  background-position:200px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
  background-position:100px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
  background-position:200px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
  background-position:200px 0;
  -webkit-transition:all .7s;
  -moz-transition:all .7s;
  transition:all .7s;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border:none!important;
  text-align:center!important;
  font-size:11px;
  color:rgba(153,153,153,0.4);
}

#register {
  color:#FFF;
  font-size:12px;
}

#store {
  position:relative;
  width:960px;
  height:850px;
  z-index:1;
  background-image:url(http://i1275.photobucket.com/albums/y446/EsmeProductions/ESME-STORE_zpsca43f878.png);
  background-repeat:no-repeat;
  color:#990066;
}

#store-con {
  width:868px;
  height:735px;
  overflow:auto;
  padding:13px;
  background:#;
  margin-top:160px;
  margin-left:52px;
  margin-right:52px;
  margin-bottom:11px;
}

.wtf_bx {
  text-shadow:0 1px 3px #000;
  width:240px;
  height:240px;
  float:left;
  display:block;
  position:relative;
  margin:30px 8px;
}

.wtf_bx img {
  width:240px;
  height:159px;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  -webkit-box-shadow:0 5px 10px 0 #000;
  -moz-box-shadow:0 5px 10px 0 #000;
  box-shadow:0 5px 10px 0 #000;
  position:relative;
}

.wtf_bx:hover img {
  opacity:.4;
}

.wtf_bx a {
  color:#FFF;
  font-weight:normal;
  width:100%;
  font-size:18px;
  text-align:center;
  display:block;
  float:left;
  margin-top:8px;
}

.sold img {
  opacity:.5;
}

.wtf_bx a span {
  clear:both;
  display:block;
  font-size:14px;
  font-weight:bold;
  line-height:25px;
  color:#FFF;
  text-transform:none;
}

.wtf_bx div {
  z-index:9999;
  display:none;
  opacity:0;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  position:absolute;
  top:0;
  left:0;
  width:222px;
  background:#000;
  background:rgba(0,0,0,0.7);
  padding:8px;
  border:1px solid #333;
}

.wtf_bx a div {
  clear:both;
  display:block;
  font-size:14px;
  font-weight:normal!important;
  line-height:22px;
  text-align:center;
  color:#fff;
  text-transform:uppercase;
  position:relative;
  top:0;
  background:url(http://i1275.photobucket.com/albums/y446/EsmeProductions/es-vid-bit-off_zps16cf5052.png);
  height:34px;
  border:none!important;
  opacity:1!important;
  margin-top:5px;
}

.wtf_bx:hover div {
  display:block;
  opacity:1;
}

.wtf_bx div span {
  text-transform:none!important;
  line-height:16px;
  font-size:12px;
  text-align:left;
  color:#FFF;
  font-weight:bold;
}

.wtf_bx div span:before {
  content:'Info:';
  color:#FFF;
  font-weight:normal;
}

Saturday, October 5, 2013

Cool Status & Gallery Effects for Black Themes

No comments:

Post a Comment