• Resolved Makway

    (@makway)


    Would you be so kind to help we with header image? It is said in settings: “Upload a header image. This will disable header title/logo and description.” But is there any possibility to leave title and description while uploading a header image? It is not good enough for my web-site to have just a header image without a title and description. Thanks a lot!

Viewing 10 replies - 1 through 10 (of 10 total)
  • bdbrown

    (@bdbrown)

    Hi Makway. You might try this:
    1. Copy header.php from the parent theme to your child theme.
    2. Locate the following code section in the middle of the file:

    <?php if ( ot_get_option('header-image') == '' ): ?>
    <div class="group pad">
    	<?php echo alx_site_title(); ?>
    	<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
    	<?php if ( ot_get_option('header-ads') == 'on' ): ?>
    	<div id="header-ads">
    		<?php dynamic_sidebar( 'header-ads' ); ?>
    	</div><!--/#header-ads-->
    	<?php endif; ?>
    </div>
    <?php endif; ?>

    3. Change the first line to this:

    <?php if ( ot_get_option('header-image') ): ?>

    4. Position and style the elements using css.

    Thread Starter Makway

    (@makway)

    The first message is posted using an interpreter. Sorry, I do not know much English. Show in the picture. After modifying it so as in the figure. How to do that red?
    Link to picture:
    https://yadi.sk/i/mbL9y1FnemEpa

    bdbrown

    (@bdbrown)

    Can you post a link to your actual site? That way we can see the issue. Thanks.

    Thread Starter Makway

    (@makway)

    Yes of course. https://kazaksbugra.ru/

    Thread Starter Makway

    (@makway)

    I have three days trying to solve this problem.
    If you do not modify the file header.php, as you said.
    A change file style.css:

    #header {
        background-image: url("https://kazaksbugra.ru/wp-content/uploads/2015/02/logo.gif");
        background-repeat: repeat;
    }

    The picture is inserted into the header. But it turns out the circumcision.

    Thread Starter Makway

    (@makway)

    Now Online modified file header.php:
    <?php if ( ot_get_option('header-image') ): ?>
    as you said.
    File style.css unchanged.

    Thread Starter Makway

    (@makway)

    I asked my friend to help me with translation, as the online translator cannot do the correct translation and you probably didn’t understand what I wanted to say.
    “Thank you very much for your quick reply!
    Unfortunately your decision helped me just partially. Probably I didn’t explain properly what I needed. After I made changes in header.php file, the header and the description moved on the top of the web-site and are under the picture at the moment. But I need the header and the description to be on the picture, like a picture is a background image. I can suppose I should make some changes in style.css file, for example to add a background image with specifying the path to the picture. But I cannot get it as the picture becomes trimmed to the size of the original area of the site. Here is the screenshot where you can see what happened after I made changes to header.php file. I marked with red what I want to happen. Thanks a lot!”

    bdbrown

    (@bdbrown)

    ok, here’s another option:
    1. Delete the header.php file in your child theme.
    2. Copy header.php from your parent theme to your child theme so we have a clean copy.
    3. Find the following section in your child theme header.php file:

    <?php if ( ot_get_option('header-image') ): ?>
    	<a href="<?php echo home_url('/'); ?>" rel="home">
    		<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
    	</a>
    <?php endif; ?>

    4. Change it to look like this:

    <?php if ( ot_get_option('header-image') ): ?>
    <div class="mydiv">
    	<?php echo alx_site_title(); ?>
    	<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
    	<a href="<?php echo home_url('/'); ?>" rel="home">
    		<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
    	</a>
    </div>
    <?php endif; ?>

    This now says, if we have a header image uploaded, show the site title, site description and the image.

    5. Go to Theme Options > Header and upload a Header Image.
    6. Remove the #header background css I posted above.
    7. Add the following css to your child theme style.css file:

    .site-title {
      float: none;
      position: absolute;
      top: 50px;
      left: 50px;
    }
    .site-description {
      float: none;
      position: absolute;
      top: 50px;
      left: 150px;
      font-weight: 700;
    }
    .site-image {
      display: block;
    }

    Let me know how that works.

    Thread Starter Makway

    (@makway)

    Thank you very much for your help and advices!
    I based your code from style.css file and made some modifications in order to get what I needed.

    Thread Starter Makway

    (@makway)

    It works!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘header image’ is closed to new replies.