Do I need to know HTML or CSS to use the Visual Builder?

No. The Visual Builder is entirely point-and-click with sliders, color pickers, and dropdowns. It writes the CSS for you behind the scenes. Advanced users can optionally switch to the Advanced CSS tab for hand-coded tweaks.

Can I edit a layout after I save it?

Yes. Go to My Layouts, click Edit on any layout, and the builder reopens with every slider and color exactly where you left it.

How do I add a background image?

Expand the Page & Background section, paste an image URL into the Background Image field, or click Browse Gallery to pick from the built-in library of free images.

How long does the preview thumbnail take to generate?

Usually 10-30 seconds after you save. If it does not appear, refresh My Layouts after a minute.

Can I make a layout public so other users can use it?

Yes. Toggle Make this layout public in the sidebar before saving. Your layout shows up in the community gallery for other users to apply.

Tutorial

Visual Builder Tutorial

Name: FriendRewind
Author: FriendRewind

Design your entire MySpace-style profile with sliders and color pickers - no coding required. Takes about 5 minutes from blank to done.

New to the layout builder? Start at the top and work your way down. Each section builds on the last. If you just want to change one thing, use the table of contents on the left to jump straight to it.

11 Getting Started

The Visual Builder lets you design your entire MySpace-style profile with sliders, color pickers, and dropdowns - no coding required. It writes the CSS for you behind the scenes.

To open it:

Go to My Layouts → Create New Layout.
Make sure the Visual Builder tab is active (it is by default).
Give your layout a name on the left sidebar - that's required before saving.
Start tweaking the sections below and watch your profile preview update.

Note: You can switch between the Visual Builder and the Advanced CSS tab at any time - your work carries over both ways.

22 Layout Details (Sidebar)

The left sidebar is where your layout's identity lives. None of these affect the look - just the listing info.

Layout Name *Required. Shown in your My Layouts list and (if public) in the gallery.

DescriptionOptional. One or two sentences about your layout's look.

CategoryPick a style like scene, gothic, kawaii, or hit + Custom Category to make your own.

Make this layout publicToggle this on to publish to the community gallery. Other users can then apply your layout.

33 Global Styles & Typography

This section controls things that apply to your entire page - fonts, base text colors, and your custom cursor.

Page Font - pick from the built-in Google Fonts list. Fancy script fonts look great for scene/kawaii styles; monospace for hacker aesthetic.
Body Text - the default color of all text on your page.
Headings - color of section titles like "About Me" and "Interests".
Links - color of all clickable links.
Custom Cursor URL - paste a .cur, .png, or .gif URL and every click gets that cursor. Use the Cursor button to browse presets.

Note: Readable combos are usually dark text on a light background OR light text on a dark background.

44 Page & Background

This is where the big visual impact happens - your background, hero image, and page-wide overlays.

Background Image - paste an image URL or click Browse Gallery to pick from the built-in image library. Tiled backgrounds (small repeating patterns) give a true Y2K look.
Hero Image (Header) - optional image that appears at the top of your profile, like a banner. Animated GIFs work great here.
Profile Row Background - the strip behind your display name and avatar.
Avatar Animation - make your profile picture rotate, pulse, or shake on load.
Animated Overlay URL - a transparent GIF layer that sits over your whole page (falling snow, sparkles, hearts, static). Great for scene energy.
Overlay Opacity - how see-through the overlay is. Keep it low (0.1-0.3) or the page gets busy fast.

55 Navigation Bar

The top site nav bar can be restyled so it matches your layout instead of clashing with it.

Header Background - solid color for the nav bar strip.
Header Image - optional tiled or stretched image behind the nav links.
Nav Link Color - the default text color for the menu items.
Nav Link Hover - color the menu items turn when you mouse over them.

66 Content Boxes

Content boxes are the individual cards on your profile - About Me, Interests, Contact, Comments, Top Friends, etc. This is where you match the "box" aesthetic to your overall theme.

General (applies to all boxes):

General Opacity - how see-through all boxes are. Set to 0.85 for a subtle "glass" effect that shows your background through.
General Border Radius - how rounded the box corners are. 0 = sharp, 20+ = bubble.

Contact Box (the Add/Message/Follow buttons column):

Header/Border - color of the top strip and outline.
Header Text - color of text on that strip.
Border Width / Radius - thickness and roundness of the outline.
Box Animation - pulse, glow, shake, float. Use sparingly or the page becomes motion-sick.

Content Boxes (About Me, Interests, Blog, etc.): Same controls as Contact but applied to the main content cards.

77 Module Pictures

This advanced section lets you set a different background image for each individual box on your profile - so About Me could have a sparkle background while Interests has a star field.

Expand the Module Pictures section.
For each module listed, paste an image URL into its field.
Leave blank to skip a module and use the general background.

Note: Keep the images dark with high contrast so white box text stays readable, or tint them using the opacity slider back in the Content Boxes section.

88 Finding Free Images

You don't need to hunt Google Images for backgrounds. FriendRewind has a built-in Image Gallery with hundreds of free-to-use images, GIFs, overlays, and pixel graphics organized by color and style.

On the left sidebar, click Browse Image Gallery.
Pick a color category or search.
Click any image - the URL is auto-copied to your clipboard.
Paste it into any field in the builder (backgrounds, cursor, overlay, module images).

Note: The gallery is organized into folders like Pink, Black, Glitter, Stars. Pick the folder that matches your style and you'll find matching assets instantly.

99 Saving & Preview Thumbnails

When your layout looks right, hit Create Layout (or Save Changes if editing) in the sidebar.

Your CSS is saved to your account instantly.
A preview thumbnail is auto-generated in the background (takes 10-30 seconds). Refresh My Layouts in a minute to see it.
If you toggled Make this layout public, it's now in the community gallery for others to apply.

Name is required. If you forget to enter a Layout Name in the sidebar, the save will fail with an error at the top of the page.

1010 Editing a Layout Later

Nothing's permanent. You can come back and tweak any layout forever.

Go to My Layouts.
Find the layout you want to change.
Click the Edit button on its card.
The builder reopens with every slider, color, and image exactly where you left them - including whether you used the visual builder, custom CSS, or both.

Note: If you want to make a variation without losing your original, just make a small change and save - but rename it first. Otherwise you overwrite the original.

11? Troubleshooting

My background image isn't showing up.

Make sure the URL ends in .jpg, .png, .gif, or .webp - not an HTML page URL.
Right-click → Copy image address (not Copy link address).
Some sites block hotlinking. If a URL works in a new browser tab but not here, try uploading the image somewhere else (Imgur, or the built-in Image Gallery).

My text is unreadable against my background. Go back to Global Styles → change Body Text color. Or add an overlay box color via Content Boxes → opacity 0.85 with a solid color.

The preview on my profile looks different than what I designed. Hard-refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac). Your browser is caching the old CSS.

My layout saved but looks broken on my profile. That usually means the generated CSS conflicted with a manual edit in the Advanced CSS tab. Open the layout to edit, clear the Advanced CSS tab, and re-save.

Still stuck? Post in the Forum - other users and the FriendRewind team answer there regularly.