• Browser
  • Mail
  • News
  • Community
  • About
Register Login
HomeBlogsForumThemesContributeSocial

Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Mail, Calendar & Feeds
    3. Mail, Calendar & Feeds Feature Requests
    4. Coloured Email Labels

    Coloured Email Labels

    Mail, Calendar & Feeds Feature Requests
    mail
    13
    34
    3.3k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • WildEnte
      W
      WildEnte Soprano Patron @wanageeska
      last edited by WildEnte

      @wanageeska OK, here the label itself is colored, not the entire line. Makes sense 🙂

      (edited a nonsensical "it" into a "not")

      Usually on Win11 running Vivaldi Snapshot builds. Opinionated about working efficiently with email. Folders are evil | Mail workflow: receive, read, reply, mark as read, done.

      1 Reply Last reply Reply Quote 2
      • jumpsq
        J
        jumpsq
        last edited by jumpsq

        I've just been made aware by @josephj11 (thanks!) that there are colour tags in Thunderbird. Judging now from @wanageeska's screenshots, I do agree that probably coloured tags make more sense for vivaldi, but any form of colouring will be an advantage and I also somehow like the line colouring (especially if it's set automatically via filters, this seems to be neat). :>

        // DId you already create a bug report as suggested and would mind to share its ID?

        arch linux. swaywm. vivaldi-snapshot. m3.

        1 Reply Last reply Reply Quote 2
        • W
          wanageeska
          last edited by

          Hey @jumpsq, sorry for slow reply... I finally got around to submitting a bug report this morning. ID is VB-87784.

          1 Reply Last reply Reply Quote 1
          • Denyerec
            D
            Denyerec
            last edited by

            Came here to suggest exactly this.

            A frustration is that the classes assigned to the row elements are not at the row level, such as it is, we're not able to apply our own styles to labelled mails to solve the problem in the short term.

            EG:

            <div class="mail_entry unread" data-id="32409"><label><span class="mail-status-indicator read-status"><svg ... />
                        <circle strokewidth="2" cx="8" cy="8" r="3"></circle>
                        </svg>
                    </span></label><label class="subject" style="width: var(--subjectWidth); margin-left: 0px;"><span>Yesterday's
                        Forum Activity (from UKworkshop.co.uk)</span></label><label
                    class="from"><span>UKworkshop.co.uk</span></label><label class="labels">
                    <div class="adjustment-mail-labels">
                        <div>
                            <div class="MailLabels-Observer">
                                <ul class="MailLabels-Container" style="padding-left: unset;">
                                    <li title="Important" class="MailLabels-Label MailLabels-Tooltip">+1</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </label><label class="mail-status-indicator"></label><label class="maildate"><span>05:19</span></label></div>
            
            

            The key bit being:

            <li title="Important" class="MailLabels-Label MailLabels-Tooltip">+1</li>
            
            

            Obviously at this point in the chrome generation, we know we've got labels and we know what they are. Now if that could just be applied to the container like so... :

            <div class="mail_entry unread MailLabels-Important MailLabels-ToDo" data-id="32409"> ...
            

            We could do whatever we want with the emails.
            This issue of burying status classes at the bottom of the element heirarchy rather than the top crops up all over the place, and it's frustrated the hell out of me. Wouldn't be a problem if Chromium supported :has() pseudoselector, but as of yet it does not.

            1 Reply Last reply Reply Quote 1
            • T
              thetrigger
              last edited by

              I just found a way https://github.com/thetrigger/Vivaldi-colored-labels

              we can use :has selector supported by chromium to get the whole row

              1 Reply Last reply Reply Quote 5
              • jumpsq
                J
                jumpsq
                last edited by

                Thank you 🙂

                arch linux. swaywm. vivaldi-snapshot. m3.

                1 Reply Last reply Reply Quote 2
                • floresarts
                  F
                  floresarts @wanageeska
                  last edited by

                  @wanageeska As a graphic designer and very visual learner, I applaud your use of color as a wayfinding technique 👏 but mostly because I just happen to organize my in-box the same way. 😉 Sadly, I deleted the default labels too quickly, thinking I could edit the names while the colors would remain. Sad face.

                  1 Reply Last reply Reply Quote 0
                  • shifte
                    S
                    shifte
                    last edited by shifte

                    Hmm, that should do. 🙃

                    #mail_view div.tree-item:has(li[title='Important']) { color:red; }
                    #mail_view div.tree-item:has(li[title='Work']) { color:orange; }
                    #mail_view div.tree-item:has(li[title='Personal']) { color:green; }
                    #mail_view div.tree-item:has(li[title='To Do']) { color:blue; }
                    #mail_view div.tree-item:has(li[title='Later']) { color:violet; }
                    

                    label.png

                    VAIO73
                    V
                    1 Reply Last reply
                    Reply Quote 3
                    • VAIO73
                      V
                      VAIO73 @shifte
                      last edited by

                      @shifte how it works?as I set it up???

                      shifte
                      S
                      1 Reply Last reply
                      Reply Quote 0
                      • shifte
                        S
                        shifte @VAIO73
                        last edited by

                        @VAIO73
                        https://forum.vivaldi.net/topic/10549/modding-vivaldi
                        Open vivaldi://experiments
                        Enable "Allow for using CSS modifications"
                        Open Appearance section in settings
                        Choose the folder you want to use
                        Place your CSS files inside it
                        Restart Vivaldi to see them in effect

                        VAIO73
                        V
                        Zalex108
                        Z
                        2 Replies Last reply
                        Reply Quote 2
                        • VAIO73
                          V
                          VAIO73 @shifte
                          last edited by VAIO73

                          @shifte 2023-01-28 12.49.30 vivaldi 7c4788b74ab0.jpg
                          custom.css.jpg

                          I have enabled and add custom.css on directory, and not works

                          SORRY..., WORKS ony English version, but when I switch vivaldi to another language it doesn't work that way...

                          1 Reply Last reply Reply Quote 0
                          • Zalex108
                            Z
                            Zalex108 Moderator @shifte
                            last edited by

                            @shifte said in Coloured Email Labels:

                            Open Appearance section in settings
                            Choose the folder you want to use
                            Place your CSS files inside it
                            Restart Vivaldi to see them in effect

                            👆

                            @VAIO73

                            "You cannot know the meaning of your life until you are connected to the power that created you" · Shri Mataji Nirmala Devi

                            VAIO73
                            V
                            2 Replies Last reply
                            Reply Quote 0
                            • VAIO73
                              V
                              VAIO73 @Zalex108
                              last edited by

                              @Zalex108 works only English version vivaldi, but when I switch vivaldi to another language it doesn't work that way...

                              1 Reply Last reply Reply Quote 0
                              • VAIO73
                                V
                                VAIO73 @Zalex108
                                last edited by

                                @Zalex108 colored label works only in English language mutation, when I switch it to another language, you are all in black and white

                                Zalex108
                                Z
                                2 Replies Last reply
                                Reply Quote 1
                                • Zalex108
                                  Z
                                  Zalex108 Moderator @VAIO73
                                  last edited by Zalex108

                                  @VAIO73

                                  Finding the Language Name for that Labels and Duplicating the code for those and replacing the names should work.

                                  Keeping English also in case of future Language toggle.

                                  "You cannot know the meaning of your life until you are connected to the power that created you" · Shri Mataji Nirmala Devi

                                  VAIO73
                                  V
                                  1 Reply Last reply
                                  Reply Quote 3
                                  • Zalex108
                                    Z
                                    Zalex108 Moderator @VAIO73
                                    last edited by

                                    @VAIO73

                                    https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools/

                                    "You cannot know the meaning of your life until you are connected to the power that created you" · Shri Mataji Nirmala Devi

                                    1 Reply Last reply Reply Quote 1
                                    • VAIO73
                                      V
                                      VAIO73 @Zalex108
                                      last edited by

                                      @Zalex108 Great, works, but only line, not label... 🙂

                                      vivaldi.jpg

                                      1 Reply Last reply Reply Quote 3
                                      • shifte
                                        S
                                        shifte
                                        last edited by shifte

                                        @VAIO73

                                        Great, works, but only line, not label... 🙂

                                        You're right!
                                        Labels color doesn't change in Slovak UI.
                                        Probably it's a Vivaldi bug.

                                        ↓ Slovak version

                                        #mail_view div.tree-item:has(li[title='Dôležité']) { color:red; }
                                        #mail_view div.tree-item:has(li[title='Práca']) { color:orange; }
                                        #mail_view div.tree-item:has(li[title='Osobné']) { color:green; }
                                        #mail_view div.tree-item:has(li[title='Urobiť']) { color:blue; }
                                        #mail_view div.tree-item:has(li[title='Na neskôr']) { color:violet; }
                                        
                                        .MailLabels-Label[title='Dôležité'] { background-color:red; }
                                        .MailLabels-Label[title='Práca'] { background-color:orange; }
                                        .MailLabels-Label[title='Osobné'] { background-color:green; }
                                        .MailLabels-Label[title='Urobiť'] { background-color:blue; }
                                        .MailLabels-Label[title='Na neskôr'] { background-color:violet; }
                                        
                                        .mail_entry.mail_entry.unread .from,
                                        .mail_entry.mail_entry.unseen .from,
                                        .mail_entry.mail_entry.unread .subject,
                                        .mail_entry.mail_entry.unseen .subject {
                                        font-weight: 700;
                                        }
                                        

                                        0128.png

                                        VAIO73
                                        V
                                        1 Reply Last reply
                                        Reply Quote 3
                                        • VAIO73
                                          V
                                          VAIO73 @shifte
                                          last edited by

                                          @shifte 👏 👏 👏 YOU ARE THE BEST....!!! 👍 👍 👍 THANK YOU...2023-01-28 14.27.40 vivaldi 6a694d8df83f.jpg

                                          shifte
                                          S
                                          1 Reply Last reply
                                          Reply Quote 1
                                          • shifte
                                            S
                                            shifte @VAIO73
                                            last edited by

                                            (VB-94848) Labels color does not change In non-English UI.

                                            0128_1.png

                                            VAIO73
                                            V
                                            gmg
                                            G
                                            2 Replies Last reply
                                            Reply Quote 2
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            • 1
                                            • 2
                                            • 1 / 2
                                            • First post
                                              Last post

                                            Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.

                                            Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status