Bugzilla – Attachment 7933 Details for
Bug 7584
Update cart and lists buttons style using CSS3 features
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
[SIGNED-OFF] Bug 7584 - Update cart and lists buttons style using CSS3 features
SIGNED-OFF-Bug-7584---Update-cart-and-lists-button.patch (text/plain), 11.65 KB, created by
Nicole C. Engard
on 2012-02-28 19:08:29 UTC
(
hide
)
Description:
[SIGNED-OFF] Bug 7584 - Update cart and lists buttons style using CSS3 features
Filename:
MIME Type:
Creator:
Nicole C. Engard
Created:
2012-02-28 19:08:29 UTC
Size:
11.65 KB
patch
obsolete
>From 0188a0ed7537dc4930f20a467c48138ad9b9c75a Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Wed, 22 Feb 2012 15:23:12 -0500 >Subject: [PATCH] [SIGNED-OFF] Bug 7584 - Update cart and lists buttons style using CSS3 features > >Replacing styling of cart and lists buttons with CSS3 features: >border-radius, background-gradient, multiple backgrounds. While >the CSS is a little more complicated, the markup is much simpler >which should make customization simpler. > >Browsers tested: > >Firefox 10 on Windows 7 >Chrome 17 on Windows 7 >Opera 11 on Windows 7 >Internet Explorer 8 on Windows 7 (no rounded corners or background images) > >Firefox 9 on Ubuntu 11.10 >Chrome 16 on Ubuntu 11.10 >Opera 11 on Ubuntu 11.10 > >Internet Explorer 6 on Windows XP (looks acceptably bad) > >Signed-off-by: Nicole C. Engard <nengard@bywatersolutions.com> > >Also tested in: > >Safari on Mac OS X >Firefox 10 on Mac OS X >Chrome on Mac OS X > >All the above tests passed >--- > koha-tmpl/opac-tmpl/prog/en/css/opac.css | 194 ++++++++------------- > koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc | 4 +- > koha-tmpl/opac-tmpl/prog/en/js/script.js | 3 +- > 3 files changed, 75 insertions(+), 126 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css >index f2b1467..c4cb401 100644 >--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css >+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css >@@ -1679,110 +1679,101 @@ span.starMT { > } > > #cartmenulink, #listsmenulink { >+ background-repeat: no-repeat; >+ -webkit-border-radius: 5px; >+ -moz-border-radius: 5px; >+ border-radius: 5px; > display : block; > position : relative; >- background : #aaa; >- padding : 5px; > float : left; > color : #333; > text-decoration : none; > cursor : pointer; >+ font-size : 105%; >+ font-weight : bold; >+ line-height : 185%; >+ margin-left : 1.5em; >+ padding : .3em .7em; > } > >- #cartmenulink *, #listsmenulink * { >- font-style : normal; >- background-image : url(../../images/button-background.png); >- background-repeat : no-repeat; >- display : block; >- position : relative; >-} >- >- #cartmenulink i, #listsmenulink i { >- background-position : top left; >- position : absolute; >- margin-bottom : -5px; >- top : 0; >- left : 0; >- width : 5px; >- height : 5px; >+#listsmenulink { >+ background : #9FBFFF; >+ background: url("../../images/list.gif"),-moz-linear-gradient(top, #d7e5ff 0%, #b1cbff 50%, #9fbfff 100%); /* FF3.6+ */ >+ background: url("../../images/list.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7e5ff), color-stop(50%,#b1cbff), color-stop(100%,#9fbfff)); /* Chrome,Safari4+ */ >+ background: url("../../images/list.gif"),-webkit-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Chrome10+,Safari5.1+ */ >+ background: url("../../images/list.gif"),-o-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Opera 11.10+ */ >+ background: url("../../images/list.gif"),-ms-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* IE10+ */ >+ background: url("../../images/list.gif"),linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* W3C */ >+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e5ff', endColorstr='#9fbfff',GradientType=0 ); /* IE6-9 */ >+ background-position: 85% 46%; >+ background-repeat: no-repeat; >+ border: 1px solid #629DCF; >+ color : #006699; >+ padding-right: 20px; > } > >- #cartmenulink span, #listsmenulink span { >- background-position : bottom left; >- left : -5px; >- padding : 0 0 5px 10px; >- margin-bottom : -5px; >+#listsmenulink:hover { >+ background-color : #b8d0e6; >+ background: url("../../images/list.gif"),-moz-linear-gradient(top, #e2ecf5 0%, #c3d8ea 50%, #b8d0e6 100%); /* FF3.6+ */ >+ background: url("../../images/list.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2ecf5), color-stop(50%,#c3d8ea), color-stop(100%,#b8d0e6)); /* Chrome,Safari4+ */ >+ background: url("../../images/list.gif"),-webkit-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Chrome10+,Safari5.1+ */ >+ background: url("../../images/list.gif"),-o-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Opera 11.10+ */ >+ background: url("../../images/list.gif"),-ms-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* IE10+ */ >+ background: url("../../images/list.gif"),linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* W3C */ >+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2ecf5', endColorstr='#b8d0e6',GradientType=0 ); /* IE6-9 */ >+ background-repeat: no-repeat; >+ background-position: 85% 46%; > } >-/* For IE7 */ >- *:first-child+html #cartmenulink span { padding-top : 3px; padding-bottom : 7px; } >- *:first-child+html #listsmenulink span { padding-top : 5px; } > >- #cartmenulink span i, #listsmenulink span i { >- background-position : bottom right; >- margin-bottom : 0; >- position : absolute; >- left : 100%; >- width : 10px; >- height : 100%; >- top : 0; >+#cartmenulink { >+ background: #98CB58; /* Old browsers */ >+ background: url("../../images/cart.gif"),-moz-linear-gradient(top, #d5eaba 0%, #b7db8a 50%, #98cb59 100%); /* FF3.6+ */ >+ background: url("../../images/cart.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5eaba), color-stop(50%,#b7db8a), color-stop(100%,#98cb59)); /* Chrome,Safari4+ */ >+ background: url("../../images/cart.gif"),-webkit-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Chrome10+,Safari5.1+ */ >+ background: url("../../images/cart.gif"),-o-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Opera 11.10+ */ >+ background: url("../../images/cart.gif"),-ms-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* IE10+ */ >+ background: url("../../images/cart.gif"),linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* W3C */ >+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5eaba', endColorstr='#98cb59',GradientType=0 ); /* IE6-9 */ >+ background-position: 15% 46%; >+ background-repeat: no-repeat; >+ border: 1px solid #5EA28C; >+ color : #336600; >+ padding-left : 30px; > } > >- #cartmenulink span span, #listsmenulink span span { >- background-position : top right; >- position : absolute; >- right : -10px; >- margin-left : 10px; >- top : -5px; >- height : 0; >+#cartmenulink:hover { >+ background-color : #BFDE96; >+ background: url("../../images/cart.gif"),-moz-linear-gradient(top, #e5f1d4 0%, #cbe4aa 50%, #c0de98 100%); /* FF3.6+ */ >+ background: url("../../images/cart.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5f1d4), color-stop(50%,#cbe4aa), color-stop(100%,#c0de98)); /* Chrome,Safari4+ */ >+ background: url("../../images/cart.gif"),-webkit-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Chrome10+,Safari5.1+ */ >+ background: url("../../images/cart.gif"),-o-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Opera 11.10+ */ >+ background: url("../../images/cart.gif"),-ms-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* IE10+ */ >+ background: url("../../images/cart.gif"),linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* W3C */ >+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f1d4', endColorstr='#c0de98',GradientType=0 ); /* IE6-9 */ >+ background-repeat: no-repeat; >+ background-position: 15% 46%; > } > >-* html #cartmenulink span, * html #cartmenulink i, * html #listsmenulink span, * html #listsmenulink i { >- float : left; >- width : auto; >- background-image : none; >- cursor : pointer; >-} >-* html #cartmenulink span, * html #listsmenulink span { >- padding-top : 5px; >+/* IE 6 & 7 don't do multiple backgrounds, so remove extra padding */ >+* html #listsmenulink, >+*+html #listsmenulink { >+ padding-right : .7em; > } > >-#cartmenulink span#carticon { >- background: transparent url("../../images/cart.gif") top left no-repeat; >- position: static; >- width : 14px; >- height:14px; >- margin: 0.35em 0.45em 0 0.2em; >- padding:0; >- float: left; >+/* IE 6 & 7 don't do multiple backgrounds, so remove extra padding */ >+* html #cartmenulink, >+*+html #cartmenulink { >+ padding-left : .7em; > } > >+/* IE 8 doesn't do multiple backgrounds, so remove extra padding */ > #listsmenulink { >- background : #9FBFFF; >+ padding-right: .7em\0/; > } > >+/* IE 8 doesn't do multiple backgrounds, so remove extra padding */ > #cartmenulink { >- background : #98CB58; >- color : #336600; >- font-size : 105%; >-} >- >-#cartmenulink[class], #listsmenulink[class] { >- background-image : url(../../images/button-background-gradient.png); >- background-position : left top; >-} >- >-#listsmenulink:hover { >- background-color : #b8d0e6; >-} >- >-#cartmenulink:hover { >- background-color : #BFDE96; >-} >- >-#cartmenulink img { >- background-image : none; >- display : inline; >- padding : 3px 3px 0 3px; >+ padding-left: .7em\0/; > } > > #cartmenulink span#basketcount { >@@ -1814,49 +1805,6 @@ span.starMT { > top : auto; > } > >-a#listsmenulink, a#listsmenulink:hover { >- color : #006699; >- font-size : 105%; >- font-weight : bold; >- line-height : 185%; >- margin-left : 1.5em; >-} >- >-a#cartmenulink, a#cartmenulink:hover { >- color : #336600; >- font-size : 105%; >- font-weight : bold; >- line-height : 185%; >- margin-left : 1.5em; >-} >-* html a#cartmenulink { >- padding-top: 0; >-} >- * html a#cartmenulink:hover { >- padding-top : 0; >-} >-/* For IE7 */ >-*:first-child+html a#listsmenulink { padding-top : 0; } >-*:first-child+html a#listsmenulink:hover { padding-top : 0; } >-*:first-child+html a#cartmenulink { padding-top : 0; } >-*:first-child+html a#cartmenulink:hover { padding-top : 0; } >-*:first-child+html #cartmenulink span i{ top : -4px; } >-*:first-child+html #listsmenulink span i { top : -5px; } >- >-#listsmenulink img { >- background-image : none; >- display : inline; >- padding : 0 0 2px 0; >-} >- >-* html #cartmenulink { >- border : 1px solid #336600; >-} >- >-* html #listsmenulink { >- border : 1px solid #006699; >-} >- > ul.ui-tabs-nav li { > margin-right : .5em; > } >diff --git a/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc >index eb36f6f..cfcf977 100644 >--- a/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc >+++ b/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc >@@ -100,11 +100,11 @@ > <input type="submit" value="Go" id="searchsubmit" class="left" /> > [% IF ( opacbookbag ) %]<span id="cmspan"></span>[% END %] > >-[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink" class=""><i></i><span><i></i><span></span>Lists </span></a>[% END %] >+[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink">Lists</a>[% END %] > </form> > [% ELSE %] > <div style="width:80%;*margin-bottom:-30px;"> >-[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink" class=""><i></i><span><i></i><span></span>Lists </span></a>[% END %][% IF ( opacbookbag ) %]<span id="cmspan"></span>[% END %] >+[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink">Lists</a>[% END %][% IF ( opacbookbag ) %]<span id="cmspan"></span>[% END %] > </div> > [% END %] > >diff --git a/koha-tmpl/opac-tmpl/prog/en/js/script.js b/koha-tmpl/opac-tmpl/prog/en/js/script.js >index 6859a74..a3cfab8 100644 >--- a/koha-tmpl/opac-tmpl/prog/en/js/script.js >+++ b/koha-tmpl/opac-tmpl/prog/en/js/script.js >@@ -58,8 +58,9 @@ YAHOO.util.Event.onContentReady("changelanguage", function () { > > // Build lists menu > YAHOO.util.Event.onContentReady("listsmenu", function () { >+ YAHOO.widget.Menu.prototype.onRender = function () { }; > $("#listsmenu").css("display","block").css("visibility","hidden"); >- $("#listsmenulink").attr("href","#").find("span:eq(0)").append("<img src=\"/opac-tmpl/prog/images/list.gif\" width=\"5\" height=\"6\" alt=\"\" border=\"0\" />"); >+ $("#listsmenulink").attr("href","#"); > var listMenu = new YAHOO.widget.Menu("listsmenu"); > listMenu.render(); > listMenu.cfg.setProperty("context", ["listsmenulink", "tr", "br"]); >-- >1.7.2.3
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 7584
:
7837
| 7933