Related
This discussion has been locked.
You can no longer post new replies to this discussion. If you have a question you can start a new discussion

Change Activity Colors

4782305
over 4 years ago

Hi !

I would like to change the color of the activities in Garmin Connect app. For example, orange is set up for running activities and I would like to use another color. Do you know if it is possible? Thanks in advance,

Ane

  • 0 over 4 years ago

    Don't know option for that, but you can force other color in browser global CSS.

     

    For Windows & Firefox - open browser settings folder:
    %USERPROFILE%\AppData\Roaming\Mozilla\Firefox\Profiles\[PROFILE-CODE].default\

    Open or create folder: chrome
    Open or create file: userContent.css

    Add styles:

    @-moz-document domain(garmin.com)
{
 .icon-activity-running {color: red   !important;}
 .icon-activity-walking {color: green !important;}
 .icon-activity-cycling {color: blue  !important;}

 div[title*="Running"] {border-left-color: red   !important;}
 div[title*="Walking"] {border-left-color: green !important;}
 div[title*="Cycling"] {border-left-color: blue  !important;}
}

     

    Styling those icons is easy, because each has own class name (like: .icon-activity-running).

    But borders from the calendar don't have separated classes, some way is to style border depending on an activity title, if you keep an activity's type (like: Running) in title, then above styles will work (translate titles to other language if needed).

    If you need other types, then hover mouse over icon and click right button and choose Inspect, to see its class.

  • 0 over 2 years ago in reply to BunBun!

    Thanks for the tip! 

    But this does not work for the agenda widget in dashboard view, only in the main agenda view

    I looked in the CSS of the dashboard page, only a 'background colour' is specified: class="calendar-item has-tooltip" style="background-color:#04873b"

    Contrary in the agenda view, it does have a distinction, as you quoted. But different colours are already shown there by default.

  • 0 over 2 years ago in reply to Moswen

    It works also for the widget, but set as weekly.

    I guess you want it monthly, so do it similar to border color above, just change it to background.

    a.calendar-item[data-original-title*="Running"] {background-color: red   !important;}

  • 0 over 2 years ago in reply to BunBun!

    The CSS code works like a charm (I use the extension Stylus for this)

    Thank you very much!