[zigster]

I am trying to display an image and text in my header. The default seems to be that the image appears above the text, but I would like it to appear to the left of the text.

I’m using a child theme, and I tried hooking in a custom “catchbox_headerdetails_child” function, which is a modified copy of catchbox_headerdetails. So far I’ve succeeded in getting the image to the RIGHT of the text! lol – not what I expected.

At this point I think I need help! Here is my custom function. Any help vastly appreciated!!!

function catchbox_headerdetails_child() { ?>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<span id=”site-logo”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
<img src=”<?php header_image(); ?>” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” />
</a></span>
<?php endif; // end check for removed header image ?>
<div class=”logo-wrap clearfix”>
<hgroup id=”site-details”>
<h1 id=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
<h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>
</div><!– .logo-wrap –>
<?php }

[Sakin]

@zigster: You don’t need to change any code. Just add the following CSS in “Custom CSS” box in Theme Options panel.

#branding hgroup { display: inline-block; }
#site-logo { float: left; }
#site-details { float: left; padding-left: 15px;}
#site-title, #site-description { margin: 0 }


[zigster]

@Sakin – that worked perfectly! And way easier than what I was trying to do. 🙂

Thanks!!!

[Edward]

I’m new to Catch Themes and have been working with Catchbox Pro.
I would like insert a header image either to the left or right of the header text. Adding the custom CSS above did not work – it seemed to do nothing at all.

My site is here.

Also, once I position the header image properly, I would like to have a slide show in the header image.

Thanks much,
Ed

[Sakin]

@Edward:
1. You can add following css in “Appearance => Theme Options => Custom CSS” box to align header image with site title and tagline.

#hgroup { float: left; margin-left: 20px; }
@media screen and (max-width: 640px) {
    #site-logo, #hgroup { display: block; float: none; }
    #hgroup { margin-left: 0; }
}

2. To add Slider, you need to go to “Appearance => Theme Options => Featured Slider => Slider Options”. Then select Slider Type, Slider Layout and Enable Sidebar and setup accordingly. For more, refer to theme instructions page at http://catchthemes.com/theme-instructions/catch-box-pro/

[Edward]

Thanks for your very quick reply.
It didn’t work, however. The image is still stuck above the text.

As to a “slide show” for the header, however, I was able to do something with Header Options –> Customize Header –> Random Uploaded Images. Then, the image will change when I change pages or refresh.

As to a slider, if I do that, will it be in the header?

Thanks again,
Ed

[Sakin]

@Edward: I don’t see the css that I gave you in your site Custom CSS box.

[Edward]

Sakin,
I took it away when I added CSS that widens the boxes, which I found from one of your other posts.
I just put it back, but result is the same.
I would appreciate any help.
Regards,
Ed

[Sakin]

@Edward: oh ok I found it. Replace the previous css that I gave you with the following css:

#site-logo { float: left; }
#hgroup { float: left; margin-left: 20px; }
@media screen and (max-width: 640px) {
    #site-logo, #hgroup { display: block; float: none; }
    #hgroup { margin-left: 0; }
}

[Edward]

Thanks again.

Sorry to be a pain, but what would I change if I wanted the photo to the right of the text?

If I move the photo to the right of the text in the computer version, I assume that it will move the text to be on top of the photo in the mobile version. (Right now, the photo is above the text in the mobile version.)

Thanks,
Ed

[Sakin]

@Edward: Ok for that, you need to go to “Appearance => Theme Options => Header Options”, check in “Move Site Title and Tagline” and save changes. Then you need to replace previous css with the following:

#hgroup { float: left; }
#site-logo { float: left; margin-left: 20px; }
@media screen and (max-width: 640px) {
    #site-logo, #hgroup { display: block; float: none; }
    #site-logo { margin-left: 0; }
}

[Author]

Posts