Adding a graphic next to the search bar

Vfxdude » BigFeature

Adding a graphic next to the search bar

(5 posts) (2 voices)

Started 1 year ago by Lara
Latest reply from vfxdude

Tags:

navigation

Lara
Member

Hi there.

I am using a child theme and I was wondering if it is possible to add a graphic on the right of the search bar. http://new.docbc.org/

Thanks
Lara

Posted 1 year ago #
vfxdude
admin
you can create your own custom headerFeatures function in the child theme (functions.php), like this:
```
add_action( 'bf_top', 'customHeader' );
add_action( 'wp_head', 'remove_actions' );

function remove_actions() {
	remove_action( 'bf_header', 'headerFeatures' );
}

function customHeader() {
// add stuff here
}
```
you can copy the code from headerFeatures() function (in theme-functions.php in the library/functions folder) into the customHeader one, and add/remove whatever you want.
Posted 1 year ago #
Lara
Member

Hi there

I used this code in functions.php (as specified) and added styles in my stylesheet (see below). It seems as though there is a hard return after the search bar that I can't get rid (I want the join icon on the right side after search).

/********************************************************************************
Finctions.php
*********************************************************************************/

//Custom Fuction Override

add_action( 'bf_top', 'customHeader' );
add_action( 'wp_head', 'remove_actions' );

function remove_actions() {
remove_action( 'bf_header', 'headerFeatures' );
}

function customHeader() {
global $bf_features, $bf_feed_url, $bf_nav_style;

if (in_array('Logo', $bf_features)) {
?><div id="logo">">" alt="<?php _e('logo','BigFeature'); ?>" /></div>
<?php }

if (in_array('Sitename', $bf_features)) {
if (is_single() || is_page()) {
?><h2 class="blog-title">"><?php bloginfo('name'); ?></h2>
<?php } else {
?><h1 class="blog-title">"><?php bloginfo('name'); ?></h1>
<?php }}

if (in_array('Slogan', $bf_features)) {
?><p class="description"><?php bloginfo('description') ?></p>
<?php }

headerAd();

if (in_array('RSS Icon', $bf_features)) {
?><div id="rss">">/images/rss_icon.png" alt="<?php _e('rss icon','BigFeature'); ?>" /></div>
<?php }

if (in_array('Search', $bf_features) && strpos($bf_nav_style,'navbar') !== false) {
?><div id="topsearch"><?php get_search_form(); ?></div>
<?php }
}

//end

/********************************************************************************
Logo, Navigation, Search and Join
*********************************************************************************/

#logo {
float: left;
margin: 25;
//padding: 25px 0px 0px 150px;
padding: 0px 0px 0px 0px;
}

ul.navigation.navbar {
float: right;
//width: 450px;
width: 475px;
border: none;
margin-top: 25px;
}

ul.navigation li a {
color: #444;
font-size:9px;
text-transform:uppercase;
}

#topsearch {
float:right;
margin-top: 9px;
padding: 10px 10px 0px 0px;
}

.joinicon{
//padding: 10px 150px 0px 0px;
}

Posted 1 year ago #
Lara
Member

URL: http://new.docbc.org/

Posted 1 year ago #
vfxdude
admin

the searchbox is floated to the right. Add the icon before the search and also float it to the right:

#joinbox { float: right; }

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.