I am using the same CSS sheet for all the html pages on our website.
This is the CSS container:
#Container {
position: relative;
top: 5px;
width: 1000px;
height: 600px;
margin: 0 auto 0;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
border-color: #CCC;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
}
This is fine on all the pages except one, which needs the height to be 1000px.
How would I make a variation of the code for one page, instead of copying the entire container settings again for the one html page?
On the page in question give the body a class e.g. 'myPage' then add the below to your css
body.mypage #container{
height:1000px;
}
Related
I added CSS code to create frames around woocommerce product images.
.woocommerce-product-gallery__image img {
background-color: #fff;
width: 100%;
max-width: 100%;
height: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
It works with a simple product.
However, I don't know what to do with a variable product. Indeed, I want the frame to appear only when an attribute is selected.
For example, a variable product with 2 attributes:
-black
-white
I would like me to apply the following code for the white attribute
.woocommerce-product-gallery__image img {
background-color: #fff;
width: 100%;
max-width: 100%;
height: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
And this one for the black attribute.
.woocommerce-product-gallery__image img {
background-color: #000;
width: 100%;
max-width: 100%;
height: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
I know that we can add images by variations but I want to work with CSS code, which is easier to manage.
Is there a specific class for the attribute? Should I use a php function?
Thank you all!
The matter is the following, I have a selector and I want to show the scrollbar (I am using ng-select). The point is that using Overflow-y: visible or scroll nothing appears, however in Firefox it does!
I already tried adding a specific height, also a max-height and I get no results. Someone who can tell me what I'm doing wrong?
HTML:
<ng-select class="ng-select form-control form-control-solid form-control-lg px-2.5 py-1 text-sm rounded"
[clearable]="false" [searchable]="false" placeholder="Select a Merchant"
(change)="storeSelectedMerchant($event)" [ngModel]="(activeMerchant$ | async)" *ngIf="merchants$ | async">
<ng-option value="all"><b>All Merchants</b></ng-option>
<ng-option *ngFor="let merchant of merchants$ | async" [value]="merchant.guid">
<p>
<strong class="block">{{merchant.dba}}</strong>
<span>MID: {{merchant.mid}}</span>
</p>
</ng-option>
</ng-select>
</div>
CSS:
.ng-dropdown-panel {
background: #eee;
left: 0;
margin-top: 10px;
border-radius: 3px 3px 6px 6px;
overflow: hidden;
-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
.ng-dropdown-panel-items.scroll-host {
overflow-y: visible !important;
&::-webkit-scrollbar {
width: 6px !important;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
-moz-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
box-shadow: inset 0 0 0px white(0, 0, 0, 0);
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}
Chrome:
Firefox:
Please try replacing the overflow-y: visible !important
to overflow-y: scroll !important.
I have to create this modal with same style:
This is what I have right now:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
}
.notification > .border {
background-color: #3fb4e4;
margin-left: 20px;
border-radius: 36px;
width: 34px;
height: 150px;
}
<div class="notification"><div class="border"></div>Hello</div>
But I cant find a way to create the blue border on the left.
Use multiple background like below:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area: adjust the 50px to control the size */
linear-gradient(to right, #3fb4e4 50px,transparent 0) border-box;
}
<div class="notification">Hello</div>
Another syntax where you can control the size outside the gradient:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area */
linear-gradient(#3fb4e4,#3fb4e4) left border-box no-repeat;
background-size:50px 100%;
transition:0.6s;
}
.notification:hover {
background-size: 100px 100%;
}
<div class="notification">Hello</div>
Why not just add a border on the container itself:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
border-left: 3px solid #3fb4e4;
}
How to make such a box-shadow?:
Sides and bottom is same, top is 1px border, without visible shadow.
I do this that:
div {
box-shadow:
inset 0px -10px 4px -10px rgba(0, 0, 0, 0.6),
inset 10px 0px 4px -10px rgba(0, 0, 0, 0.6),
inset -10px 0px 4px -10px rgba(0, 0, 0, 0.6);
background-color: white;
border-top: 1px solid #bebebe;
border-radius: 0 0 6px 6px;
padding: 5px;
width: 130px;
text-align: center;
}
div:hover {
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
}
<div>dddddddddddd <br>dddddddddddd <br>dddddddddddd <br></div>
I have a div with borders with different colors. The design that im working towards blends the point at which these 2 borders join. Can this be done with CSS?
<div class="panel">
dfds
</div>
body {
background: green;
}
.panel {
margin: auto;
width: 300px;
height: 300px;
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
http://codepen.io/anon/pen/XJEWqp
Below you can see the bottom right corner has a sharp diagonal join:
This is the same detail in the design that im creating:
Howsabout this:
body {
background: green;
}
.panel {
margin: auto;
width: 100px;
height: 100px;
background: white;
border-radius: 10px;
padding: 10px;
-webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
-moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
}
<div class="panel">
dfds
</div>
Used red and blue to highlight the overlapping
You can use a border-image for this purpose.
div {
margin: 30px;
width: 50px;
height: 50px;
background: #DDD;
border: 10px solid transparent;
-webkit-border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
-o-border-image: url(http://i.imgur.com/7qsGJvm.png'') 30 30 round;
border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
}
<div></div>