Style a search form with CSS

Ok, so i have to add some more focus on the search form on a Simple Machine Forum search form. The users seems not to take into account this option, so as a result a lot of duplicate topics appear daily.

This is how the search form looks right now (it's the default theme with some colors changed).

I want it to be wider as the forum is and with some style applied on it.

First, i will remove the lines (from 298 to 302) regarding the news field, which i will not use from the Themes/default/index.template.php :

	if (!empty($settings['enable_news']))
		echo '
				<td width="90%" class="titlebg2">
					<span class="smalltext"><b>', $txt[102], '</b>: ', $context['random_news_line'], '</span>
				</td>';

than add to the first td line which include the search form a colspan="2" attribute so it will become

<td colspan="2" class="titlebg2" align="right" nowrap="nowrap" valign="top">

Now, i will change the width of the form so it will be a full width size now (the forum has a fixed width).

This is how it looks now:

I will add a "search the forums"default value to the search field, and some css to the form input type="text" (search field) and input type="submit" (submit button) lines to match the colors of the template.

The code of the form now looks like this:

<input type="text" name="search" value="search the forums" style="width: 470px; background: #326EB4; border: 2px solid #D93E20; color: #ffffff;" />&nbsp;
<input type="submit" name="submit" value="', $txt[182], '" style="width: 11ex; background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;" />
<input type="hidden" name="advanced" value="0" />';

And the search form now looks like this:

I hope it will catch some eye now :)

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.