Replace Abundance Header Search Bar and Social Icons with an image « Support Forum | Kriesi.at

Support Forum » Abundance

Replace Abundance Header Search Bar and Social Icons with an image

11 posts from 6 voices

Started 3 months ago by schaferu
Latest reply from Kriesi
This topic is not a support question

Tags:

schaferu
Member

morning team

I read some other posts on editing "header.php" but my efforts did not work.

where exactly do I have to place this code to replace both the search field and the social icons please?

echo "<div class='header_meta'>";

echo "</div>";

Here is my header.php file section:

/*
* display the theme search form
* the tempalte file that is called is searchform.php in case you want to edit it
*/
get_search_form();
?>

<ul class="social_bookmarks">
<?php do_action('avia_add_social_icon','header'); ?>

<li class='rss'>">RSS
<?php
if($twitter = avia_get_option('twitter')) echo "<li class='twitter'>Twitter";
if($facebook = avia_get_option('facebook')) echo "<li class='facebook'>Twitter";
?>



thanks people
U

Posted 3 months ago #

Dude
Dude

In header.php replace following code:

get_search_form();
					?> 

					<ul class="social_bookmarks">
						<?php do_action('avia_add_social_icon','header'); ?>

						<li class='rss'><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
						<?php
						if($twitter = avia_get_option('twitter')) echo "<li class='twitter'><a href='http://twitter.com/".$twitter."'>Twitter</a></li>";
						if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a href='".$facebook."'>Twitter</a></li>";
						 ?>
					</ul>
					<!-- end social_bookmarks-->

with:

?>
					<img style="float:right;" src="my-image.jpg" alt="" title="" />

Obviously you need to insert the image url, the alt and title tag data. Maybe some style adjustments are required but this depends on the image size, etc.

Posted 3 months ago #

schaferu
Member

Thanks for that.. Image shows now. Couple more questions please:

1. It increased the header size to over 300 (image height is 180) and slipped basically to a line below the left logo (still on right side though)

2. How can I make it linkable.. I added href...to the above code, but it doesn't link

thanks

Posted 3 months ago #
Devin
Moderator

Hi schaferu,

We would need to see the site live to inspect what you have now for #1.

For #2, your link needs to be formatted like this:
<a href="http://yourlink.com"><img style="float:right;" src="my-image.jpg" alt="" title="" /></a>

See: http://www.w3schools.com/tags/att_a_href.asp

Regards,

Devin

Posted 3 months ago #
schaferu
Member

thanks Devin, how do i get my URL to you in private please?

Posted 3 months ago #
superfoods
Member

Hi, I have the same problem. I would like to put the image: webshop keurmerk next to the rss feed.

I tried everything, but the image will constantly go beneath the logo or search form.

You can see it here: http://www.superfoodkitchen.nl

Thank you for your time!

Kind regards, Anita

Posted 3 months ago #
Ismael
Moderator
Hi superfoods,

@superfoods: You can add this on your custom.css
```
.keurmerk a {
width: 150px;
height: 60px;
}

.keurmerk {
position: absolute;
left: -135px;
top: 0;
}
```
I'm not sure if you can fit it below the searchbar. Try to experiment on the left and top position.

Regards,
Ismael
Posted 3 months ago #
superfoods
Member

Thanks Ismael, it works. Only everything that i put in custom css or quick css won't work. I have to write it down in minimal-skin...

The image webshop keurmerk must not be transparent: wat is wrong with this code:

.social_bookmarks .keurmerk a{background: url(../images/skin-minimal/webshop_keurmerk.png) 0 0 no-repeat;}

The tranparent code is gone compared to the other social icons, but it is still tranparent... Thanks for your time!

Kind regards, Anita

Posted 3 months ago #
Devin
Moderator
Hi Anita,

You can force the opacity for that single class with:
```
.keurmerk a {
opacity: 1 !important;
}
```
The opacity is set on the entire social links ul so it has to be re-set with the individual link class.

There should be no reason you have to put your items in the minimal skin css file. The custom.css file is loaded after all others so so it should take priority. Just make sure you are giving the page a few hard refreshes and if you have any caching plugins, re-fresh their cash as well.

Regards,

Devin
Posted 3 months ago #
superfoods
Member

Thanks Devin, works fine!

Posted 3 months ago #
Kriesi
Key Master

Hey!

Great, glad we could help! if you have any more questions feel free to open up a new thread ;)

Regards,
Kriesi

Posted 3 months ago #