WordPress.org

Forums

Customizr
[resolved] Want to add image to left of Tagline (11 posts)

  1. sovietski05
    Member
    Posted 1 year ago #

    Dear Folks,

    I've reviewed the snippets, and have read the few replies to people on here regarding images & taglines but to no real avail. The snippets do not provide a CSS code to add an left of the tagline (at least from what I've seen). I've been able to get in image into the header block area but it wouldn't align in any feasible manner.

    The website is http://www.buildexconstruction.com/home and is for a client. I'd like to put a few logos next to his business name to make it more appealing. I'm pretty sure this is possible and I'm simply missing something.

    Other than that, this theme rocks and gives a lot of flexibility.

  2. tomaja
    Member
    Posted 1 year ago #

    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.

  3. sovietski05
    Member
    Posted 1 year ago #

    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.

  4. tomaja
    Member
    Posted 1 year ago #

    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.

  5. sovietski05
    Member
    Posted 1 year ago #

    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?

  6. tomaja
    Member
    Posted 1 year ago #

    You have social icons block on the left side. It consumes about 40% of the available space (span5) while tagline has 60% (span7).

  7. sovietski05
    Member
    Posted 1 year ago #

    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??

  8. tomaja
    Member
    Posted 1 year ago #

    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.

  9. tomaja
    Member
    Posted 1 year ago #

    @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.

  10. sovietski05
    Member
    Posted 1 year ago #

    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!

  11. tomaja
    Member
    Posted 1 year ago #

    Good, I hope that this will work for you.
    Any feedback would be nice.
    Cheers

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic