How to centralise sidebar widget ( hotel search form)

Hey guys, can anybody help me with this please?

Not without seeing the site.

I think this is the site, from what I remember.

I’m not sure how you can center that widget in your sidebar, but you can at least move it more to the left so it’s not covering up the main content, by adding the following CSS rule:

#secondary #text-2 {
   margin-left: -50px;
}

Hi WPyogi

The site is fly-prestwick.co.uk

I’ve moved the javascript search form to the sidebar but now need to centralise within the sidebar.

If it’s a CSS thing i’m afraid i’m going to need an idiot proof step bt step guide i.e. where to find the CSS to edit, do i have to give the javascript form an ID or class, can the CSS be done within the sidebar section etc.

Sorry for all the questions, just starting out and already spent hour after hour after hour trying to resolve this.

Already tried several fixes that i found on the web but nothing seems to work ??

The TwentyEleven theme doesn’t have a Custom CSS option, so your choices are either to create a child theme or to use a CSS plugin like Lazyest Stylesheet or Custom CSS Manager. Some people may suggest that you edit the theme’s CSS file directly, but that is not recommended as you could lose the changes if the theme ever gets updated/patched.

Creaing a child theme isn’t difficult, but requires that you have an FTP (File Transfer Protocol) ID for your hosting account, and that you know how to use an FTP client, like FileZilla. Again, not difficult, but could be daunting for someone who is not experienced as a web developer. Installing a plugin is much easier, in that regard.

So, assuming you’ve decided to use a CSS plugin, and you have it installed and activated, you’ll be able to add your own CSS. For Lazyest Stylesheet, you go Appearance > Layzest Stylesheet and you’ll see a big input field where you can either type in or copy & paste your CSS rules. Same thing for Custom CSS Manager, go to Appearance > Custom CSS Manager and you’ll see a large input field for your custom CSS.

Now, copy & paste the CSS rule below into your custom CSS field:

#secondary #text-2 {
   margin-left: -50px;
}

Don’t forget to click the blue button to Save Changes.
What this rule does is shift the widget over to the left by 50 pixels. The #secondary selector is the ID of the left sidebar. The #text-2 selector is the ID of the text widget within that sidebar. The margin-left property determines how much spacing (margin) to add to the left of the particular object. A positive amount shifts to the right, and a negative amount shifts the object to the left, so -50px will move the widget over by 50px to the left. You can adjust this amount, of course, depending upon how much you actually want to move it.

Thank you – I’ll give it a go later (possibly today or tomorrow) and will let you know how i get on ??

Thanks.

Fantastic – It worked a treat. Thank you ??