Here is my scss code:
#import "compass";
#import "compass/css3/pie";
#import "compass/css3";
#import "compass/utilities";
#import "compass/utilities/general/hacks";
$pie-behavior: url("./PIE.htc");
.align-center {
text-align: center;
margin-bottom: 0 !important;
}
.btn {
#include pie;
#include border-radius(25px);
text-align: center;
#include box-shadow(rgba(black, .39) 0 2px 3px);
font-size: 10px;
#include text-shadow(rgba(black, .5) 0 1px 0);
#include filter-gradient(#e6478b, #bf3b74);
background: #bf3b74;
#include background-image(linear-gradient(#e6478b, #bf3b74));
vertical-align: middle;
text-transform: uppercase;
color: white;
border: none;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0 auto;
letter-spacing: 1px;
padding: 7px 20px;
line-height: 18px;
position: relative;
&.grey {
#include filter-gradient(#cfcfcf, #888888);
background: #cfcfcf;
#include background-image(linear-gradient(#cfcfcf, #888888));
}
}
for some reason rounded corners are not being picked up in IE. The corners are square. I have looked at a ton of Google examples and how I have it is how everyone else has it. Any reason why this wouldn't work?
rendered CSS:
.btn {
behavior: url("/stylesheets/PIE.htc");
position: relative;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
text-align: center;
-webkit-box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
font-size: 10px;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE6478B', endColorstr='#FFBF3B74');
background: #bf3b74;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6478b), color-stop(100%, #bf3b74));
background-image: -webkit-linear-gradient(#e6478b, #bf3b74);
background-image: -moz-linear-gradient(#e6478b, #bf3b74);
background-image: -o-linear-gradient(#e6478b, #bf3b74);
background-image: -ms-linear-gradient(#e6478b, #bf3b74);
background-image: linear-gradient(#e6478b, #bf3b74);
vertical-align: middle;
text-transform: uppercase;
color: white;
border: none;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0 auto;
letter-spacing: 1px;
padding: 7px 20px;
line-height: 18px;
position: relative;
}
Check out http://compass-style.org/reference/compass/css3/pie/
This will install an example stylesheet and a PIE.htc behavior file that must be loaded into your pages for IE. This file must be delivered with the following mime-type:
Content-Type: text/x-component
Related
I tried following advice about this issue from other chat rooms but with no luck. I am using Unbounce and I copied all codes from one old landing page to a new one. Everything works except the arrows are not visible (yet they are clickable, they work).
All I managed to do so far was removing the frame around the arrows.
Any idea what could be wrong?
Link to the new LP
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
#media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>
You lose Font Awesome css, which is required as the nav arrow.
add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
to <head> section. (Just as the working page does, check it's source code line 2825). Good luck.
I want to change arrow color as well as circle when click on it. I am using LESS and getting right place to add border-top-color: #0066ff; Can anyone suggest please? Here is code:
LESS:
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
}
&:after {
top: 104%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #ff6600;
border-width: 10px;
margin-left: -10px;
transform: scaleY(1.6);
&.selected {
border-top-color: #0066ff;
}
}
}
HTML:
<div class="circle"></div>
JS:
$(document).ready(function(){
$('.circle').on('click', function(){
$(this).addClass('selected');
});
});
JS fiddle is here:
https://jsfiddle.net/kunjsharma/6eu431hp/1/
You need to put :after inside .selected: see this fiddle
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
&:after { // <-- moved this inside .selected
border-top-color: #0066ff;
}
}
// rest of the styles...
}
I am trying to put the divs side by side with flexbox, but on safari for mac is not working.
Chrome, Firefox, Edge and Internet Explorer 11 it is working.
Someone can help me? hehe
all browsers
safari
It looks like the white block has box-sizing: content-box, but it does not have...
Does anyone know why?
The code: fiddle
.flex {
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.box-full {
width: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
margin-bottom: 34px;
}
.box-fridge {
&:last-of-type {
margin-bottom: 40px;
}
.block-left {
padding: 21px 22px;
flex-grow: 2;
}
.block-right {
border-radius: 0 3px 3px 0;
background-color: #4681A8;
max-width: 190px;
flex-grow: 1;
}
.title-fridge {
font-size: 24px;
font-weight: 500;
line-height: 29px;
}
.desc {
font-size: 12px;
font-weight: 300;
line-height: 15px;
margin-top: 17px;
}
.block {
align-self: center;
color: #fff;
flex: 1 1 auto;
}
.price {
font-size: 24px;
line-height: 29px;
}
.period {
font-size: 10px;
line-height: 12px;
margin-top: 6px;
text-transform: uppercase;
}
}
In prestashop 1.7 moble menu is active from 768 screen size . I need to change this size to 991 . How to change this ? Also there is anyway to know viewport size in tpl.
You can use this piece of css if you are using bootstrap.css
#media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
/*margin: 7.5px -15px;*/
margin: 7.5px 50px 7.5px -15px
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
Edit your /prestashop/themes/[theme]/assets/js/theme.js file.
Search for 768 or default.responsive.min_width and replace the numeric value with your pixel value.
i want to make a material like slider. The slider handle should get bigger when pressed, but when I click on it, it makes this:
top: not clicked, bottom: klicked
And after I move the handle its getting bigger.
I'm using a stylesheet:
...
QSlider::handle:horizontal {
background: #009ceb;
width: 24px;
margin: -12px 0;
border-radius: 12px;
border-style: solid;
border-width: 1px;
border-color: #009ceb;
}
QSlider::handle:horizontal:pressed{
background: #009ceb;
width: 36px;
margin: -18px 0;
border-style: solid;
border-radius: 18px;
border-width: 1px;
}
...