Search And Go button styling

[jenzi]

Can anyone tell me how I can get my "go" button to fit alongside the search box? (on the right hand side)

Site is here.

Thanks in advance!

[rstevenson]

Looks to me like the width of the Go button added to the width of the search field (don't forget there's a margin around each of them) is just too much for the sidebox width minus any padding it has. So get thee hence to the stylesheet and adjust margins as needed. ;-)

You may need to break out their definitions in the stylesheet if they're ganged up with other elements.

Rob

[jenzi]

Er, thanks, I think? Sorry to be a pain, but I'm still not sure which margins I edit? Or is it the padding I edit?

[s_t_e_v_e]

there is a <br> tag in the sidebox - tpl_search.php template.... that will need removing, then a little CSS change to get it to fit...

[jenzi]

Hi, it's proving to be quite the challenge. :) Thanks, I'll try to work it out.

[s_t_e_v_e]

You need to edit a template file;
includes - templates - YOURTEMPLATE - sideboxes - tpl_search.php

and look for the following code;

  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 50px" />';
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } 

in the middle of the above code is this line - with a <br /> tag that needs removing;

this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><input type="submit" value="' . HEADER_SEARCH_BUTTON

hope this is a better explanation for you...

[jenzi]

Thanks for that. Initially I removed all the BRs cause I didn't know which one it was, lol. Anyway, I have now only removed the one you pointed out to me. Because it's still on separate lines, I now have to work out which part of the css I have to tweak.

[s_t_e_v_e]

insert this into your stylesheet.css

#searchContent .search {width:40%;}

[jenzi]

I could just about hug you!

THANKS! I really have no idea in general. I'm pretty much guessing my way through my edits, hehe - just trying to build the shop quickly so I can concentrate on products and the business! Yikes!

Thanks again!