-
AuthorPosts
-
August 8, 2013 at 4:31 pm #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
August 12, 2013 at 11:29 am #132579Hi 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
-
AuthorPosts
- The topic ‘Scroll in main image product pages’ is closed to new replies.