🎨 How to Change the Colors of Radio Universal v1.2 (Step-by-Step Guide for Beginners)

If you want to adapt the colors of the Radio Universal v1.2 player to your style or brand, here we teach you step by step how to do it—even if you have no programming knowledge.

🧭 Where Are the Colors?

The colors are mainly defined in the styles.css file. There you’ll find instructions like:

Each line visually affects a part of the player. Here’s an explanation of the most important ones:

🎯 Main Colors You Can Modify

• background-color: #0A0118; → Changes the player’s general background (dark by default).
• color: #ffffff; → Changes the text color (e.g., song title or artist name).
• fill: #ec4899; → Affects SVG icons like the play, stop, or volume buttons. This hot pink is the accent color.
• border-color: #ffffff; → Changes the button borders, if defined.

📝 Practical Example

If you want the player to have a dark blue background and red buttons, you can do the following:

🛠️ How to Change the Colors Step by Step

1. Open the project folder on your computer.
2. Locate the file named styles.css.
3. Open it with a text editor such as:
   • Visual Studio Code (recommended)
   • Notepad++
   • Notepad (on Windows, though less convenient)
4. Look for lines containing: background-color, color, fill, stroke, etc.
5. Replace the hexadecimal values (like #ec4899 ) with the colors you prefer. You can use:
   • Hexadecimal codes (#3498db )
   • RGB format (rgb(52, 152, 219))
   • Basic names (blue, white, black)
6. Save the file and open index.html in your browser to see the results.

🔎 What Parts Can I Customize?

Here are specific examples of visual elements and how to identify them:

• Main background: look for body or .container.
• Play button: look for .button-play.
• Song text: look for .track-info or .song-title.
• Icon colors (SVG): look for fill inside .icon svg or similar selectors.

📌 Where to Find Color Codes?

We recommend using this tool:

There you can visually choose a color and copy its hexadecimal code to use.

✅ Custom Colors!

With these changes, you can adapt the player to match your brand, website, or personal preferences.

Remember to save a copy of the original file before editing in case you want to revert the changes.