DEV Community

Logan Schmidt
Logan Schmidt

Posted on

How-to use a Custom Start Button Image in Linux Mint

#linuxmint #linux #ui #css

The Problem

I spent a while trying to get a custom Windows XP-style start button to display correctly on my Linux Mint Cinnamon desktop. The button would work sometimes, but the solution was fragile and caused unintended side effects - like the start button image appearing in the Linux Mint Welcome Screen's lower right corner.

What Didn't Work

The gsettings Approach ❌

Initially, I tried using gsettings to force the icon:

gsettings set com.linuxmint.mintmenu applet-icon "file:///home/user/Desktop/start-button.svg"
Enter fullscreen mode Exit fullscreen mode

Why this failed:

  • This sets a system-wide configuration that affects all applications
  • The start button image leaked into other parts of the system (Welcome Screen)
  • It created "messes" that looked unprofessional

The Base64 Data URI Approach ❌

Next, I embedded the PNG image directly into the CSS as a base64 data URI:

background-image: url("data:image/png;base64,iVBORw0KGgo...") !important;
Enter fullscreen mode Exit fullscreen mode

Why this failed:

  • The base64 string was enormous (12KB+ image encoded)
  • The image simply wouldn't display despite correct CSS selectors
  • Overly complex and hard to maintain
  • The approach was "overworked" - too much effort for what should be simple

What Finally Worked ✅

The Simple File Path Solution

The solution is elegantly simple:
Use a relative file path in CSS.

background-image: url("assets/start-button.png") !important;
Enter fullscreen mode Exit fullscreen mode

That's it. No base64 encoding. No gsettings. Just a clean, relative file path.

Step-by-Step Implementation

1. Prepare Your Image

Place your start button image in the theme's assets directory:

~/.themes/Mint-XP/cinnamon/assets/start-button.png
Enter fullscreen mode Exit fullscreen mode

Image specs:

  • Dimensions: 122×40 pixels
  • Format: PNG (transparent background recommended)
  • Size: ~12KB

2. Edit the Theme CSS

Open your theme's CSS file:

~/.themes/Mint-XP/cinnamon/cinnamon.css
Enter fullscreen mode Exit fullscreen mode

Add this CSS block (or modify if it already exists):

/* === Windows XP Start Button Override === */
#panelLeft .applet-box:first-child {
    background-color: transparent !important;
    background-image: url("assets/start-button.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0px center !important;
    background-size: 122px 40px !important;
    min-width: 122px !important;
    width: 122px !important;
    max-width: 122px !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

/* Hide the default icon */
#panelLeft .applet-box:first-child StIcon,
#panelLeft .applet-box:first-child .applet-icon {
    width: 0 !important;
    height: 0 !important;
    icon-size: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the label text */
#panelLeft .applet-box:first-child .applet-label {
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent !important;
}

/* Adjust spacing for next applet */
#panelLeft .applet-box:first-child + .applet-box {
    margin-left: -2px !important;
    padding-left: 0 !important;
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

/* Remove borders from panel elements */
#panelLeft,
#panelLeft .applet-box,
#panelLeft .applet-box:first-child,
#panelLeft .applet-box:first-child + .applet-box,
.panel-launchers,
.panel-launcher,
.panel-launcher:first-child {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hide separators */
#panelLeft .applet-separator,
#panelLeft .applet-separator-line {
    border: none !important;
    background: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure other panels aren't affected */
#panelRight .applet-box:first-child,
#panelCenter .applet-box:first-child,
#panelTop .applet-box:first-child,
#panelBottom .applet-box:first-child {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
}
/* === End Windows XP Start Button Override === */
Enter fullscreen mode Exit fullscreen mode

3. Clear Any gsettings Overrides

Ensure no system-wide settings are interfering:

gsettings set com.linuxmint.mintmenu applet-icon ''
gsettings set org.cinnamon app-menu-icon-name ''
Enter fullscreen mode Exit fullscreen mode

4. Reload Cinnamon

Press Alt+F2, type r, and press Enter to reload Cinnamon.

Key Lessons Learned

1. Keep It Simple

The simplest solution is often the best. A relative file path beat complex base64 encoding.

2. Avoid System-Wide Settings

Using gsettings for theme customization can have unintended consequences. CSS-only solutions are safer and more maintainable.

3. The !important Flag Matters

Cinnamon's CSS has high specificity. Using !important on every property ensures your styles take precedence.

4. Relative Paths Work

CSS file paths are relative to the CSS file location:

  • CSS at: ~/.themes/Mint-XP/cinnamon/cinnamon.css
  • Image at: ~/.themes/Mint-XP/cinnamon/assets/start-button.png
  • Reference as: url("assets/start-button.png")

5. Test Incrementally

When I tested with a solid color background (background-color: red !important;), I confirmed the CSS selector was working. This proved the issue was with the image reference, not the targeting.

Troubleshooting

If your button doesn't appear:

  1. Verify the image exists: 
   ls -lh ~/.themes/YOUR-THEME/cinnamon/assets/start-button.png
Enter fullscreen mode Exit fullscreen mode
  1. Check file permissions: 
   chmod 644 ~/.themes/YOUR-THEME/cinnamon/assets/start-button.png
Enter fullscreen mode Exit fullscreen mode
  1. Test with a solid color first: Replace the background-image line temporarily with: 
   background-color: red !important;
Enter fullscreen mode Exit fullscreen mode

If you see a red box, your selector works and the issue is the image path.

  1. Check for typos in the path:

    • File name is case-sensitive
    • Path is relative to the CSS file
    • No leading slash for relative paths

  2. Clear gsettings:

   gsettings reset com.linuxmint.mintmenu applet-icon
   gsettings reset org.cinnamon app-menu-icon-name
Enter fullscreen mode Exit fullscreen mode

Why This Matters

Custom desktop theming is about more than aesthetics - it's about making your workspace yours. But when solutions are fragile or create side effects, they undermine the experience. This CSS-only approach is:

  • Clean: No system-wide settings pollution
  • Maintainable: Easy to modify or disable
  • Portable: Works across Cinnamon updates
  • Predictable: No side effects in other UI elements

Conclusion

After 5 days of trying complex solutions, the answer was simple: use a relative file path in CSS. Sometimes the best solution is the one that doesn't try to be clever.

If you're customizing Cinnamon themes, remember: CSS file paths, not gsettings, and definitely not base64.

System Info:

  • Linux Mint (Cinnamon Desktop Environment)
  • Theme: Mint-XP (custom modification)
  • Image: 122×40 PNG, ~12KB

Files Modified:

  • ~/.themes/Mint-XP/cinnamon/cinnamon.css (CSS styling)
  • ~/.themes/Mint-XP/cinnamon/assets/start-button.png (image asset)

Feel free to adapt this solution for your own custom panel buttons!

Top comments (0)