Posted 3 years ago #
This is my code
#searchbox {
width:280px;
float:left;
padding:4px 4px;
}
#searchbox .textfield {
background:#666666;
line-height:18px;
width:280px;
float:left;
}
#searchbox .switcher {
background:url(img/icons.gif) 0 0 no-repeat;
float:right;
width:18px;
height:22px;
line-height:14px;
display:block;
text-indent:-999em;
padding:0 2px;
height:16px;
margin-top:4px;
}
How can I change the text to white and how can it include a text " search the site"
Right now it`s blank
Posted 3 years ago #
Someone knows?
Posted 3 years ago #
This is the code, now in the sidebar
<!-- searchbox START -->
<div id="searchbox">
<?php if($options['google_cse'] && $options['google_cse_cx']) : ?>
<form action="http://www.google.com/cse" 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?
Posted 3 years ago #
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=''" />
Posted 3 years ago #
Thanks. It did change the colour, but did not add any predefined text to the search box.
Like this
http://www.soulpurpose.co.nz/music/
I can add the picture ( search icon) myself
Can you give me a link to your site?
Posted 3 years ago #
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.
Posted 3 years ago #
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.
Posted 3 years ago #
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.
Posted 3 years ago #
Done, but now difference.
If you see here to
http://www.kjagen.com/photoblog/
the header of the latest posts are squshed in the top picture (added in a text widget)
and here
http://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
Posted 3 years ago #
Done, but there does not seem to work
Posted 3 years ago #
kjagen,
A little off topic from yours but im interested in how you got a background image to display in the sidebar. How do i go about doing something like that to mine?
A link to my site can be found here: http://www.ibizaoc.com
Posted 3 years ago #
It isn`t background, just a image at the top of the sidebar, in the north
Done, but there does not seem to work
I can't see that extra class in style.css
Posted 3 years ago #
I added it to the bottom of the style.css
but it doesn?t make any effect.
Am I placing it at the wrong place?
This is the space between to elements (an image in a text widget and links to pages in simple sidebar nav)
Both are in the north section of the iNove theme sidebar
Found it! Increase the margin-top on that class to 50px.
Posted 3 years ago #
Great!!!
The only thing now is to figure out how to set wider space between picture in text widget and the recent posts widget
Posted 3 years ago #
Anyone?
Posted 2 years ago #
Thanks for the thread! I moved my search box to my nav bar. I have this thread and esmi is to thank for it.
Here's how I got what I wanted on http://www.billselak.com/
My css:
#searchdiv {
position: relative;
float: right;
top: 3px;
bottom: 4px;
}My header:
<form role="search" method="get" id="searchform" action="http://www.billselak.com/">
<input type="text" class="textfield" name="s" size="16" value ="generic search box" onfocus="if(this.value=='generic search box')this.value=''" />
<input type="submit" id="searchsubmit" value="Search">
</form>
</div>This topic has been closed to new replies.
