Experimenting with styles for OPAC cart and lists button. Unfinished.

Signed-off-by: Chris Cormack <crc@liblime.com>
Signed-off-by: Joshua Ferraro <jmf@liblime.com>

diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index d6e62e4..e83ddb9 100644 (file)
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -695,20 +695,11 @@ a.reserve {
 }
 
 #opac-main-search a.cart {
-       background : #FFC url(../../images/cart-small.gif) 7px center no-repeat;
-       border : 1px solid white;
-       color : #6699cc;
-       padding : 5px;
-       padding-left : 25px;
-       text-decoration: none;
+
 }
 
 #opac-main-search a.lists {
-       background : #FFC;
-       border : 1px solid white;
-       color : #6699cc;
-       padding : 5px;
-       text-decoration: none;  
+
 }
 
 .pages {
@@ -941,11 +932,22 @@ margin-top : .4em;
 }
 
 #fluid-content-1 {
+float: left;
+width: 65%;
 margin : .3em -1px 0 2%;
 display: inline /* fix IE6 */;
 line-height : 15px;
 }
 
+#fluid-content-2 {
+float: left;
+width: 28%;
+margin-left: 2%;
+display: inline /* fix IE6 */;
+margin-right: -1px /* fix IE6 */;
+line-height : 25px;
+}
+
 .clearfix:after {
     content: "."; 
     display: block; 
@@ -1002,4 +1004,109 @@ div.message {
        color : #e5ebff;
        font-weight : normal;
        text-decoration : none;
+}
+* html .btn span,
+* html .btn i {
+       float : left;
+       width : auto;
+       background-image : none;
+       cursor : pointer;
+}
+
+.btn {
+       display : block;
+       position : relative;
+       background : #adc2eb;
+       margin-left : 10px;
+       padding : 5px;
+       float : left;
+       color : #fff;
+       text-decoration : none;
+       cursor : pointer;
+}
+
+.btn * {
+       font-style : normal;
+       background-image : url(../../images/button-background2.png);
+       background-repeat : no-repeat;
+       display : block;
+       position : relative;
+}
+
+.btn i {
+       background-position : top left;
+       position : absolute;
+       margin-bottom : -5px;
+       top : 0;
+       left : 0;
+       width : 5px;
+       height : 5px;
+}
+
+.btn span {
+       background-position : bottom left;
+       left : -5px;
+       padding : 0 0 5px 10px;
+       margin-bottom : -5px;
+}
+
+.btn span i {
+       background-position : bottom right;
+       margin-bottom : 0;
+       position : absolute;
+       left : 100%;
+       width : 10px;
+       height : 100%;
+       top : 0;
+}
+
+.btn span span {
+       background-position : top right;
+       position : absolute;
+       right : -10px;
+       margin-left : 10px;
+       top : -5px;
+       height : 0;
+}
+
+.btn[class] {
+       background-image : url(../../images/shade.png);
+       background-position : bottom;
+}
+
+.button:link,
+.button:visited,
+.button:hover {border:none;}
+* html #wrap {width:50em}
+/* End Demo page styling */
+
+.button:link,
+.button:visited { /* Top left corner, top edge */
+       float:left;
+       color:#ddd;
+       background:#333 url(../../images/button-center.gif) no-repeat;
+       text-decoration:none;
+}
+.button * {display:block;}
+.button span { /* Top right corner */
+       padding:13px 0 0;
+       background:url(../../images/button-corners.gif) no-repeat right top;
+}
+.button span span { /* Bottom left corner, left and bottom edges */
+       padding:0 0 0 13px;
+       background:url(../../images/button-center.gif) no-repeat left bottom;
+}
+.button span span span { /* Bottom right corner */
+       padding:0 0 13px;
+       background:url(../../images/button-corners.gif) no-repeat right bottom;
+}
+.button span span span span { /* Right edge */
+       padding:3px 12px 3px 13px; /* Extra padding (3px vertical, 13px horizontal) added to give the text some breathing room */
+       background:url(../../images/button-center.gif) no-repeat right center;
+}
+.button:hover,
+.button:focus,
+.button:active { /* Make the button more visible on :hover and :focus */
+       outline:2px solid #ff0; /* Not supported by IE/Win :-( */
+       color:#fff;
 }
\ No newline at end of file

diff --git a/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc
index cc7d29d..d7f6ca4 100644 (file)
--- a/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc
+++ b/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc
@@ -28,7 +28,7 @@
         <option <!-- TMPL_IF NAME="ms_se" -->selected="selected"<!-- /TMPL_IF --> value="se">Series</option>
         <option <!-- TMPL_IF NAME="ms_callnum" -->selected="selected"<!-- /TMPL_IF --> value="callnum">Call Number</option>
 </select>
-        <input type="text" name="q" <!-- TMPL_IF NAME="ms_value" -->value="<!-- TMPL_VAR NAME="ms_value" -->" <!-- /TMPL_IF --> style="width: 30%;" />
+        <input type="text" name="q" <!-- TMPL_IF NAME="ms_value" -->value="<!-- TMPL_VAR NAME="ms_value" -->" <!-- /TMPL_IF --> style="width: 40%;" />
         <!-- TMPL_IF name="mylibraryfirst" --><!-- TMPL_IF name="loggedinusername" -->
             <input name="limit" value="<!-- TMPL_VAR name="LoginBranchcode" -->" type="hidden" />
         <!-- /TMPL_IF --><!-- /TMPL_IF -->
@@ -38,7 +38,7 @@
        <!-- TMPL_IF NAME="opacbookbag" --><a class="cart" href="/cgi-bin/koha/opac-basket.pl" onclick="openBasket(); return false;" title="A &quot;shopping cart&quot; for your selections">Book Bag<span id="basket"><script language="javascript" type="text/javascript">if(basketcount){ document.write(basketcount) };</script></span></a><!-- /TMPL_IF -->
 
        <!--TMPL_IF NAME="virtualshelves" --><a class="lists" href="/cgi-bin/koha/opac-shelves.pl">Lists</a><!-- /TMPL_IF -->
-       
+
                <!-- TMPL_IF NAME="virtualshelves" -->
                <li><a href="/cgi-bin/koha/opac-shelves.pl">Lists</a>
                <!-- TMPL_IF NAME="barshelves" --><-- ! FIXME: Owen, you can take it from here!  Make it "barshelves" for proof/demo. -->
@@ -56,6 +56,10 @@
        <div id="moresearches"><a href="/cgi-bin/koha/opac-search.pl">Advanced Search</a><!-- TMPL_IF name="OpacBrowser" --> | <a href="/cgi-bin/koha/opac-browser.pl">Browse by Hierarchy</a><!-- /TMPL_IF --><!-- TMPL_IF name="OpacAuthorities" --> | <a href="/cgi-bin/koha/opac-authorities-home.pl">Browse by Subject</a><!-- /TMPL_IF --><!-- TMPL_IF name="OpacCloud" --> | <a href="/cgi-bin/koha/opac-tags_subject.pl">Tag Cloud</a><!-- /TMPL_IF --><!-- TMPL_IF name="OpacTopissue" --> | <a href="/cgi-bin/koha/opac-topissues.pl">Most Popular</a><!-- /TMPL_IF --></div>
 
 </div>
+<div id="fluid-content-2">
+<!-- TMPL_IF NAME="opacbookbag" --><div><a class="button cart" href="/cgi-bin/koha/opac-basket.pl" onclick="openBasket(); return false;" title="A &quot;shopping cart&quot; for your selections"><span><span><span><span>Book Bag</span></span></span></span></a></div><!-- /TMPL_IF -->
+       <!--TMPL_IF NAME="virtualshelves" --><div><a class="button lists" href="/cgi-bin/koha/opac-shelves.pl"><span><span><span><span>Lists</span></span></span></span></a></div><!-- /TMPL_IF -->
+</div>
 </div>
 </div>
 

diff --git a/koha-tmpl/opac-tmpl/prog/en/js/script.js b/koha-tmpl/opac-tmpl/prog/en/js/script.js
index 140aa34..dc3460e 100644 (file)
--- a/koha-tmpl/opac-tmpl/prog/en/js/script.js
+++ b/koha-tmpl/opac-tmpl/prog/en/js/script.js
@@ -35,4 +35,18 @@ function confirmDelete(message) {
 function Dopop(link) {
        newin=window.open(link,'popup','width=500,height=400,toolbar=false,scrollbars=yes');
 }
-
+       
+/*$(document).ready(function(){
+       $('#masthead').each(function(){
+               $('a.button').each(function(){
+                       var b = $(this);
+                       var tt = b.text() || b.val();
+                       if ($(':submit,:button',this)) {
+                               b = $('<a>').insertAfter(this).addClass('btn').attr('id',this.id).attr('href',this.href);
+                               $(this).remove();
+                       }
+                       b.text('').css({cursor:'pointer'}). prepend('<i></i>').append($('<span>').
+                       text(tt).append('<i></i><span></span>'));
+                       });
+               });
+       });*/