I am going about recreating a document in HTML. Thai is all up and running my issue now is i would like to print the page once it has been generated however i would like to remove some of the css styling applied to the display view. I have this so far...
.containerouter {
margin:0 auto;
width:21cm;
height:29.7cm;
padding-left:1.7cm;
padding-right:1.7cm;
padding-bottom:1.7cm;
-webkit-box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
-moz-box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
}
#media print{.no-print, .no-print *{display: none !important;}}
<div class="containerouter no-print" media="print"> CONTENT NESTED INSIDE THIS DIV NEEDS TO BE PRINTED </div>
Basically i would like to remove the shadow properties without removing the sizing format already applied.
What is currently happening is all of the content is disappearing when print is clicked
There is a media class for adding classes when printing:
#media print {
[CSS only shown when printing]
}
if you want to remove some css styles you can do it like this:
#media print {
.containerouter {
box-shadow: none;
}
}
You just need to declare the #media print after you define the class so that your media class get higher specificity.
Related
I have two divs for which I just need to add a box-shadow effect using CSS. But I just don't want it to get applied on every side of the div, I don't want the effect on the bottom side of the div. But I can't find a way to do it. Can someone help?
Try this, use CSS property box-shadow: 0px -10px 10px #888888;
detail of the property box-shadow:x-offset y-offset blur color
#example {
border: 1px solid;
padding: 10px;
box-shadow: 0px -10px 10px #888888;
}
<h2>box-shadow</h2>
<div id="example">
<p>blurred</p>
</div>
i gat this situation, (WordPrsee with OceanWP Theme).
i want to change the height + padding + margin + the total height size of the nav.
i tryed use CSS in the global CSS like :
.menu-item-497 a {
height: 40px !important;
padding: 2px 20px 2px 20px; !important;
line-height: 135% !important;
}
li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-498 {
padding: 2px 20px 2px 20px; !important;
}
this does not work.
i tryed set CSS Class and add some CSS in the GLOBAL CSS Area
also tried change the custom CSS "name" in the advance tab of the all navigator and this didn't help too.
also tried to use the CSS ID too.
also tried change in the MENU tab at the appearance sub menu.
what is the proper way to change it.
when I set the value in the chrome debug mode (F12) that work.
and this work :
so - what is the way of using CSS in Wordpress and fix those prop value I want.
thanks, foreplay.
ok.
i read the https://presscustomizr.com/snippet/adding-css-classes-wordpress-menu page
.
this explains how to see CSS Class for that item (you can set items with the same class)
after setting the class name - I goto general CSS.
there set :
.
hanibaal-Footer-MenuItem{
height: 40px !important;
/* padding: 2px 20px 2px 20px; !important; */
/* line-height: 135% !important; */
}
li.hanibaal-Footer-MenuItem.menu-item a {
padding: 5px 10px 5px 10px !important;
}
and that work.
I am customizing bootstrap using less. I want to add a shadow to the .navbar.
My solution is as follows:
//Import of bootstrap core navbar - second as to save specificity
#import "bootstrap/navbar.less";
//Overrides:
.navbar {
position: relative;
min-height: #navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: #navbar-margin-bottom;
border: 1px solid transparent;
border-bottom: 1px solid #FFF;
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
//Prevent floats from breaking the navbar
&:extend(.clearfix all);
#media (min-width: #grid-float-breakpoint) {
border-radius: #navbar-border-radius;
}
}
This way I do not modify bootstraps original source, and it will be easy to update bootstrap, however the new navbar class receives higher specificity than all bootstrap classes. So the following:
<div id="navigationbar" class="navbar navbar-default navbar-static-top" ng-cloak ng-controller="NavController">
The navbar border-radius will override navbar-static-top an the result is round corners.
If i import the bootstrap/navbar.less after I define my own class it does work. But is there a better solution?
I wonder if your problems really have to do with CSS specificity.
You Less code will be read from top to bottom (only for variables last declaration wins).
Bootstrap defines the .navbar class first and than the style classes (.navbar-default) and position classes (.navbar-static-top).
When the .navbar-default override some styles of the .navbar class you undo this overrides by defining the .navbar class again after .navbar-default.
As far as i understand you only need the following Less / CSS code:
.navbar.navbar-default {
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
}
Demo: http://www.bootply.com/VhEmBcAYhY
Cause the Bootstrap navbar classes do not declare the box-shadow property at all, you can add this code anywhere in your Less code.
Good location you this code seems at the end of bootstrap.less or even navbar.less. Or create a custom.less file and import that at the end of bootstrap.less.
The easiest thing I've found, and this is what we do where I work, is to NOT use the Bootstrap LESS files, and instead using the minified CSS. Since you're ONLY overwriting Bootstrap styles, NOT changing the source styles, it will make it much easier.
With LESS, since you are nesting styles within styles, you'll find that if the styles aren't nested exactly as Bootstrap has them (since you're trying to override them), that their styles may be more specific, and therefor take precedence over your styles.
I show box-shadow with this CSS code.
img {
box-shadow: 2px 2px 1px #888;
}
I'd like to hide the boarder conditionally, and I tried to add "noboarder" class in img tag,
<img ... class="noborder">
#noborder
{
box-shadow: 0px 0px 0px #888;
}
However, I still have the shadow with the `class="noborder">code, what might be wrong?
Ok, there are a few things wrong here. First off, you have a class attribute in your HTML but you're trying to select the img with an ID selector #. You have to use the class selector .
Also, when overwriting a shadow so it does not appear, you have to set the color to transparent. The px measurements are for shadow offset, size and spread (if you use it) so these don't matter at all. Or use none in place of the measurements and color.
I changed the selector and class to better reflect what the CSS does, as a shadow is different from a border.
.shadow
{
box-shadow: 2px 2px 2px #888;
}
.noShadow
{
2px 2px 2px transparent
}
.noShadow.none
{
box-shadow: none;
}
And here's a jsfiddle demo to show you how it works.
try replacing #noborder with .noborder, you want it to be a class, not an ID.
Additionally, box-shadow: none is a neater alternative to remove the box shadow
Use box-shadow: none to remove the shadow completely.
<div>test</div>
<div class="noborder">test</div>
div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}
Demo
Guys I have been trying lots of different options from cutting up to building in html/css. nothing seems to really work :(
How would you guys go about doing this ?
Link:- http://www.flickr.com/photos/gavinwynne/6902590869/
The simplest way is to use a thick border and a inset box shadow. Browser support is somewhat limited, though. It basically comes down to IE9+ and modern browsers (ref).
demo
body {
min-height: 300px;
border: 24px solid #666;
box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
padding: 35px;
}
One of the most common ways about doing it would be to cut the image in 3 pieces as shown in the below picture:
Where piece 1 would be shown first, then make piece 2 height equal to 1px and repeat it on the y axis through CSS and then put piece 3 at the bottom in order to "close" the container
Your html could be in the form of:
<div class="div_top"></div>
<div class="div_middle"> your content here </div>
<div class="div_bottom"></div>
Update
Css would be something similar to this :
.div_top {
background-image:url('top_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
.div_middle {
background-image:url('middle_bg.jpg');
background-repeat:repeat-y;
width:800px;
}
.div_bottom {
background-image:url('bottom_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
You'd probably want to set a fixed height for your top and bottom divs, since they have no content and wont actually expand to show the background image.