Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 29, 2014 at 6:03 pm #326697
    charlie1

    We would like to ad the image/logo and link to the header area that is in the bright green highlighted area in the following screenshot (http://prntscr.com/4rgz74). Can this be added to the top header area where we show it? If “no”, can we replace the Social Media icons with the image and link?

    September 30, 2014 at 6:33 am #327017
    Ismael

    Hi charlie1!

    Thank you for using Enfold.

    You can use this on functions.php:

    function add_custom_script(){
?>
<div class="header-meta-img"><img src="IMAGE URI HERE" /></div>
<?php
}
add_action('wp_head', 'add_custom_script', 10);

    Use the .header-meta-img selector to adjust the position of the container.

    Cheers!
    Ismael

    September 30, 2014 at 1:57 pm #327206
    charlie1

    Hello Ismael:
    You wrote:
    Use the .header-meta-img selector to adjust the position of the container.
    Where do I find this and how would I adjust this?
    Thank you.

    September 30, 2014 at 1:59 pm #327210
    Yigit

    Hey!

    You can add following code to Quick CSS in Enfold theme options under General Styling tab to adjust its position

     .header-meta-img { position: relative; left: 10px; top: -10px; }

    Best regards,
    Yigit

    September 30, 2014 at 2:37 pm #327240
    charlie1

    Unfortunately, the logo is not appearing after following your instructions. Maybe I made a mistake?
    1. This is what I added to the functions.php page:
    /*
    * Adds Gift Certificate Image to Header

    function add_custom_script(){
    ?>
    <div class=”header-meta-img”></div>
    <?php
    }
    add_action(‘wp_head’, ‘add_custom_script’, 10);

    2. This is what I added to Quick CSS:
    .header-meta-img { position: relative; left: 10px; top: -10px; }

    Here is the page with no logo at the top:
    http://23.235.201.84/

    Can you help me?

    September 30, 2014 at 2:38 pm #327244
    charlie1

    Here is the image reference:
    http://23.235.201.84/images/buy-a-gift-card.jpg
    <img src="http://23.235.201.84/images/buy-a-gift-card.jpg" />

    September 30, 2014 at 9:50 pm #327615
    Josue

    Hi!

    Try putting the image in HTML format along with the phone number in the theme options:
    http://screencast.com/t/7YmlCvs9Zl

    Regards,
    Josue

    October 1, 2014 at 4:54 am #327835
    charlie1

    Josue:
    Your alternative solution works, but it does not work well. Please see the following screenshot:
    http://prntscr.com/4ryi48
    By using your solution, these are the issues:
    1. on a desktop browser, notice all of the additional vertical space above the telephone number and below the social media icons. I have reduced the size of the Quickgifts image as much as I can.
    2. I have included a screenshot from my iPhone. Notice how the telephone number is no longer aligned center.
    3. Also, the telephone number is sitting right on top of the Quickgifts image. It would be very easy to acidentally hit one or the other.

    Yigit and Ismael had provided other solutions. But they did not work for some reason. Maybe they can determine why they did not work and we can fix these issues?

    October 1, 2014 at 5:34 am #327847
    Josue

    Hey!

    Now add this to Quick CSS:

    .phone-info a img {
    position: absolute;
    left: 36%;
    top: 8px;
}

@media only screen and (max-width: 767px) {
    .phone-info a img {
        display: none;
    }
}

    Best regards,
    Josue

    October 1, 2014 at 12:29 pm #327988
    charlie1

    Josue:
    The image has disappeared on my iPhone. I only see the telephone number now (and the telephone number is still not centered).
    Can you fix this?
    Here is all code from Quick CSS:
    h1, h2, h3, h4, h5, h6 { text-transform: none!important; }

    .phone-info {
    font-size: 18px;
    padding: 15px 0;
    color: #a70600!important;
    }

    @media only screen and (min-width: 1140px) {
    strong.logo {
    left: 20%;
    }}

    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 85%;
    height: auto !important;
    margin-top: 5px!important;
    }}

    div .logo {
    float: left;
    position: absolute;
    left: -5px;
    }

    .header-meta-img { position: relative; left: 10px; top: -10px; }

    .phone-info a img {
    position: absolute;
    left: 36%;
    top: 8px;
    }

    @media only screen and (max-width: 767px) {
    .phone-info a img {
    display: none;
    }
    }

    October 1, 2014 at 4:15 pm #328229
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
.phone-info span {
margin-left: 17%!important;
}}

    you may need to adjust the value to center it perfectly

    Cheers!
    Yigit

    October 3, 2014 at 3:13 pm #329733
    charlie1

    Hello Yigit:
    I have added your code but do not see the “Quickgifts” logo on my iPhone. I see it on my desktop browser, but not my iPhone.
    Here is the page that we are going to be using as our home page:
    http://23.235.201.84/homepage/home-v2-3-col-images-contact/
    Here is a screenshot showing the missing “Quickgifts” image:
    http://prntscr.com/4sndro

    Maybe there is some other CSS code that is creating the problem? Here is all of the “Quick CSS” codes that you have given to me that are live:
    h1, h2, h3, h4, h5, h6 { text-transform: none!important; }

    .phone-info {
    font-size: 18px;
    padding: 15px 0;
    color: #a70600!important;
    }

    @media only screen and (min-width: 1140px) {
    strong.logo {
    left: 20%;
    }}

    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 85%;
    height: auto !important;
    margin-top: 5px!important;
    }}

    div .logo {
    float: left;
    position: absolute;
    left: -5px;
    }

    .header-meta-img { position: relative; left: 10px; top: -10px; }

    .phone-info a img {
    position: absolute;
    left: 36%;
    top: 8px;
    }

    @media only screen and (max-width: 767px) {
    .phone-info a img {
    display: none;
    }
    }

    @media only screen and (max-width: 480px) {
    .phone-info span {
    margin-left: 17%!important;
    }}

    October 4, 2014 at 3:12 am #330044
    Ismael

    Hi!

    Please add this at the very bottom of the custom css codes:

    @media only screen and (max-width: 767px) {
.phone-info a img {
display: block;
position: relative;
left: -10px;
top: 10px;
}
}

    Regards,
    Ismael

    October 4, 2014 at 2:14 pm #330196
    charlie1

    Yeah! That did it! Thank you very much!

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Can we add logo and link to header area?’ is closed to new replies.