Uploaded image for project: 'Jira Data Center'
  1. Jira Data Center
  2. JRASERVER-38890

customizable background color for the search bar

XMLWordPrintable

    • 3
    • 8
    • We collect Jira feedback from various sources, and we evaluate what we've collected when planning our product roadmap. To understand how this piece of feedback will be reviewed, see our Implementation of New Features Policy.

      NOTE: This suggestion is for JIRA Server. Using JIRA Cloud? See the corresponding suggestion.

      When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.


      There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

      Possible Solution

      • making the search bar background color customizable would solve this
      • alternatively, we could de-link the search bar colour with the top bar colour

      Workaround:

      Apply following CSS in the announcement banner:
      Please test this script to see if it breaks any JIRA UI or functionality.
       Thanks to Jordan Hauser for providing updating the following workaround for recent Jira versions

      For testing purposes, I recommend wrapping this is an if statement applying it only to a certain user so that you don't accidentally lock yourself out by breaking the ui, do it like so:

      <script>

let user = AJS.Meta.get("remote-user");

if(user == 'someUserNameThatsNotYourAdmin')

{ document.getElementById("quickSearchInput").style = "background-color: white;"; }
</script>

      Then just log in with the test user/user scriptrunner to swap user context to the affected user.

      Once tested you can remove the first two lines as follows:

      <script>
{ document.getElementById("quickSearchInput").style = "background-color: white;"; }
</script>
 

        1. dark_search_bar2.png
          dark_search_bar2.png
          6 kB
        2. New Design.png
          New Design.png
          10 kB
        3. Old view.png
          Old view.png
          26 kB

            [JRASERVER-38890] customizable background color for the search bar

            Jeff Curry made changes -
            Description Original: {panel:bgColor=#e7f4fa}
            *NOTE:* This suggestion is for {*}JIRA Server{*}. Using {*}JIRA Cloud{*}? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
            {panel}
            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
             * making the search bar background color customizable would solve this
             * alternatively, we could de-link the search bar colour with the top bar colour

            h4. Workaround:

            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            (i) Thanks to [Jordan Hauser|https://jira.atlassian.com/browse/JRASERVER-38890?focusedId=3409441&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-3409441] for providing updating the following workaround for recent Jira versions
            {code:java}
             {code}             		New: {panel:bgColor=#e7f4fa}
            *NOTE:* This suggestion is for {*}JIRA Server{*}. Using {*}JIRA Cloud{*}? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
            {panel}
            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
             * making the search bar background color customizable would solve this
             * alternatively, we could de-link the search bar colour with the top bar colour

            h4. Workaround:

            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            (i) Thanks to [Jordan Hauser|https://jira.atlassian.com/browse/JRASERVER-38890?focusedId=3409441&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-3409441] for providing updating the following workaround for recent Jira versions

            For testing purposes, I recommend wrapping this is an if statement applying it only to a certain user so that you don't accidentally lock yourself out by breaking the ui, do it like so:
            {code}
            <script>

            let user = AJS.Meta.get("remote-user");

            if(user == 'someUserNameThatsNotYourAdmin')

            { document.getElementById("quickSearchInput").style = "background-color: white;"; }
            </script>
            {code}

            Then just log in with the test user/user scriptrunner to swap user context to the affected user.

            Once tested you can remove the first two lines as follows:
            {code:java}
            <script>
            { document.getElementById("quickSearchInput").style = "background-color: white;"; }
            </script>
             {code}
            Jeff Curry made changes -
            Description Original: {panel:bgColor=#e7f4fa}
            *NOTE:* This suggestion is for {*}JIRA Server{*}. Using {*}JIRA Cloud{*}? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
            {panel}
            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
             * making the search bar background color customizable would solve this
             * alternatively, we could de-link the search bar colour with the top bar colour

            h4. Workaround:

            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            (i) Thanks to [Jordan Hauser
            {code:java}
             {code}             		New: {panel:bgColor=#e7f4fa}
            *NOTE:* This suggestion is for {*}JIRA Server{*}. Using {*}JIRA Cloud{*}? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
            {panel}
            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
             * making the search bar background color customizable would solve this
             * alternatively, we could de-link the search bar colour with the top bar colour

            h4. Workaround:

            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            (i) Thanks to [Jordan Hauser|https://jira.atlassian.com/browse/JRASERVER-38890?focusedId=3409441&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-3409441] for providing updating the following workaround for recent Jira versions
            {code:java}
             {code}
            Jeff Curry made changes -
            Description Original: {panel:bgColor=#e7f4fa}
            *NOTE:* This suggestion is for {*}JIRA Server{*}. Using {*}JIRA Cloud{*}? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
            {panel}
            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
             * making the search bar background color customizable would solve this
             * alternatively, we could de-link the search bar colour with the top bar colour

            h4. Workaround:

            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            (i) 
            {code:java}
             {code}             		New: {panel:bgColor=#e7f4fa}
            *NOTE:* This suggestion is for {*}JIRA Server{*}. Using {*}JIRA Cloud{*}? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
            {panel}
            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
             * making the search bar background color customizable would solve this
             * alternatively, we could de-link the search bar colour with the top bar colour

            h4. Workaround:

            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            (i) Thanks to [Jordan Hauser
            {code:java}
             {code}
            Jeff Curry made changes -
            Description Original: {panel:bgColor=#e7f4fa}
              *NOTE:* This suggestion is for *JIRA Server*. Using *JIRA Cloud*? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
              {panel}

            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
            * making the search bar background color customizable would solve this
            * alternatively, we could de-link the search bar colour with the top bar colour


            h4. Workaround:
            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            {code}
            <style>
            #quickSearchInput {
            border-radius: 5em;
            background: rgba(255,255,255,1);
            color: rgba(0, 0, 0, 0.7);
            }

            #quickSearchInput::-webkit-input-placeholder {
                color: rgba(0, 0, 0, 0.7);
            }
            #quickSearchInput:-moz-placeholder {
                /#quickSearchInput FF 4-18 #quickSearchInput/
                color: rgba(0, 0, 0, 0.7);
            }
            #quickSearchInput::-moz-placeholder {
                /#quickSearchInput FF 19+ #quickSearchInput/
                color: rgba(0, 0, 0, 0.7);
            }
            #quickSearchInput:-ms-input-placeholder {
                /#quickSearchInput IE 10+ #quickSearchInput/
                color: rgba(0, 0, 0, 0.7);
            }

            .aui-header .aui-quicksearch::after{
            color: rgba(0, 0, 0, 0.7);
            }
            </style>
            {code}             		New: {panel:bgColor=#e7f4fa}
            *NOTE:* This suggestion is for {*}JIRA Server{*}. Using {*}JIRA Cloud{*}? [See the corresponding suggestion|http://jira.atlassian.com/browse/JRACLOUD-38890].
            {panel}
            When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.

            !dark_search_bar2.png!
            There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

            *Possible Solution*
             * making the search bar background color customizable would solve this
             * alternatively, we could de-link the search bar colour with the top bar colour

            h4. Workaround:

            Apply following CSS in the announcement banner:
            (!) Please test this script to see if it breaks any JIRA UI or functionality.
            (i) 
            {code:java}
             {code}
            SET Analytics Bot made changes -
            UIS Original: 7 New: 3
            SET Analytics Bot made changes -
            UIS Original: 4 New: 7
            SET Analytics Bot made changes -
            UIS Original: 3 New: 4
            SET Analytics Bot made changes -
            UIS Original: 4 New: 3
            SET Analytics Bot made changes -
            UIS Original: 3 New: 4
            SET Analytics Bot made changes -
            UIS Original: 4 New: 3

              dserhiienko Denys Serhiienko (Inactive)
              dsjauwmook davy
              Votes:
              74 Vote for this issue
              Watchers:
              55 Start watching this issue

                Created:
                Updated: