Google search - The thorn in my sidebar!

Creating and modifying plugins.
Post Reply
Hello McFly
Regular
Posts: 12
Joined: Thu Feb 02, 2006 5:53 pm
Contact:

Google search - The thorn in my sidebar!

Post by Hello McFly »

I'm using an HTML NUGGET plug-in to put Google Search on my homebuilt airplane blog. When I installed it, the formatting breaks for some reason, and it stretches my sidebar so that it's too large.

I want the radio buttons to be on the same line (and close to their text description) I've tried reformatting the bar a few times and nothing seems to help. Any ideas?

You can see what's happening by visiting my blog at http://www.quickheads.com/danyager

Thanks in advance. :D
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert »

It doesn't look like those two radio buttons will fit on the same line. Each button and its description may fit on a single line, for two lines under the search button.

The big problem is that your template's CSS includes this snippet:

Code: Select all

.serendipitySideBarContent input {
    width: 150px;
}
Since a radio button is a kind of input, and it's in a .serendipitySideBarContent, it's getting set to 150px wide. Naturally there's no space left for the text.

Luckily, this is an HTML nugget, so you can do anything with it you want. I think the easiest thing is to assign the radio buttons an inline style.

Don't let Carl or Dave know I told you about this! :lol: Inline styles are frowned upon in the CSS community. I don't like them, either, but the alternative is to assign your form, input, or a wrapping div a class, and then editing your style.css file to style that particular bit. I don't know if you have these skills, so I'm going with something you can modify in the nugget itself.

To return the radio button to its natural width and placement, change the line in your nugget to:

Code: Select all

<input style="width:auto;" type="radio" name="sitesearch" value="www.quickheads.com">Quickheads.com</input>
And so on for any other inputs you want at their natural width. Alternatively, you could assign a particular width. (Google up CSS if you're not familiar with it.)

Good luck!
Judebert
---
Website | Wishlist | PayPal
Hello McFly
Regular
Posts: 12
Joined: Thu Feb 02, 2006 5:53 pm
Contact:

Post by Hello McFly »

Judebert - You're the best! Thanks for seeing that. I decided not to do the inline CSS since I thought I might get in to trouble with Google, but I went and changed my style.css to show a width of "auto"

I tried wrapping a DIV ID around my HTML NUGGET but I couldn't get that to work. I may try again later. It woks good enough for me as is in the meantime.

Again I really appreciate the help. :D

Cheers,
McFly
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert »

Glad it worked out!

I'm surprised the wrapping DIV didn't work. You'd have to put it after the other lines in your style.css, of course, or it would be overridden. You might also want to make it as specific as possible (IDs are more specific than classes).

If you're still interested in pursuing this, I'd give my wrapping div an ID (say, "googlesearch"), and then use this CSS at the bottom of styles.css:

Code: Select all

#googlesearch input {
  width:auto;
}
Glad you got it working!
Judebert
---
Website | Wishlist | PayPal
Hello McFly
Regular
Posts: 12
Joined: Thu Feb 02, 2006 5:53 pm
Contact:

Thanks again...

Post by Hello McFly »

I think that's what I did. I'll give it another try later. You may be right about me putting it in the wrong place in the stylesheet.

Probably a common CSS newbie misunderstanding. Thanks again Judebert!

Cheers,
McFly
Post Reply