WordPress.org

1. rdg@me.com
   Member
   Posted 4 months ago #
   

   I would expect a moderator to direct this search to a css forum BUT the search form doesn't have a specific css declaration. It's set up somewhere in the back end with php and so the css only seems to allow us to style the text from which the search form uses. I want to customise the search button (icon of a magnifying glass) and put it within the text field container to the right and have the word "search" display by default at the left of the text field container. YES the styling will be accomplished using css BUT, the search form is made with php..

   Or am I wrong?

   If I'm right, how do you modify the php to make a new css to allow you style the search form?

   The only thing I've found in the css which affects the search bar is:

   /* Form fields */
   input[type="text"],
   input[type="password"],
   input[type="email"],
   input[type="url"],
   textarea {
   	padding: 6px;
   	padding: 0.428571429rem;
   	font-family: inherit;
   	border: 1px solid #ccc;
   	border-radius: 3px;
   }

2. Andrew Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

   I don't see a magnifying glass in the demo website of Twenty Twelve, can you provide a working example of this?

3. rdg@me.com
   Member
   Posted 4 months ago #
   

   working example no but i'll photoshop you one tomorrow afternoon

4. rdg@me.com
   Member
   Posted 4 months ago #
   

   Mockup png file posted on my server

   Ok Andrew,

   I made you a quick mockup png of the custom search bar I'd like to make using css and a single sprite for the magnifying glass.

   The circle to the right is a button which I'm sure I'd just make as a button class in the style sheet. Getting it to have the magnifying glass I can probably achieve by giving that button a background image url and hiding the button type offscreen.

   I realise these are css issues rather than Twenty Twelve specific ones although this post/query is Twenty Twelve specific. Before I can modify the css for the search bar I need to know how it is created. I don't know if it is created in the css file but I don't think so. I think it's somewhere in a php file which calls up standard button and form field css classes but I can't find it for love nor money. I realise that getting the word search to appear by default in the form and putting the button inside the form or in a layer over the top of it will be a hurdle but I'm up for the challenge if someone can start me off (and will, of course, document any final solution I come to should others wish to implement it.)

5. non_descript
   Member
   Posted 1 week ago #
   

   Hi,
   Did you manage to customize the search form? I want to do a similar thing and I am stuck for the moment so any help will be greatly appreciated.

Reply

You must log in to post.