Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • November 6, 2015 at 10:35 am #531386
    YOUNIS

    Hello anyone,

    I want to integrate a “button” how i saw it on an other page in the left upper corner of each slider photo that links to a page (for special offers!)

    This is my website http://www.ihr-personaltrainer.at
    And on that website I saw this “button” in a star form http://www.koerper-training.at

    I don´t now if this is with my enfold theme possible, but maybe someone of you can help me!

    Thanks in advance for your help!

    November 6, 2015 at 4:23 pm #531503
    Elliott

    Hey Younis_FARES!

    Are you wanting to display it on all of the slides so it does not disappear when transitioning? If so then you can do this, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, and then add it inside a text widget and use CSS to position it over the slider.

    Otherwise you could add it to the slide caption you want it to display on and use CSS to position it in the top left corner.

    Go ahead and add it in and let us know when your done and we’ll give you some CSS to use.

    Regards,
    Elliott

    • This reply was modified 9 years ago by Elliott.
    November 7, 2015 at 12:48 pm #531844
    YOUNIS

    Hello Elliott,

    thank you for your answer! :)
    I now added the css to the functions.php and create a new widget named “header” and put a text widget inside it.
    Now I need some css or other help that I have such a “star” symbol where the text is inside and I need it that when someone clicks on this “star” widget that he comes to a page (which I have to create) where my special offers are!
    Is that possible?!

    Thanks again for your help!

    November 9, 2015 at 6:10 pm #532806
    Elliott

    Hey!

    Inside the text widget add this.

    <a href = "URL to your page"><img src = "URL to your star image" /></a>

    That will display an image (your star image) and a link surrounding it so when it’s clicked on it will navigate to whatever page you need.

    Regards,
    Elliott

    November 11, 2015 at 11:36 pm #534439
    YOUNIS

    Hello Elliott,

    thank you for your css code!!!
    I included it () in the text widget and the star image and the link to the page works great!!

    BUT now i have the problem that the star image is displayed on any page of my website and my goal was to display it only on the start page in the slider and on no other pages!
    And additional the position of the star image is to high, so that i cuts off a part of the image.
    Could you please help me that the star image is only displayed on the start page and that i can customize the position of the image?!

    Thanks again for your fast answer!! :)

    November 12, 2015 at 1:03 pm #534702
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    #header .widget {
display:none;
}

.home #header .widget {
display:block;
}

    Regards,
    Rikard

    November 12, 2015 at 2:22 pm #534749
    YOUNIS

    Hello Rikard,

    your CSS Code is perfect and solved the problem!!! Thank you a lot for that!! :)

    Do you also know a solution that I can choose the position of the star image individually / customized?!

    Thanks again for your fast answer!!

    November 13, 2015 at 6:05 am #535228
    Rikard

    Hi,

    I couldn’t see the widget on the page so I can’t give you the correct code, could you put it on the live site please? If you are only using the one widget you could try using the following code: 

    #header .widget {
top:20px !important;
right: 60px !important;
}

    Adjust the values to your liking.

    Regards,
    Rikard

    November 16, 2015 at 1:44 pm #536463
    YOUNIS

    Hello Rikard,

    thank you for providing the css code, it works great!!
    I took this position to set the star widget on the right place, where I want it:
    #header .widget {
    top:400px !important;
    right: 168px !important;
    }
    And also I deleted the first css code, because now I want to display the widget on any site and not only the start page!
    BUT now there is a problem with the mobile version (on smartphones) because there the widget does not automatically decreases.
    Is it possible that you can check that and provide me a solution (maybe also css code or something else) to solve this display problem with the mobile version?!

    Thanks a lot for your help!!

    November 16, 2015 at 1:58 pm #536474
    Yigit

    Hi!

    Please change the code to following one 

    @media only screen and (min-width: 990px) {
#header .widget {
top:400px !important;
right: 168px !important;
}}

    and then adjust it for different screensizes using following code

    /* for tablets */
@media only screen and (max-width: 990px) and (min-width: 769px) {
#header .widget {
top:400px !important;
right: 168px !important;
}}

/* for landscape mode of smartphones and portrait mode of tablets */ 
@media only screen and (max-width: 768px) and (min-width: 481px) {
#header .widget {
top:400px !important;
right: 168px !important;
}}

/* for smartphones */
@media only screen and (max-width: 480px) {
#header .widget {
top:400px !important;
right: 168px !important;
}}

    Cheers!
    Yigit

    November 16, 2015 at 7:35 pm #536852
    YOUNIS

    Hello Yigit,

    thanks for your answer!
    As you told me I changed the css code and included the other 3 css codes, but it still don´t works.
    On the mobile version the widget is nearly completely cut off and upper the slider is now a white area.
    And on the desktop version the widget is, when you reduce the browser window, also cutt off.

    Please could you check that again, what the problem is and provide a solution!
    http://www.ihr-personaltrainer.at

    Thanks again!!

    November 18, 2015 at 5:00 pm #538316
    Andy

    Hi!

    it does look good for me on mobile and desktop:

    View post on imgur.com

    Clear browser cache and hard refresh a few times.

    Regards,
    Andy

    November 22, 2015 at 10:51 am #540327
    YOUNIS

    Hell anyone in this thread,

    please could you help me very FAST!!

    This star widget I have included on my website http://www.ihr-personaltrainer.at/?page_id=26 makes, that the “send” button of my contact form does not work anymore, so potentially clients can not contact me about the contact form anymore!!

    Please could you help me very FAST, without that I have to delete the widget from the contact form site!!

    Thanks a lot!!

    November 22, 2015 at 1:00 pm #540339
    YOUNIS

    I now recognized that the star widget causes issues on ANY pages of my websibte where hyperlinks or sending buttons are included!!

    Also on the page http://www.ihr-personaltrainer.at/?page_id=880 and on another page, which I have yet not published, when I scroll down so that the star widget is in the same height as the hyperlinks or send button they don´t work anymore!!

    Please help me fast!!

    Thank you!!

    November 22, 2015 at 1:18 pm #540344
    YOUNIS

    I now included, as a part time solution, this Quick CSS code, to block the star widget on any sites, but the start page!
    Because on the start page I have no hyperlinks or send buttons.
    But this is not a solution because I want to display the star widget on any menu page!
    Please help!!

    #header .widget {
    display:none;
    }

    .home #header .widget {
    display:block;
    }

    November 22, 2015 at 4:02 pm #540359
    YOUNIS

    PROBLEM SOLVED!!!

    November 23, 2015 at 8:57 am #540568
    Rikard

    Hi,

    Great, glad you got it fixed :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Add a small "button" in the left upper corner of each slider photo!’ is closed to new replies.