ipod profile frame

4 days ago — by steph stabwound (|\\\|) — Profile Picture Effects — used 5 times

replaces profile frame with a sideways blue ipod! change it if you please to any pic of any old tech that makes the screen transparent :3
this stacks the profile, info, and online icon vertically cause there's not enough space. feel free to fill in the quotes of the online now icon with the image address of any online icon you'd like! (i suggest looking through glittergraphics and myspacegens.)

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

/* Stack the profile picture, info, and online icon vertically */

.general-about {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

}



.general-about .profile-pic {

  order: 1 !important;

  float: none !important;

}



.general-about .details {

  order: 2 !important;

  width: 100% !important;

}



.general-about .online {

  order: 3 !important;

  visibility: hidden !important;

}



/* Change the online icon */

.general-about .online img {

  content: url("") !important;

  visibility: visible !important;

  display: block !important;

  width: 70px !important;

  height: auto !important;

  margin: 6px auto !important;

}

</style>
<style>
  .profile-pic{position:relative;width:160px;height:200px;display:inline-block}
.profile-pic img{position:absolute;top:8%!important;left:4%!important;width:84%!important;height:84%!important;object-fit:cover;z-index:1;border-radius:0px!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:-50;width:180%;height:100%;background-image:url('https://64.media.tumblr.com/006ec421ff93172b21b80e817d807b60/8d85c515ab448633-1e/s1280x1920/74a7b485fbd8b1109236c81262cae4c037a0683a.pnj');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Profile Picture Effects

« Back to Profile Picture Effects | « All Profile Elements