Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #163378

    Hi.

    I just bought Enfold Theme, very nice.

    I need to insert an image above the header, I was wondering if I can insert a new div tag in the header.php file. The div is going to have a sinle image and nothing else.

    Coul you provide the PHP code? I’ll appreciate that a lot.

    Thanks, regards.

    • This topic was modified 11 months, 2 weeks ago by  infiniteloop.
    #163581

    Hello infiniteloop!

    Can you post a screenshot and show us where exactly you would like to display image on header?

    Best regards,
    Yigit

    #163686

    Hello Yigit, Thanks for your answer.

    This is what I have now:

    http://postimg.org/image/k5er27bq9/

    And I would like to have this

    http://postimg.org/image/ue7880zs1/

    So I was wondering if I can have another div element above the main header and inside the main container. I´m using the small header fixed type, no social Icons, but maybe my client would like that in the future. Also I thought that maybe I can have a <body> background-image and set a margin-top for the main container

    This is my HTML code as generated by the server:

    <div id="wrap_all">
        <span class="web-developer-id-class-details"> … </span>
        <div id="header" class="header_color light_bg_color mobile_drop_down">
            <span class="web-developer-id-class-details"> … </span>
            <div id="header_main" class="container_wrap container_wrap_logo">
                <span class="web-developer-id-class-details"> … </span>
                <div class="container" style="height: 140px; line-height: 140px;"> … </div>
                <!--end container_wrap --> 
            </div>
            <span class="web-developer-id-class-details"> … </span>
            <div class="header_bg"></div>
            <!--end header  --> 
        </div>

    My background image is in the Div class “header_bg” and this is the CSS:

    .header_color .header_bg {
    background-attachment: scroll;
    background-image: url(“http://localhost:8888/ENTREVENTOS/wp-content/uploads/2013/04/header_image_2.png”);
    background-position: center top;
    background-repeat: no-repeat;
    }

    Best, thank you very much.

    #163941

    Hi!

    Edit header.php, find this code:

    <div id='wrap_all'>
    
    		<?php if(!$blank){ ?>

    Below add something like this:

    <?php echo '<div class="header-top"></div>'; ?>

    Then add this on your custom.css or Quick CSS:

    .header-top {
    	position: relative;
    	z-index: 400;
    	width: 100%;
    	height: 100px;
    	background-color: transparent;
    	background-attachment: scroll;
    	background-image: url('IMAGE URL HERE');
    	background-position: center top;
    	background-repeat: no-repeat;
    }
    

    Regards,
    Ismael

    #164088

    Hi Ismael,

    Thanks a lot! I´m working on this and seems to work, now I’m having some issues with -I think- transparencies and z-index, trying to find the code to fix it, maybe I wil have to bother you again. In the meantime, I´ll try my best :)

    #164197

    Hola!

    If you upload your site and post the link we can easily help you with that :)

    Cheers!
    Josue

    #164208

    Hola Josue!

    ¿Hablas Español? :)

    Thanks a lot you guys! I’m working locally at the moment, I think I´m not doing it so bad :) I inserted the code as Isamel told me and it worked, nevertheless I needed to have that extra div inside the “fixed header div” so I inserted the code into that div and it´s working better. I had to make some adjustings to margins. Other Header Options like social icons re not working well.

    I’ll upload the site this weekend, post my custom tweaks to the code so you can teel if I’m doing it really bad! :)

    Thanks again!

    #164210

    Hola,

    Si, si te sientes mas cómodo puedes escribir en español, aunque seria mejor que lo hagas en otro hilo ya que aquí esta interviniendo el resto del team.

    Sobre tu sito, estamos a la espera entonces a que lo subas para poder ayudarte mejor :)

    Saludos,
    Josue

    #165332

    Hi Guys!

    I’ve got my site online:

    http://entreventos2.lafabricadigital.com.mx/

    Issues I’m having trouble with:

    1. Menu Links: Placing cursor exactly over links does not work. Link is below type.

    2. I used a smaller logo (227 x 123px) than the recommnded maximum size on the administrator theme options which is 340 x 156 px, nevertheless logo keeps resizing. I don’t want that because it loses resolution, original size is -almost- pixels perfect :)

    3. On resposive, logo falls over my <div id=header-top>, also breadcrumbs and main container are not where they should be, For sure is the margin I’m using in desktop viewport.

    4. Fixed Header with social icons and links falls over header-top image. Maybe client would request taht in the near future.

    Maybe making header-top image responsive (reducing size as viwport changes) would help?

    Here is the code:

    Header.php

    <div id='header' class=' header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerMenu; ?>'>
            
            <!-- This is my extra div element-->	
            <?php echo '<div class="header-top"></div>'; ?>
            <!-- Ends extra div element-->
    
    		<?php
    
    		$social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
    
    		//subheader, only display when the user chooses a social header
    		if(strpos($headerS,'social_header') !== false)
    		{
    		?>

    Custom CSS:

    .container_wrap {
        border-top: none;
    }
    .header-top {
    	position: relative;
    	z-index: 400;
    	width: 100%;
    	height: 80px;
    	background-color: transparent;
    	background-attachment: scroll;
    	background-image:url(../../themes/enfold-child/images/header_image_2.png);
    	background-position: center top;
    	background-repeat: no-repeat;
            margin-bottom: -50px;
    }
    
    .title_container{
            margin-top: 35px;
    }

    Needless to say I’m not sure if I’m doing this the right way. I’ll appreciate your help a lot.

    Thank you, regards.

    #165473

    Hi!

    1.) Add this on your custom.css:

    .header-top {
    z-index: 1;
    }

    2.) To increase the logo size, use this:

    .logo, .logo a {
    height: 115px;
    margin-top: -13px;
    }

    3.) Use this to resize header top on smaller screens:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .header-top {
    z-index: 1;
    width: 80%;
    height: 80px;
    margin: 0 auto;
    }
    }

    4.) I’m sorry but you need to open a new topic for this if in case the client requested it.

    Best regards,
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Changing the Header Add an Extra DIV’ is closed to new replies.