← Back to Layouts
purple sunbather layout

Name: FriendRewind
Author: FriendRewind
Author: GurtShredmaster
Category: Colorful
Created: August 12, 2026
i made this theme for my profile inspired by deafheavens sunbather album cover.
Comments (2)

GurtShredmaster 08/12/2026 5:25 PM
wow this theme is so good! i really like it.
GurtShredmaster 08/12/2026 5:26 PM
thank you so much
You must log in to comment.
CSS Code

<style>
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  
  * { cursor: url(https://www.rw-designer.com/cursor-download/23165/Wii%20Cursor.cur), auto !important; }

body{
	background-color:;
	background-image: url('https://i.postimg.cc/9FRxt5Qc/coolpurpleybackground(forfriendrewind).jpg');
	background-size:100%;
    background-attachment:fixed;
    background-repeat: dont-repeat
}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 340px !important;
    background-image: url('https://i.postimg.cc/D0wv09RL/Untitled-design-(5).png') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

#bg-image.image-background{
	display:none; /* hides default image */
}
/* Color and Font */
a, .count{
    color: white;
    font-family: "Helvetica", sans-serif;
    font-size: 15px!important;
}
.icon{
    font-size: 11px!important;
}
.main-nav-wrapper.links a{
    color:yellow!important;
    font-family: "Helvetica", serif;
    font-size: 12px;
}
footer nav a{
    color:black!important;
    font-family: "Helvetica", serif;
    font-size: 12px;
}
b, p, .blurbs{
    color:yellow;
    font-family: "Helvetica", ;
    font-size: 13px;
}
h1{
    color: yellow;
    font-family: "Helvetica", serif;
    font-size: 26px!important;
}
h2, h3, h4{
    color: yellow;
    font-family: "Helvetica", serif;
    font-size: 16px!important;
}
.heading{
    background-color: rgba(57, 29, 140, 0.5)!important;
}
button{
    font-family: "Helvetica", serif;
    background-color: black;
    border:1px solid black.profileInfo.profileInfo;
    border-radius: 3px;
    color: dimgray;
}
    /* nav section */
#top.myspace-header{
}
.myspace-header .top-nav{ /* top section */
    background-image: none;
    border:1px solid black;
}
.myspace-header .main-nav-wrapper{ /* links section */
    background-image: none;
    border:1px solid black;
}
.myspace-header .main-nav li a{
    border-right:1px solid black;
}
	/* search */
.myspace-header .search-input { /* search bar */
    background: rgba(0,0,0,0.4);
    border:2px solid black;
    color:yellow;
    font-family: "Helvetica", serif;
}
.myspace-header .search-button { /* search button */
    background: rgba(0,0,0,0.4)!important;
    border:1px solid yellow;
    color: yellow;
    font-weight: 1;
    text-shadow: none;
    font-family: "Helvetica", serif;
}
	/* main section */
main {
    background-color:transparent!important;
}
	/* name section */
span[itemprop="name"] h1{ 
    background-image: url('https://i.postimg.cc/zGtg24Q5/other-side.png');
    background-size: 99%;
    border:1px solid yellow;
    padding:10px;
    margin-bottom:10px!important;
}
#top.myspace-header, .general-about, .profile-mood, .mood, .table-section.interests, .table-section.photos-preview, .table-section.videos-preview, .blurbs, .friends, .table-section.mutual-friends-section, .blog-preview{
    background-image: url('https://i.postimg.cc/4d4vrJx5/renewed.png');
    background-size: 100%100%;
    border:1px solid yellow;
}
.general-about{
        padding: 25px;
}
.general-about .profile-pic {
    box-shadow: 0px 0px 8px black;
}
.online{
    text-align: center;
}
	/* mood section */
.profile-mood{ /* status section */
    padding: 4px;
}

.container, main, #main, .profile-container {
    max-width: 1500px !important;
    width: 100% !important;
}

.profile-pic-container {
  position: relative !important;
}
/* 1. Ensure the parent container relative positioning is set */
.profile-pic {
  position: relative !important;
  display: inline-block !important;
}

.profile-pic::after {
  content: "" !important;
  background-image: url("https://friendrewind.com/uploads/gallery/1/img_69704d3bc43999.36134691.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: absolute !important;
  width: 210px !important;  
  height: 210px !important; 
  top: -25px !important;
  left: -25px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.profile-playlist-widget h3{
    color:yellow!important;
}
.profile-playlist-widget li.current {
    background-color: rgba(255, 255, 255, 0.1)!important;
    color: fuchsia !important;
    font-weight: bold;
}
.pp-equalizer span {
    background: yellow!important;
}
.profile-playlist-widget li.current .song-info {
    color: yellow!important;
}
    /* view my: blog */
.mood{
    padding-left:5px;
    padding-top: 5px;
}

.contact, .url-info{
    background-image: url('https://i.postimg.cc/zGtg24Q5/other-side.png');
    background-size: 100%;
    border:1px solid yellow!important;
}

.details-table td{
    background-color: rgba(0,0,0,0.5)!important;
    border:1px;
}
	/* right side of profile */
.table-section.mutual-friends-section{ /* mutual friends section */
}
.table-section.mutual-friends-section h4{
    color:yellow;
}
a.mutual-friend-chip{ /* friends bubble */
    background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, #2c2c2c 0%, #000000 100%);
    box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
    0 10px 26px rgba(0, 0, 0, 0.4);
    border:none;
    border-radius: 3px;
    color:yellow;
}
a.mutual-friend-chip:hover{
    background-color: black;
    color:silver;
}
.table-section.photos-preview .inner img{
    min-height: 100%;
    box-shadow: 0px 0px 10px black;
}
.table-section.videos-preview{ /* videos section */
}
.pf-video-thumb-wrap{
    box-shadow: 0px 0px 10px black;
}
.blog-preview{
    padding: 11px;
}
.blog-preview h4{
    margin: 6px;
}
#top8-grid .person p {
    color: yellow;
}
.badge-widget-modal-content{
    background-color: yellow;
}
.badge-widget-modal-content p{
	color:gray!important;
}
.badges-widget .badge-label{
    color:silver;
}
#badge-widget-modal-tier{
	color:silver!important;
}
.badge-widget-modal-content img {
    background: #131314;
}
.badge-widget-modal-content .badge-widget-modal-close {
    color: white!important;
}
 .badge-widget-modal-content .badge-widget-modal-close:hover{
    color:green!important;
}
.comments-table{
    border-spacing: 0px 15px;
    border:none;
}
.comments-table td{
    background-color: rgba(0,0,0,0.5)!important;
    border:1px solid yellow;
}
#comments.friends{
    border: 1px solid yellow;.profile-pic.profile-pic
    margin-top:10px;
}
.cb-like-btn{
    border:none!important;
}
.comment-replies{
    border:1px solid yellow;
    border-radius: 3px;
}
	/* footer section */
footer{
    background-color: rgba(0,0,0,0.5);
    border:0px solid black;
}
footer .links{
    background-color: transparent;
}
footer .links a{
    text-shadow: none;
}
	/* music bar */
#footer-music-bar.music-bar{
	background-color:black!important; /* music bar background */
}
.music-bar::before{ /* the glass skin */
	background-image: url('https://i.postimg.cc/4d4vrJx5/renewed.png')!important;
	background-size: 7%!important;
}
.music-bar .bar-btn{ /* buttons */
	color:silver!important;
	background-color:fuchsia!important;
	border:1px solid yellow!important;
}
.bar-info-section{ /* song details section */
    background-color: rgba(232,135,135,0.4);
    border-radius: 7px;
}
/* now playing */
.bar-now-playing {
    color:yellow!important;
}
/* song title */
.music-bar .bar-title{
    color:white!important;
}
/* song length and seconds playing */
.bar-time-display, .bar-time-total {
    color:linen!important;
}
/* bar color */
.bar-progress{
}
.bar-progress-fill{
    background: darkviolet!important;
}
/* windows logo */
.music-bar .bar-btn.playlist-btn{
    filter: contrast(600%);
}
.volume-slider{
    background: fuchsia!important;
}
/* IM Messenger */
.bar-im-container{
	border-left:;
} 
#frw-im-button{
	background-color:black!important;
}
.person-icon-glossy{ /* IM person */
}
.messenger-label { /* IM messenger title */

}a:hover {letter-spacing: 1px; transition-duration: 200ms !important;}

}</style>