Change width of search box WordPress
- SOLVED
Hi,
I want the Agoda search hotel box above the posts to have the width of 600px
and to add a little space between the search box and the header.
The code above the posts does not work if I don´t have have it in a widget, which I also have but as soon as I added the code above the posts the widget didn´t become visible on the blog..
www.thailandliving.se
What shall I do?
Thanks
Charlotte
Answers (2)
phppoet answers:
You need to css your agola search box.
put something like this before your code.
<style type="text/css">
#SearchBox {
width:600px;
height:80px;
//all your search box design css code goes here
}
</style>
<div id="SearchBox">
<script src="http://ajaxsearch.partners.agoda.com/partners/SearchBox/Scripts/Agoda.SearchBoxV2.js" type="text/javascript"></script>
<script type="text/javascript">
var AgodaSearch = new AgodaSearchBox({
cid: 1410906,
filterCityName: '',
fixedCityName: false,
fixedCityNameVisible:true,
hotelID: '',
checkInDateBefore:3,
night:2,
language:25,
currencyCode:'SEK',
newWindow: true,
header: 'http://thailandliving.se/wp-content/themes/charlotteNew/images/header.jpg',
footer: '',
style: 'Default',
Element: 'SearchBox'
});
</script> </div>
Charlotte Raboff comments:
Hi, thanks.
I just added your code but there is no different. Empty cache as well...
phppoet comments:
Can you come skype ?
I will help you to solve your problem there.
my skype is phppoet
Charlotte Raboff comments:
Hello again! It´s working now :-)
phppoet comments:
Undo the previous changes . open your default.css of your theme and replace this code around line 67
#txtCitySearch {
width: 267px;
}
with
#txtCitySearch {
width: 420px;
}
Arnav Joy answers:
where is the search box ?
also i did not get your point
<blockquote>The code above the posts does not work if I don´t have have it in a widget, which I also have but as soon as I added the code above the posts the widget didn´t become visible on the blog..</blockquote>
please explain..
Charlotte Raboff comments:
Sorry Arnav, I mean the Agoda Hotel Search box above the posts....
I first put the java script code in a widget but then I wanted it above the posts. So when I put the same code above the posts and deleted the widget, the Agoda Hotel Search box was gone so I put the widget back which is not visible when the Agoda box is above the post... strange, I know.
<div id="SearchBox"> </div>
<script src="http://ajaxsearch.partners.agoda.com/partners/SearchBox/Scripts/Agoda.SearchBoxV2.js" type="text/javascript"></script>
<script type="text/javascript">
var AgodaSearch = new AgodaSearchBox({
cid: 1410906,
filterCityName: '',
fixedCityName: false,
fixedCityNameVisible:true,
hotelID: '',
checkInDateBefore:3,
night:2,
language:25,
currencyCode:'SEK',
newWindow: true,
header: 'http://thailandliving.se/wp-content/themes/charlotteNew/images/header.jpg',
footer: '',
style: 'Default',
Element: 'SearchBox'
});
</script>
Charlotte Raboff comments:
Sorry Arnav, I mean the Agoda Hotel Search box above the posts....
I first put the java script code in a widget but then I wanted it above the posts. So when I put the same code above the posts and deleted the widget, the Agoda Hotel Search box was gone so I put the widget back which is not visible when the Agoda box is above the post... strange, I know.
<div id="SearchBox"> </div>
<script src="http://ajaxsearch.partners.agoda.com/partners/SearchBox/Scripts/Agoda.SearchBoxV2.js" type="text/javascript"></script>
<script type="text/javascript">
var AgodaSearch = new AgodaSearchBox({
cid: 1410906,
filterCityName: '',
fixedCityName: false,
fixedCityNameVisible:true,
hotelID: '',
checkInDateBefore:3,
night:2,
language:25,
currencyCode:'SEK',
newWindow: true,
header: 'http://thailandliving.se/wp-content/themes/charlotteNew/images/header.jpg',
footer: '',
style: 'Default',
Element: 'SearchBox'
});
</script>
Charlotte Raboff comments:
Sorry Arnav, I mean the Agoda Hotel Search box above the posts....
I first put the java script code in a widget but then I wanted it above the posts. So when I put the same code above the posts and deleted the widget, the Agoda Hotel Search box was gone so I put the widget back which is not visible when the Agoda box is above the post... strange, I know.
<div id="SearchBox"> </div>
<script src="http://ajaxsearch.partners.agoda.com/partners/SearchBox/Scripts/Agoda.SearchBoxV2.js" type="text/javascript"></script>
<script type="text/javascript">
var AgodaSearch = new AgodaSearchBox({
cid: 1410906,
filterCityName: '',
fixedCityName: false,
fixedCityNameVisible:true,
hotelID: '',
checkInDateBefore:3,
night:2,
language:25,
currencyCode:'SEK',
newWindow: true,
header: 'http://thailandliving.se/wp-content/themes/charlotteNew/images/header.jpg',
footer: '',
style: 'Default',
Element: 'SearchBox'
});
</script>
Charlotte Raboff comments:
Sorry Arnav, I mean the Agoda Hotel Search box above the posts....
I first put the java script code in a widget but then I wanted it above the posts. So when I put the same code above the posts and deleted the widget, the Agoda Hotel Search box was gone so I put the widget back which is not visible when the Agoda box is above the post... strange, I know.
<div id="SearchBox"> </div>
<script src="http://ajaxsearch.partners.agoda.com/partners/SearchBox/Scripts/Agoda.SearchBoxV2.js" type="text/javascript"></script>
<script type="text/javascript">
var AgodaSearch = new AgodaSearchBox({
cid: 1410906,
filterCityName: '',
fixedCityName: false,
fixedCityNameVisible:true,
hotelID: '',
checkInDateBefore:3,
night:2,
language:25,
currencyCode:'SEK',
newWindow: true,
header: 'http://thailandliving.se/wp-content/themes/charlotteNew/images/header.jpg',
footer: '',
style: 'Default',
Element: 'SearchBox'
});
</script>
Arnav Joy comments:
can you provide me screenshot?
Charlotte Raboff comments:
there is some error on this page when I try to reply:
Oops! An Error Occurred
The server returned a "500 Internal Server Error".
Charlotte Raboff comments:
there is some error on this page when I try to reply:
Oops! An Error Occurred
The server returned a "500 Internal Server Error".
Arnav Joy comments:
you have to create this image to 600px
http://img.agoda.net/images/affiliates/CmsLandingSearchBoxBg.gif
also you have to edit some css to adjust new width.