Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #27051

    Hello

    I have a scroll bar showing on the product page on my site on the image when hover on the image. I do not need it and want to remove it. Can you let me know how?

    It can be seen here on hover over the image

    http://paadonline.org/?product=colchon-prestige-2

    It’s the same in chrome and firefox

    Another question about buttons styling. I noticed that you have 2 different styles in enfold:

    – The generated with shortcodes (with gradients)

    – The used in contact forms and in the shop – Flat

    I prefer the flat and I don’t want to mix styles, how can I use that with shortcodes or with the layout builder?

    Thanks,

    Jorge

    #132579

    Hi Jorge,

    Terribly sorry for the delay. It’s my fault entirely and I apologize to you.

    1) This will remove the scroll bar , please add it to quick css located in enfold > (theme options) > styling layout at bottom of page … the text area…. OR.. you can paste it to the bottom of the /cs//custom.css file

    #top .widget ul {
    margin-left: 4px !important;
    }

    2) The reason for the difference is that one type of button is actually a button (the html input button element for forms) while the other is a pseudo-button – basically a div and style html elements that are made up to resemble and act as a button..

    So you like the look as the blue button on your website in the footer ‘Enviar’ ?

    Well the easiest thing to do would be for you to add the following structure whenever you want to create a button such as this. It may not be a short-code but here you go. Please add this to quick css (see above for instructions)

    #top .new-button .blue-btn{
    background-color: #2F83CC;
    color: #FFF;
    border-color: #2F83CC;
    margin: 0;
    padding: 16px 50px;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }
    #top .new-button .blue-btn:hover {
    background-color: #AAA;
    color: #222;
    border-color: #AAA;
    }
    #top .new-button {
    margin: 10px;
    padding: 22px 0px;
    border-radius: 53px;
    cursor: pointer;
    border: 1px;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 100px;
    }

    and when you need that blue button just add the following to your editor (in text view) You will need to replace (1) URL (2) What the Button Should say

    <a href="HTTP://WWW.REPLACE.ME"><div class='new-button'><span class='blue-btn'>CLICK ME REPLACE</span></div>

    Thanks,

    Nick

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Scroll in main image product pages’ is closed to new replies.