Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #498027

    Hi!

    I would like to know if there is a to show an image between the top of the page and the header.
    I have a sticky header & a boxed layout design in case it has some importance.
    Depending on what can be possible, I’m considering 2 options:

    1- Show the same image on all pages of the site, except the home page.
    2- Show a different image for each parent pages (7 different in total). All images would have ther same size. Preffered option if possible.

    Thanks in advance for your help!

    Best regards,
    Steph.

    #498450

    Hi Steph!

    Send us a link to your page and take a screenshot highlighting the exact area your wanting to customize so we can get a better idea.

    Cheers!
    Elliott

    #498502

    Hi Elliot, thanks for replying!

    The link to the page is: http://idetox.voyage/testmenu1/
    The desing I would like to reached is as shown on this image: http://i.imgur.com/lu24LCw.jpg

    Thanks in advance for your advice!

    Steph.

    #499081

    Hi!

    There is no default option for adding elements above the header so you have to modify the theme files directly. Go to the Appearance > Editor panel. Modify the header.php file. Look for this code:

    if(!$blank) //blank templates dont display header nor footer
    	{ 
    		 //fetch the template file that holds the main menu, located in includes/helper-menu-main.php
             get_template_part( 'includes/helper', 'main-menu' );
    
    	} ?>

    Above that, you can add another container. Something like this:

    <div class="custom-background-image container_wrap"></div>
    

    Use the Quick CSS field to apply the image as background.

    Regards,
    Ismael

    #499105

    Hi Ismael,

    Thanks for your reply.
    I’ve added your suggested line codes in Header.php file

    What would be the Quick CSS code lines I should add to select and apply the image in this container on top of Header?
    And is there a way to apply a specific image in this container for each of my parent pages?

    Thnaks in advance!

    Regards,
    Steph.

    #499881

    Hi!

    You can target your image using following selector

    .custom-background-image { opacity: 0.5; }

    You can change your code to following one

    
    <?php
    if(is_page(59)){ 
    echo '<div class="custom-background-image container_wrap"></div>';
    }
    if(is_page(99)){
    echo '<div class="custom-background-image container_wrap"></div>';
    }
    ?>

    Best regards,
    Yigit

    • This reply was modified 9 years, 2 months ago by Yigit.
    #499948

    Thanks Yigit!

    1- Concerning your first code line to target the image, I understand that I should insert this line in the Quick CSS but there is something missing.
    Indeed, once we have the class element custom-background-image, how do we link it with an image in the Media Library?

    2- Thanks also for the 2nd part of your reply to indicate which page shoud receive this custom-backgroud-image.
    I assume I have to copy this code lines in the header.php file, replacing the one Ismael provided. Let me know if I’m wrong.
    Now, what should be the code to ahve a DIFFERENT image (same size) for each different page?
    (There would be a total of 7 different images, 1 different for each parent page).
    Should your piece of code become something like this:

    <?php
    if(is_page(59)){
    echo ‘<div class=”custom-background-image1 container_wrap”></div>’;
    }
    if(is_page(99)){
    echo ‘<div class=”custom-background-image2 container_wrap”></div>’;
    }
    ?>

    Thank you once more for your light,
    Steph.

    #500204

    Hi!

    1.) You can do something like this:

    .custom-background-image1 { background-image: url('IMAGE URL HERE');
    .custom-background-image2 { background-image: url('IMAGE URL HERE');
    

    Get the image url from the Media > Library.

    2.) Yes, that is correct. Please refer to number 1.

    Regards,
    Ismael

    #500331

    Hi Ismael,

    Your explanation is very clear but I can’t get it to work!
    Below is a summary of what I’ve done following your advice (to get just 1 image for all pages):

    a.) In header.php, I’ve added the follwing: <div class=”custom-background-image container_wrap”></div>

    b.) Then in Enfold>General settings I’ve added the following Quick CSS code line:
    .custom-background-image { background-image: url(http://idetox.voyage/wp-content/uploads/2015/09/IMET1.jpg); }

    IMET1.jpg is the file name of my image in my library.
    I’ve tried also to write background-image: url(IMET1.jpg) and then background-image: url(“IMET1.jpg”)
    But that too doesn’t work.

    I must be missing a very simple stuff to get it correct and working but your help is very much appreciated!

    Regards,
    Steph.

    #501039

    Hi Team!

    I can’t imagine my issue to be of any problem for you guys …
    Maybe my topic has gone down the topic list since yesterday!

    I suspect there is a syntax error somewhere in one on these 2 code lines, maybe more likely in the one added in header.php:
    <div class=”custom-background-image container_wrap”></div>

    I searched on the web but can’t fing anything syntaxed container_wrap …

    Thanks in advance for your precious help!
    Steph.

    #501377

    Hi!

    Make sure that you’re copying the code directly from the forum instead of your email. Check if the syntax are intact. In the header.php file, add this:

    <?php
    f(is_page(59)){
    echo '<div class="custom-background-image1 custom-background container_wrap"></div>';
    }
    if(is_page(99)){
    echo '<div class="custom-background-image2 custom-background container_wrap"></div>';
    }
    ?>

    Adjust the page id if necessary. You can then add something like this in the Quick CSS field:

    .custom-background { background-size: cover; background-repeat: no-repeat; };
    .custom-background-image1 { background-image: url('http://idetox.voyage/wp-content/uploads/2015/09/IMET1.jpg');
    .custom-background-image2 { background-image: url('http://idetox.voyage/wp-content/uploads/2015/09/IMET1.jpg');

    Adjust the image url if you need to different backgrounds on different pages.

    Regards,
    Ismael

    #501508

    Hi Ismael!

    Thanks a lot for your answer / help.
    Your code lines seem quite logical to me but for some reasons, it still does not work.
    Here is a screen capture of Header.php file with lines highlighted in yellow: http://i.imgur.com/ebCQz1P.jpg
    I assume these lines are correctly located in the Header.php file (as per you first reply to this topic).
    With is_page(), I’m applying this image on all pages of my site.
    I don’t know how to get the page ID number of my static pages (I only have their permalink names).

    The screen capture of code lines of my Quick CSS are as highlighted in: http://i.imgur.com/Ret07ay.jpg

    Just in case it is significant, the image IMET1 I’m targerting in http://idetox.voyage/wp-content/uploads/2015/09/IMET1.jpg
    is 18Kb.

    Hope the screen captures might help you find out what’s wrong.
    Regards,
    Steph.

    #503131

    Hi!
    Anybody to highlight what’s wrong in the screenshots I posted last week (Sept. 11)?
    It must be an easy one for you Enfold support team …

    Wish you a nice day,
    Steph.

    #503134

    Hi!

    The code looks good. You can find the id when you edit the page. Inspect the url in the browser’s web address area, you’ll see something like this:

    http://yoursite.com/wp-admin/post.php?post=226&action=edit
    

    The “post=226” part of the url is the page id. Please post the login details here. We will add an example for you.

    Regards,
    Ismael

    #503167

    Thank you for the trick to get thepage ID Ismael!
    I now have exactly the same code as you posted on Sept. 10 (with pages ID being 59 and 31 respectively).
    I doesn’t help to make the code work though …

    I’ll keep on trying variants to see if I can make it work.
    If you see another way to achieve the same goal with a different code, please let me know!

    Thanks a lot,
    Steph.

    #503850

    Hey!

    The code should be enough to make it work. Again, we would like to ask for the login details so that we can add the code for you.

    Regards,
    Ismael

    #503866

    Hi Ismael,
    That’s very nice of you to propose the Enfold support up to that extent!
    You’ll find my login details in the private content.
    If you succeed in making it work, please let me know because I’m really fustrated of not understanding the reason behinf it.

    Thanks again so much!
    Steph.

    #503885

    Hi!

    You can check the test page here: http://idetox.voyage/testfullscreen/

    Check the codes on Quick CSS and header.php file.

    Best regards,
    Ismael

    #503905

    Hi Ismael!

    Thanks a lot for fixing the problem.
    I now understand where I was wrong.

    The topic can now be closed.

    Wish you a nice day.
    Steph.

    #504479

    Hey!

    Great! Glad we could help. Have a nice day! :)

    Best regards,
    Ismael

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Place an image betwen the top of page and the header’ is closed to new replies.