Pay money and get answers for your WordPress questions (more info)

Change width of search box

  • 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)

2013-01-20

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;
}

2013-01-20

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.