Hi, you can use this function in your child theme functions.php file
add_filter( 'tc_tagline_display' , 'my_icon_in_tagline');
function my_icon_in_tagline() {
global $wp_current_filter;
?>
<?php if ( !in_array( '__navbar' , $wp_current_filter ) ) :?>
<div class="container outside">
<h2 class="site-description">
<img src="http://icons.iconarchive.com/icons/iconshock/google-buzz/24/buzz-9-icon.png" alt="Buzz">
<?php bloginfo( 'description' ); ?>
</h2>
</div>
<?php else : //when hooked on __navbar ?>
<h2 class="span7 inside site-description">
<img src="http://icons.iconarchive.com/icons/iconshock/google-buzz/24/buzz-9-icon.png" alt="Buzz">
<?php bloginfo( 'description' ); ?>
</h2>
<?php endif; ?>
<?php
}
Icon in example is just some buzz icon, you need to replace it with the link to your icon. If you need more icons, just make few more <img> tag lines.
I hope this will help.
Awesome, it definitely produces the result I was looking for and exactly in the area I wanted. Thank’s a bunch!
If anyone else or you have time to develop this further it might be very useful for a lot of people. For instance, how much control over that image can you exercise? Is it possible to add ‘padding’ to it, or line it up with the text so the beginning of the text and the beginning of the photo starting at the bottom fell on the same line?
I’ve been able to do some control with CSS in terms of opacity and its linked with the text in the tagline, which isn’t a problem.
Also, the function uses 2 instances of the photo I suppose in different circumstances? The span7 is familiar from when I dealt with columns, is that related? I’m very interested in php and this language and as I develop would love to soak as much knowledge as possible.
You can always add class to the img tag
like <img src="link_to_image" class="image_class">
and after that you can apply all the css rules in style.css that you want.
I also recommend to you to take a look at Customizr snippets page, its great resource
Btw, you can make this thread resolved. Thanks.
One last thing, it seems either the photos or the text only reach half way to the header box and the wrap back around. What is preventing content from spreading out across the entire box?
You have social icons block on the left side. It consumes about 40% of the available space (span5) while tagline has 60% (span7).
I guess the desire is to eventually occupy all that empty header space with icons to liven it all up. I see three possible methods, correct me if I’m wrong,
1.) Change the span’s for the tagline and social icons to get as much space for the tagline.
2.) Somehow add images below the social icons without altering the tagline content.
3.) Completely remove the social icon container and have the entire header fair game?
Am I making sense or am I way off??
It make sense :), especialy 1 and 3.
You can add
.navbar-inner .social-block {
display: none;
}
to your custom css to remove social icons block and then you can enlarge span number (up to 12) in above function.
@sovietski05
For your option 1 you could use real-time-find-and-replace plugin to replace e.g. <div class="social-block span5">
with <div class="social-block span3">
and <h2 class="span7 inside site-description">
with <h2 class="span9 inside site-description">
or you can copy class-header-header_main.php to your child theme where you can change those span values.
Its going to be great I think! I haven’t had a chance to test it out yet but everything has made sense now that I’ve seen all the stuff that came before. Pretty cool stuff I must admit.
I’ll mark it as RESOLVED 🙂 Hopefully others will be able to use this for their own projects.
Thanks Tomaja!
Good, I hope that this will work for you.
Any feedback would be nice.
Cheers