watermark ALL the things

pull/1/head
Andromeda Yelton 2011-12-12 16:09:18 -05:00
parent 26806673e4
commit 35014da286
8 changed files with 33 additions and 32 deletions

View File

@ -33,7 +33,7 @@
<div class="js-search">
<div class="js-search-inner">
<form action="{% url search %}" method="get">
<input type="text" id="watermark" size="25" class="inputbox" name="q" value="{{ q }}">
<input type="text" id="watermark" size="25" onfocus="imgfocus()" onblur="imgblur(15)" class="inputbox" name="q" value="{{ q }}">
<input type="button" onclick="this.form.searchword.focus();" class="button" value="Search">
</form>
</div>

View File

@ -117,7 +117,7 @@ var $j = jQuery.noConflict();
<div id="js-search">
<label>What book would you give to the world? </label>
<form action="{% url search %}" method="get">
<input type="text" id="watermark" onfocus="imgfocus()" onblur="imgblur()" size="25" class="inputbox" name="q" value="{{ q }}">
<input type="text" id="watermark" onfocus="imgfocus()" onblur="imgblur(0)" size="25" class="inputbox" name="q" value="{{ q }}">
<input type="button" onclick="this.form.searchword.focus();" class="button" value="Search">
</form>
</div>

View File

@ -270,6 +270,7 @@ h2.page-heading {
padding: 0;
margin: 5px 0 5px 20px;
width: 175px;
outline: none;
}
#js-search input[type=button] {
background: url(/static/images/landingpage/search-button.png) 0 0 no-repeat;

View File

@ -160,24 +160,19 @@ a.readon span {
.js-search .inputbox {
padding: 0 0 0 15px;
margin: 0;
border: none;
border: solid 4px #8ac3d7;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
border-radius: 50px 50px 50px 50px;
outline: none;
background: url("/static/images/bg.png") -645px -180px;
height: 36px;
line-height: 36px;
height: 28px;
line-height: 28px;
width: 176px;
float: left;
color: #6994a3;
}
.js-search .button {
background: url("/static/images/bg.png") 100% -144px no-repeat;
padding: 0;
margin: 0;
width: 40px;
height: 36px;
display: block;
border: none;
text-indent: -10000px;
cursor: pointer;
display: none;
}
.js-search-inner {
float: right;
@ -198,7 +193,7 @@ a.readon span {
text-decoration: underline;
}
#js-leftcol .jsmod-content {
border: 1px solid #edf3f4;
border: solid 1px #edf3f4;
margin-left: 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;

View File

@ -1,6 +1,6 @@
function imgblur(){
function imgblur(pos){
if (document.getElementById('watermark').value == "") {
document.getElementById('watermark').style.background="url('/static/images/google_watermark.gif') no-repeat left center";
document.getElementById('watermark').style.background="white url('/static/images/google_watermark.gif') no-repeat "+pos+"px center";
}
}

View File

@ -1,6 +1,6 @@
var $j = jQuery.noConflict();
$j(document).ready(function() {
if (!$j('#watermark').val()) {
$j('#watermark').css({"background": "url('/static/images/google_watermark.gif') no-repeat left center"});
$j('#watermark').css({"background": "white url('/static/images/google_watermark.gif') no-repeat left center"});
}
});

View File

@ -306,6 +306,7 @@ h2.page-heading {
padding:0;
margin:5px 0 5px 20px;
width: 175px;
outline: none;
}
&[type=button] {

View File

@ -173,24 +173,28 @@ a.readon {
.inputbox {
padding:0 0 0 15px;
margin:0;
border:none;
border: solid 4px #8ac3d7;
.border-radius(50px, 50px, 50px, 50px);
outline: none;
background:url(@background-header) -645px -180px;
.height(36px);
// background:url(@background-header) -645px -180px;
.height(28px);
width:176px;
float: left;
color:@medium-blue;
}
.button {
background:url(@background-header) 100% -144px no-repeat;
padding:0;
margin:0;
width:40px;
height:36px;
display:block;
border:none;
text-indent:-10000px;
cursor:pointer;
display: none;
// Not presently compatible with Google watermark.
// background:url(@background-header) 100% -144px no-repeat;
// padding:0;
// margin:0;
// width:20px;
// height:26px;
// display:block;
// border:none;
// text-indent:-10000px;
// cursor:pointer;
}
}
@ -216,7 +220,7 @@ a.readon {
}
.jsmod-content {
border:1px solid @pale-blue;
border: solid 1px @pale-blue;
margin-left:10px;
.border-radius(0, 0, 10px, 10px);
}