Skip to content

2. Customization Guide

Jump to bottom
a9x edited this page Aug 19, 2025 · 2 revisions

Customization Guide

This guide provides a deep dive into customizing the visual appearance of your StarryBio page. While the config.js file handles all the content, this guide will show you how to change fonts, colors, images, and more by editing the style.css and index.html files.

📂 Understanding the File Structure

For visual customization, you will primarily be working with these files and folders:

  • /assets/images/: This folder contains all the images for your site, including your profile picture, favicon, and status icons.
  • style.css: This is the main stylesheet that controls all the colors, spacing, animations, and visual effects.
  • index.html: You will only need to edit this file if you want to change the fonts used on the site.

🖼️ Changing Images

Replacing the default images is the quickest way to personalize your page.

1. Profile Picture

  1. Choose a square image for your profile picture. For best results, use a .webp format to keep the file size small.
  2. Place your new image file into the /assets/images/ folder.
  3. Open config.js and update the profileImage property to match your new file name.
    • Example: "profileImage": "assets/images/my-new-photo.webp"

2. Favicon

The favicon is the small icon that appears in the browser tab.

  1. Create a small, square icon (usually .ico, .png, or .webp).
  2. Place the file in the /assets/images/ folder.
  3. Open index.html, find the <link rel="icon"> tag in the <head>, and update the href attribute to point to your new favicon file.
    • Example: <link rel="icon" type="image/webp" href="assets/images/favicon.webp">

3. Status Icons

You can replace the default status icons (online.webp, idle.webp, etc.) with your own custom images.

  1. Create your new icons. They should be small, square, and preferably have a transparent background.
  2. Place them in the /assets/images/ folder.
  3. Open config.js and update the paths in the statusIndicator.icons object to match your new filenames.

✍️ Changing Fonts

The site uses [Google Fonts](https://fonts.google.com/) for its typography. You can easily swap them out for any other font from their library.

Step 1: Choose Your Fonts on Google Fonts

  1. Go to [fonts.google.com](https://fonts.google.com/) and find the font(s) you want to use.
  2. Select the styles you need (e.g., Regular 400, Bold 700, Black 900).
  3. On the right-hand side, you will see a "Selected family" panel. Click the <link> option under "Use on the web".
  4. Copy the entire <link> tag provided by Google Fonts. It will look something like this: 
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">

Step 2: Update index.html

  1. Open your index.html file.
  2. Find the existing Google Fonts <link> tags in the <head> section.
  3. Delete the old font links and paste the new ones you copied from Google Fonts.

Step 3: Apply the Fonts in style.css

  1. Google Fonts will provide the CSS font-family name to use (e.g., font-family: "Roboto", sans-serif;).
  2. Open your style.css file.
  3. Find the relevant CSS rules and update the font-family property.
    • To change the main body font, edit the body rule.
    • To change the font for your name, edit the .profile-name rule.
    • Example: 
      body {
    font-family: 'Roboto', sans-serif; /* Changed from 'Inter' */
}

🎨 Changing Colors & Styles (style.css)

The style.css file controls the entire visual theme of your page. Here are the key sections you might want to edit.

1. Background Gradient

The animated starfield sits on top of a background gradient. You can change these colors in the body CSS rule.

body {
    /* Edit these two hex codes to change the gradient */
    background: linear-gradient(135deg, #0B1C36 0%, #1A2A4D 40%, #2A3B65 100%);
}

2. Profile Card

The main card has a semi-transparent, blurred background.

.profile-card {
    /* Change the RGBA value to adjust the card's background color and transparency */
    background: rgba(11, 28, 54, 0.6); 
    
    /* Change the border color and transparency */
    border: 1px solid rgba(176, 196, 222, 0.25);
}

3. Text Styles

You can change the colors and effects of the main text elements.

.profile-name {
    /* The profile name uses a gradient for its color. Edit these hex codes. */
    background: linear-gradient(135deg, #E0E7FF 0%, #B0C4DE 50%, #FFFFFF 100%);
    
    /* You can also change the text-shadow for a different glow effect */
    text-shadow: 0 0 15px rgba(224, 231, 255, 0.8);
}

.profile-title {
    /* Change the color of the subtitle/bio text */
    color: #B0C4DE;
}

4. Link Buttons

You can customize the default and hover states of the link buttons.

.link-button {
    /* Default state background color and transparency */
    background: rgba(42, 59, 101, 0.6);
    
    /* Default state text color */
    color: #E0E7FF;
    
    /* Default state border color */
    border: 1px solid rgba(176, 196, 222, 0.3);
}

.link-button:hover {
    /* Hover state background color and transparency */
    background: rgba(176, 196, 222, 0.4);
    
    /* Hover state text color */
    color: #FFFFFF;
}

5. Announcement Banner

The announcement banner has its own set of styles you can modify.

#announcement-banner {
    /* Change the RGBA value to adjust the banner's background color and transparency */
    background: rgba(251, 191, 36, 0.25);

    /* Change the border color */
    border: 1px solid rgba(251, 191, 36, 0.5);

    /* Change the text color */
    color: #FFFFFF;
}

By experimenting with these values, you can create a truly unique theme for your StarryBio page!

Clone this wiki locally