Searchbox modification

Someone knows?

This is the code, now in the sidebar

<!– searchbox START –>
<div id=”searchbox”>
<?php if($options[‘google_cse’] && $options[‘google_cse_cx’]) : ?>
<form action=”https://www.google.com/cse&#8221; method=”get”>
<div class=”content”>
<input type=”text” class=”textfield” name=”q” size=”24″ />
<input type=”hidden” name=”cx” value=”<?php echo $options[‘google_cse_cx’]; ?>” />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<span class=”switcher” ><?php _e(‘Switcher’, ‘inove’); ?></span>
</div>
</form>
<?php else : ?>
<form action=”<?php bloginfo(‘home’); ?> ” method=”get”>
<div class=”content”>
<input type=”text” class=”textfield” name=”s” size=”24″ value=”<?php echo wp_specialchars($s, 1); ?>” />
<span class=”switcher” ><?php _e(‘Switcher’, ‘inove’); ?></span>
</div>
</form>
<?php endif; ?>
</div>
<!– searchbox END –>

How can I change the text to white

Which text?

how can it include a text ” search the site”

How can what? The search button? The input field? A title above the search form?

Hi.
Thanks for your patience.

I ment the searchbox text colour. I can change the background but can?t find the text colour.

This is a searchbox which originally eas in the header of the iNove theme. I moved it to the sidebar, so I must change the look of it.
Example grey border, white background

And I want a text inside the box saying ” search site” or something else. How do I add that. i`ve seen it elsewhere

To set the input text color, add

color:#fff;

to

#searchbox .textfield {
background:#666666;
line-height:18px;
width:280px;
float:left;
}

Default text within an input box (sometimes referred to as “placeholding text”) isn’t normally considered to be a Good Idea because visitors then have to delete the placeholding text before they can enter their own search term. A reasonable workaround is to use Javascript in such a way that, as soon as the visitor clicks inside the input, the placeholding text disappears. If you want to use this approach, try replacing:

<input type="text" class="textfield" name="q" size="24" />

in your search form with

<input type="text" class="textfield" name="q" size="24" value ="Search this site" onfocus="if(this.value=='Search this site')this.value=''" />

Thanks. It did change the colour, but did not add any predefined text to the search box.

Like this
https://www.soulpurpose.co.nz/music/

I can add the picture ( search icon) myself

Can you give me a link to your site?

https://www.kjagen.com

Is it the searchbox on the lower right? If so, the input code I gave above hasn’t been added. Maybe you added it to the wrong form (you have two listed above).

Try replacing:

<input type="text" class="textfield" name="s" size="24" value="<?php echo wp_specialchars($s, 1); ?>" />

wth

<input type="text" class="textfield" name="s" size="24" value ="Search this site" onfocus="if(this.value=='Search this site')this.value=''" />

instead.

Thanks a lot Esmi. Maybe you know why the first link in my sidebar (siple sidebar navigation) misses the : and is so near the top picture in the sidebar (in a textwidget) ?
Both ssn and text widget is in the north of the sidebar.

Also I want to know if it`s correct that you can?t edit like cut and paste in the text widget. I have to write everything each time and delete with the delete button line for line. Is this the way it is?

Maybe you know why the first link in my sidebar (siple sidebar navigation) misses the : and is so near the top picture in the sidebar (in a textwidget)

Try adding
.SimpleSideNav {margin-top:15px;}

to the bottom of style.css. It should push the the block of links down a bit and I suspect it might cure the missing ‘:’ problem too.

you can’t edit like cut and paste in the text widget

You can cut and paste plain text (or markup) into a text widget but I don’t think you can, for example, paste formatted text from Word and retain the formatting (At least I hope not). You definitely can’t paste an image – only the markup for an image that is already online somehere.

OK. But I don`t have a SimpleSideNav in the css.
Both the picture and the links are in the north of the sidebar..?

I did say add it to the bottom of style.css.

Done, but now difference.
If you see here to
https://www.kjagen.com/photoblog/

the header of the latest posts are squshed in the top picture (added in a text widget)

and here
https://www.kjagen.com/iron-maiden/
there`s missing a : ( an image that is)

If you want to push the latest post down a little, add margin-top:20px; to

#main {
background:#FFFFFF;
float:left;
padding:5px 15px 15px;
width:605px;
}

To fix the hidden “:”, add:

.SimpleSideNav ul {
margin-top:20px;
}

to the bottom of style.css