Textpattern CMS

#1 2007-11-23 03:20:58

darock

Member

Registered: 2007-11-23

Posts: 54

how to stylize the search bar

I’m trying to stylize the search button by decreasing the width and font size. I tried adding a class to the <txp:search_input /> tag but that doesn’t seem to work. What would I need to do within TXP so stylize this aspect of the site?

#2 2007-11-23 04:51:15

iblastoff

Plugin Author

From: Toronto

Registered: 2006-06-11

Posts: 1,197

Website

Re: how to stylize the search bar

by default you should have no problem selecting the input from the div it resides in

---

my plugins || iblastoff.ca

#3 2007-11-23 05:05:48

darock

Member

Registered: 2007-11-23

Posts: 54

Re: how to stylize the search bar

I tried something like this;

input {
width: 100px
}

but that increased both the search button as well as the search box. how do I just affect the button itself?

#4 2007-11-23 07:10:26

jm

Plugin Author

From: Missoula, MT

Registered: 2005-11-27

Posts: 1,746

Website

Re: how to stylize the search bar

input[type=button] {
	width: 100px;
}

or customize the markup to use an actual button or whatever you want to use:

<form action="<txp:site_url />" method="get">
	<fieldset>
		<legend>
			<label for="q">Search</label>
		</legend>
		<input id="q" name="q" type="text" />
		<button>Go!</button>
	</fieldset>
</form>

and:

button {
	width: 100px;
}

---

What? My name is… | GitHub

#5 2007-11-23 07:40:23

the_ghost

Plugin Author

From: Minsk, The Republic of Belarus

Registered: 2007-07-26

Posts: 907

Website

Re: how to stylize the search bar

try to point searchbar more accurately – add id to form – id="blabla" and then your css is:

#blabla input {
	width: 100px;
}

This will point all <input> within any parent element with id=“blabla”. In your case it’s form.

---

Providing help in hacking ATM! Come to courses and don’t forget to bring us notebook and hammer! What for notebook? What a kind of hacker you are without notebok?