Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Shrek

Author: Def3ct
Category: Animation
Created: June 29, 2025
Turn your profile into a swamp!
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
/* Import a rustic, fairytale font */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

/* --- 1. THEME VARIABLES & KEYFRAMES -- */
:root {
    --font-shrek: 'MedievalSharp', cursive;
    
    /* Shrek's Swamp Color Palette */
    --shrek-green: #7A8C35;
    --swamp-brown: #5C3D2E;
    --mud-brown: #4F3423;
    --parchment: #EFE6D5;
    --text-dark: #3D2B1F;

    --container-bg-color: var(--mud-brown);
    --text-color: var(--text-dark);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mudSplatter {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}


/* --- 2. BASE STYLES & SWAMP BACKGROUND --- */
body {
    background-color: var(--swamp-brown) !important;
    background-image: url('https://webneel.com/wallpaper/sites/default/files/images/07-2013/3%20shrek%20movie%20wallpaper.jpg') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    font-family: var(--font-shrek) !important;
    font-size: 18px !important;
    color: var(--text-color) !important;
    font-weight: 400 !important;
    animation: fadeIn 0.8s ease-out;
}

/* Remove all other background layers and corner GIFs */
body::before, body::after {
    display: none !important;
}

main, .container, .master-container { background: none !important; border: none !important; box-shadow: none !important; position: relative; z-index: 100; }

/* Shrek ear cursor! */
* { cursor: url(https://cur.cursors-4u.net/movies/mov-1/mov26.cur), auto !important; }

/* --- 4. THEMED MODULE CONTAINERS (PARCHMENT SCROLLS) --- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    background-color: var(--parchment) !important;
    background-image: url('https://www.friendrewind.com/static/uploads/imageb/parchment-texture.jpg') !important;
    background-size: cover;
    border: 10px solid transparent !important;
    border-image: url('https://www.friendrewind.com/static/uploads/imageb/wood-border.png') 30 stretch !important;
    border-radius: 0 !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    position: relative !important;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.6) !important;
    backdrop-filter: none !important;
}

/* --- 6. THEMED HEADERS (INK & PARCHMENT) --- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading,
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    color: var(--text-dark) !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    text-transform: none;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) !important;
    text-align: center !important;
    padding: 20px !important;
    margin: 0 !important;
    border-bottom: 2px solid rgba(61, 43, 31, 0.4) !important;
    line-height: 1.3 !important;
}

/* Onion icon next to the "About Me" title */
.blurbs .heading::before {
    content: '' !important;
    display: inline-block;
    width: 22px !important;
    height: 22px !important;
    margin-right: 15px;
    vertical-align: middle;
    background: url('https://www.friendrewind.com/static/uploads/imageb/onion-icon.png') no-repeat center center / contain;
}


/* --- 7. CONTENT & LINKS --- */
.contact .inner, .url-info p, .table-section .inner, .tunes .inner,
.blog-preview, .blurbs .inner, .friends .inner, #comments .inner {
    padding: 25px !important;
    line-height: 1.8;
}

a {
    color: #4A571C !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-shadow: none !important;
    border-bottom: 1px solid #4A571C;
    transition: all 0.2s ease !important;
    position: relative;
}
a:hover {
    color: var(--parchment) !important;
    background-color: var(--shrek-green) !important;
    border-bottom-color: transparent;
}

/* Mud Splatter on link click */
a:active::after {
    content: '' !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: url('https://www.friendrewind.com/static/uploads/imageb/mud-splatter.png') no-repeat center center / contain;
    animation: mudSplatter 0.3s ease-out;
    pointer-events: none;
}


/* --- 8. FRIENDS & PHOTOS (WANTED POSTERS) --- */
.friends-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 20px;
}
.friends-grid img, 
.table-section .inner img,
.profile-pic img, .user-image img, .general-about .details-below .pic-container img {
    width: 100%;
    height: auto;
    border-radius: 4px !important;
    padding: 8px !important;
    background: var(--mud-brown) !important;
    border: 4px solid var(--swamp-brown) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
    transition: all 0.4s ease !important;
}
.friends-grid img:hover, 
.table-section .inner img:hover,
.profile-pic img:hover, .user-image img:hover, .general-about .details-below .pic-container img:hover {
    transform: scale(1.05) rotate(3deg) !important;
    border-color: var(--shrek-green);
}

/* --- 9. THEMED TABLES --- */
.details-table { border: 2px solid var(--text-dark); border-collapse: collapse; }
.details-table th, .details-table td { 
    border: 1px solid rgba(61, 43, 31, 0.5) !important;
    text-shadow: none !important;
    padding: 12px !important;
}
.details-table th { background: var(--swamp-brown) !important; color: var(--parchment) !important; font-weight: 700; }
.details-table tr:nth-child(even) td { background-color: rgba(92, 61, 46, 0.1) !important; }

/* --- 10. SCROLLBARS (VINES) --- */
::-webkit-scrollbar { width: 16px !important; }
::-webkit-scrollbar-track { background: var(--swamp-brown) !important; }
::-webkit-scrollbar-thumb {
    background: var(--shrek-green) !important;
    border-radius: 2px !important;
    border: 2px solid var(--mud-brown);
}

/* --- 11. HEADER & NAVIGATION (BEWARE OGRE SIGN) --- */
.main-header, .myspace-header {
    background-image: url('https://www.friendrewind.com/static/uploads/imageb/wood-plank.jpg') !important;
    background-size: cover;
    border: 5px solid #4F3423 !important;
    border-radius: 4px !important;
    margin: 20px auto !important;
    padding: 10px !important;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.6) !important;
    width: 95% !important;
}

.top-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 15px !important;
    border-bottom: 3px solid #4F3423 !important;
    background-image: url('https://friendrewind.com/layouts/img/0789c4323a43c30cea758911953ca08d.gif') !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
    background-size: auto !important;
}

/* THIS IS THE FIX FOR THE NAVIGATION */
.main-nav-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* This vertically centers the links */
    padding: 8px 0 !important; /* This gives vertical space */
    background-color: #0d4f8b; /* The blue bar color from your screenshot */
}

.main-nav a, .nav a {
    color: var(--parchment) !important;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: none !important;
    padding: 4px 6px !important;
    margin: 0 3px !important;
    border: none !important;
    transition: all 0.2s ease-in-out !important;
}

.main-nav a:hover, .nav a:hover {
    color: var(--shrek-green) !important;
    transform: scale(1.1);
}

.top-nav .search-box input[type="text"] {
    background: var(--parchment) !important;
    border: 2px solid var(--mud-brown) !important;
    border-radius: 2px !important;
    color: var(--text-dark) !important;
    padding: 8px !important;
    font-family: var(--font-shrek) !important;
    font-size: 16px;
}
.top-nav .search-box input[type="submit"] {
    font-family: var(--font-shrek) !important;
    border-radius: 2px !important;
    border: 2px solid var(--mud-brown) !important;
    color: var(--parchment) !important;
    font-weight: 700 !important;
    background: var(--shrek-green) !important;
    padding: 8px 15px !important;
}</style>