Sure is, use absolute positioning.
Thanks for the quick reply. As I know it’s possible I should have chosen the following wording instead: does someone know the CSS for this and would s/he kindly like to share the solution for the benefit of all?
I wouldn’t do it via CSS, I’d do it via hooks. The lblg_print_bp_menu() hook handles outputting that half of the header. Simply unhook it via remove_action( 'lblg_print_bp_menu', 'lblg_bp_menu' ); in your child functions.php. You can then do something like this
lblg_child_search(){
get_template_part( 'searchform' );
}
add_action( 'lblg_print_bp_menu', 'lblg_child_search' );
Does that make sense?
Thanks! This looks like exactly the solution I was looking for. I’m marking the topic as resolved and will get back to it if I will encounter problems with it.
As an offtopic, that code block reminded me that some of the code in FAQs and possibly in the plugin itself had some variations in formatting. For example the section in FAQ titled “How can I remove the ‘Posted by admin on (date) edit this entry’ ? I don’t want that to show on my page.” contained '); and ' ); with and without the space.
Also, WordPress Coding Standards suggest a space between ) {. These are most minor issues, and even WordPress core itself has code that is written with non-standard formatting. Variations in formatting just make code slightly less readable and maintainable, so in the long run it’s most powerful to have all code with the same formatting, so I decided to bring this to your consideration.
Thanks again for the great theme and support!
I pasted that code to the functions.php. It needed the word “function ” to be added in the beginning to not break the site. After that was done, however, I cannot see any changes in the site.
The aim is to display the Search box on top of the header image without having BuddyPress activated.
After some back and forth with sidebar settings, it’s working now. I switched to 1-column layout to be rid of the sidebars on the side and then created a copy of the layout called 1-column-fixed-nosidebars.css and set the visibility of both sidebars to none.
The search bar is now displayed at the top of the page, right below the admin bar with no pixels in between.
ZaMoose: Is it possible to modify the code you gave to have the search form id #lb-bp-search-bar in order to employ the CSS that is already in place?
As a workaround I’ve now added the following CSS to my child-theme’s style.css to reposition the search form that is placed by the above instructions.
/* Position the search form */
#searchform {
text-align: right;
}
#s {
margin-top: 25px;
margin-right: 35px;
height: 25px;
}
Is there a way to add a search button to the right side of this form? I’ve encountered situations when I was only able to use a mouse on some terminals, and I remember that on sites where there was a search form without a search button, I was able to copy-paste the text into the form but not submit it.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Have you this site online, and if so, can you link?
Or can you pastebin.com us your HTML and CSS?
Thanks for the offer for support, anevins. After delving into the theme code, I figured the best way is to create a copy of the default searchform.php to my child theme folder and add the button as HTML there. I haven’t done the adding part yet, so if you have a neat HTML & CSS suggestion on how to add it, it’d be most welcome.
My HTML for searchform.php is currently as displayed in the latter of the quotes in this post of mine from a minute ago: [PATCH] Translation support and dynamic color for search.
Daedalon:
Definitely the right way to do it.
Thanks, marking this as resolved.
Just a side mention, I’ve encountered an unexpected issue related to another search form modification. When I added qTranslate‘s shortcode for tags (echo qtrans_generateLanguageSelectCode('image');) right before the searchform.php’s <form>, everything was perfect until I tried searching for a string that wasn’t found on any post.
The resulting page printed the search form again, and this included the language selection flags as well. I have now modified the solution by moving that language flags call to a language-flags.php and calling it in my functions.php the same way as the search form:
/* Print language selection flags over header
*/
function mytheme_lblg_language_flags() {
get_template_part( 'language-flags' );
}
add_action( 'lblg_print_bp_menu', 'mytheme_lblg_language_flags' );
/* Print search box over header
*/
function lblg_child_search() {
get_template_part( 'searchform' );
}
add_action( 'lblg_print_bp_menu', 'lblg_child_search' );
This makes everything else work perfect, but doesn’t yet fix the issue that this second search form isn’t automatically filled with the string the user was searching for. This second search form also breaks the functionality of Search Autocomplete for both as both hae the HTML attribute id="s", which is breaks all HTML standards I can think of.
A possible solution I thought is to add an integer variable to the searchform.php which is increased each time the form is called, and after the first time its number is added to the end of the id (and possibly name) attribute so that first form gets id="s" name="s", second form gets id="s2" name="s2" and so forth. To allow search autocomplete for all they should all have the same class which would not be used by any other element.
Issue solved. New fixes:
- All search forms on a single page have different id and name attribute values. Valid HTML and a working search autocomplete!
- All search fields now get automatically filled with the user-submitted search value and have the proper initial color. Previously only the first search fields had these benefits.
- Search field now has class=”searchfield” attribute, which allows for CSS that affects all the search forms’ fields, and having the search autocomplete feature work on all forms by using the selector
.searchfield in plugin settings.
All the older fixes are also included. Here are the searchform.php contents:
<?php $default_search_text = __( 'Search' ) . '...';
$initial_search_color = 'gray';
if ( ! empty( $GLOBALS['lblg_search_text'] ) ) {
$initial_search_color = '#000';
} else {
if ( !is_search() ) {
$GLOBALS['lblg_search_text'] = $default_search_text;
} else {
$GLOBALS['lblg_search_text'] = esc_html($s, 1);
$initial_search_color = '#000';
}
}
/* If there are multiple search forms on the page, give them unique id and name attribute values: for the first one id="s" and name="s", for the second one id="s2" and name="s2" etc.
*/
if ( ! $GLOBALS['lblg_searchform_counter'] >= 1 ) {
$searchform_id_appendix = '';
$GLOBALS['lblg_searchform_counter'] = 1;
} else {
$searchform_id_appendix = $GLOBALS['lblg_searchform_counter'];
$GLOBALS['lblg_searchform_counter']++;
}
?>
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" id="s<?php echo $searchform_id_appendix; ?>" name="s<?php echo $searchform_id_appendix; ?>" class="searchfield" style="color:<?php echo $initial_search_color; ?>" value="<?php echo $GLOBALS['lblg_search_text']; ?>" onfocus="if (this.value == '<?php echo $default_search_text; ?>') {this.value = '';this.style.color = '#000';}" onblur="if (this.value == '') {this.value = '<?php echo $default_search_text; ?>';this.style.color = 'gray';}"/>
<input type="hidden" id="searchsubmit" value="Search" />
</form>
