📱 Mobile Customization

Make your mod stand out on mobile by tailoring its appearance and functionality for smaller screens.

🛠️ What is Mobile Customization?

Mobile customization allows you to:

• Change the Opera GX start page logo for mobile devices.
• Optimize assets like wallpapers and themes for mobile resolutions.
• Create a seamless browsing experience across devices.

📝 Adding Mobile-Specific Features

1. Mobile Start Page Logo

Replace the default logo with a custom image for mobile users.

Update manifest.json

{
  "mobile_image_overrides": [
    {
      "id": "mobile_logo_01",
      "images": {
        "start_page_logo": "assets/mobile/logo.png"
      },
      "name": "Custom Mobile Logo"
    }
  ]
}

• id: A unique identifier for the mobile asset.
• start_page_logo: Path to your custom logo image.

📂 Asset Path: Save your mobile logo in assets/mobile/.

2. Mobile-Friendly Wallpapers

Ensure wallpapers display beautifully on mobile screens.

Best Practices

• Use images optimized for vertical resolutions (e.g., 1080x1920px).
• Test the dark and light versions for readability.

3. Themes for Mobile

Adjust colors for better visibility on smaller screens.

Update manifest.json

{
  "theme": [
    {
      "id": "mobile_theme_01",
      "name": "Mobile Dark Theme",
      "dark": {
        "gx_accent": { "h": 200, "s": 50, "l": 40 }
      },
      "light": {
        "gx_accent": { "h": 200, "s": 60, "l": 50 }
      }
    }
  ]
}

🔧 Optimizing for Performance

✅ Keep File Sizes Small

• Use compressed images (.jpg for photos, .png for logos).
• Reduce the size of audio and video assets.

📱 Test Responsiveness

• Test your mod on multiple screen sizes.
• Verify assets load quickly and display correctly.

📖 Learn More

• Explore Wallpapers and Themes for more asset details.
• Check out the Testing and Debugging guide for troubleshooting tips.

🚀 With mobile customization, your mod will look stunning and perform seamlessly on any device!