Bug 11042 - Color issue for selected tab under search box
Summary: Color issue for selected tab under search box
Status: CLOSED MOVED
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: 3.12
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Ketan Kulkarni
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2013-10-11 19:48 UTC by Shane Sammons
Modified: 2014-11-29 09:13 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Image of color issue & element inspector. (64.15 KB, image/png)
2013-10-11 19:48 UTC, Shane Sammons
Details
Updated staff-global.css (1.34 KB, patch)
2013-10-26 04:21 UTC, Ketan Kulkarni
Details | Diff | Splinter Review
Bug 11042: Updated staff global.css so that it does not override rules in custom.css (1.75 KB, patch)
2014-01-15 16:06 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Shane Sammons 2013-10-11 19:48:55 UTC
Created attachment 21975 [details]
Image of color issue & element inspector.

When trying to customize colors for the staff/admin area you will encounter a color code marked with !important in the CSS staff-global.css.

Upon copying the CSS code block and making changes to the color, the staff-global.css color will over ride your select, even with important left on the color statement.

Examples:
****My Custom Code:****

#header_search ul.ui-tabs-nav li.ui-tabs-selected {
background-color: #FFFFF1;
border: 1px solid #800000; !important;
border-top: 0 !important;
top: -1px;
}

****staff-global.css code****

#header_search ul.ui-tabs-nav li.ui-tabs-selected {
    background-color : #FFFFF1;
    border: 1px solid #85CA11 !important;
    border-top: 0 !important; top: -1px;
}


Notes:
I am using the Home › Administration › System preferences > intranetcolorstylesheet option for the CSS file to put my code it. 

Coding is done via SSH on the system level to my file called custom-login.css.

I think the solution is just to remove the !important; statement off the code.
Comment 1 Ketan Kulkarni 2013-10-26 04:21:42 UTC Comment hidden (obsolete)
Comment 2 Jonathan Druart 2014-01-15 16:06:36 UTC
Created attachment 24411 [details] [review]
Bug 11042: Updated staff global.css so that it does not override rules in custom.css

Test plan:
put
\#header_search ul.ui-tabs-nav li.ui-tabs-selected {
  background-color: #FFFFF1;
  border: 1px solid #800000; !important;
  border-top: 0 !important;
  top: -1px;
}
in the pref IntranetUserCSS.

Go on the intranet main page.
Look at the borders of the selected tab in the search header.
They should be burgundy-coloured.

Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Comment 3 Jonathan Druart 2014-01-15 16:09:18 UTC
Owen, do you agree with this patch?
Comment 4 Owen Leonard 2014-01-15 20:36:09 UTC
I don't find that this patch solves the problem completely: The tab border color only changes on the sides, not on the bottom.

Am I not seeing what you're seeing Jonathan?

Removing instances of !important is a good goal in general, and I note that the latest version of jQueryUI doesn't have the same use of !important that 1.8.23 has. The real solution to this bug may be an upgrade to jQueryUI.
Comment 5 Jonathan Druart 2014-03-27 11:39:38 UTC
I confirm this is fixed by bug 11570.