How to provide filter to the photo sent for printing. I tried adding the following css.
#media print {
.photo {
img {
filter: brightness(2);
-webkit-filter: brightness(2);
}
}
}
Nothing happens. The brightness of the pictures is same. My application captures the pictures from webcam and sends the base64 image to the server. I am using webcam.js plugin to capture the image.
HTML Code
<a onclick="printpage()" class="btn btn-success" href="#">
<i class="fa fa-print"></i>Print Card
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div id="idCard_print" class="idcard">
<div class="cardinner">
<div class="cardheader">
<div class="image">
<img alt="header logo" width="40px" src="/assets/40xNxcardlogo-7e613bf7d05be0b9d2fe128f14519e11437beaa0d6b40fd2c332b6800059c783.gif.pagespeed.ic.-YOaR880p3.png" data-pagespeed-url-hash="348730017" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="afu-title">
Agriculture and Forestry University
<span>Rampur, Chitwan</span>
</div>
<div class="faculty">
Faculty of Animal Sci., Vet. Sci. & Fisheries
</div>
</div>
<div class="cardtype">
<span>Student ID Card</span>
</div>
<div class="photo">
<div class="student">
<img height="73px" src="data:image/jpeg;base64,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" data-pagespeed-url-hash="3345598353" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="sign">
<img src="data:image/png;base64,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" alt="Sardha" data-pagespeed-url-hash="2948073300" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
</div>
<div class="clearfix"></div>
<div class="details">
<ul>
<li><span>Name:</span> Roshan Gyawali</li>
<li><span>Address:</span> Rupandehi, Siyari - 7</li>
<li><span>Date of Birth:</span> 2017-11-07</li>
<li><span>Level:</span> B. V. Sc. & A.H.</li>
<li><span>Year:</span> 2013-2019</li>
</ul>
</div>
<div class="barcode">
<p>90432635</p>
<img class="img-responsive" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAABIAQAAAADzYAXTAAAABGdBTUEAALGP
C/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUw
AADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAAHdihOkAAAACXBIWXMAAABIAAAA
SABGyWs+AAAAQklEQVRIx2P4jx8wtFX+Y59R+SDx4fPG9hlycuwzKiQfPmNv
Y5+XkCBRx5Y4Kj8qPyo/Kj8qPyo/Kj8qP+jkCbRvABzvCT9bo5chAAAAAElF
TkSuQmCC
" data-pagespeed-url-hash="3905847029" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="expiry">Expiry: Jan 01, 2019</div>
<div class="url">www.afu.edu.np</div>
</div>
</div>
<style>#media print{aside#sidebar,header[role="banner"],footer,#comments,#respond,header{display:none}#sidebar-wrapper,.header,table,.head,.container-fluid,#topNav,#idCard,.widget,.content-wrapper{display:none}.btn{display:none}.margin-top,.panel{display:none}body{content:asset-url("card-backgroundafu.png")}*{color:#000;// #include box-shadow(none);// #include text-shadow(none);-webkit-print-color-adjust:exact!important;color-adjust:exact!important}#page-wrapper.open{padding:0;height:0;margin:0}#page-wrapper .sidebar-footer{display:none}#page-wrapper ul.sidebar{display:none}#page-wrapper #sidebar-wrapper{display:none}#idCard_print{display:block;position:relative;background-color:#fff!important;margin:0;padding:0}#idCard_print .cardinner{padding:0}#idCard_print .cardinner .cardheader{font-size:11px;text-align:center;height:84px;line-height:11px;background-color:#deefe3!important;font-family:"Helvetica",sans-serif}#idCard_print .cardinner .cardheader .afu-title span{font-size:9px;line-height:9px;display:block}#idCard_print .cardinner .cardheader .faculty{font-size:10px;text-transform:uppercase;font-family:'',sans-serif;font-weight:700;line-height:11px;margin-top:2px}#idCard_print .cardinner .cardtype{font-family:'Helvetica',sans-serif;text-align:center;color:#fff!important;background:#8dc349!important;width:100%;margin:0 auto;font-size:11px}#idCard_print .cardinner .cardtype span{border-left:2px solid #fff!important;border-right:2px solid #fff!important;border-radius:10px;padding:2px 20px;color:#000!important}#idCard_print .cardinner .photo{height:77px;position:relative;margin-top:3px}#idCard_print .cardinner .photo .student{text-align:center}#icCard_print .cardinner .photo .student img{border:2px solid #ccc;border-radius:10px;filter:brightness(2);-webkit-filter:brightness(2)}#idCard_print .cardinner .photo .sign{margin:0 auto;top:50px;position:absolute;left:61px}#idCard_print .cardinner .photo .sign img{width:50px}#idCard_print .cardinner .photo .dean{text-align:center;font-size:10px;font-family:'Ubuntu',sans-serif;margin-top:5px;font-weight:800}#idCard_print .cardinner .details ul{list-style:none;text-align:center;margin:0;padding:0;font-size:10px;font-family:'Ubuntu',sans-serif;line-height:13px}#idCard_print .cardinner .details ul li span{font-weight:800}#idCard_print .cardinner .barcode img{width:50%;margin:0 auto}#idCard_print .cardinner .barcode p{font-family:'Ubuntu',sans-serif;font-size:9px;letter-spacing:3px;text-align:center;margin:10px 0 0 0}#idCard_print .cardinner .url{font-size:11px;text-align:center;font-family:'Ubuntu',sans-serif;background:#8dc540!important;color:#000!important}#idCard_print .cardinner .expiry{font-size:9px;font-weight:600;text-align:center;font-family:'Ubuntu',sans-serif;color:red!important}#idCard_print:before{content:"";background-image:asset-url("card-backgroundafu.png")!important;background-repeat:no-repeat;background-position:center center;content:' ';display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;opacity:.1}#page { size: 53.98mm 85.60mm; margin: 0mm; }}</style>
</div>
From what I can see the only problem is that you seem to be using SASS like syntax for your CSS.
#media print {
.photo {
img {
filter: brightness(2);
-webkit-filter: brightness(2);
}
}
}
If this is raw CSS then you need to clean up the syntax to match this:
#media print {
.photo img {
-webkit-filter: brightness(2);
filter: brightness(2);
}
}
Remember to always put the vendor specific styles before the generic styles. So I moved the -webkit-filter before filter
I created a local page on my machine and emulated printing and the CSS does apply with the change above.
Also consider adding a specific class to each of the images to help improve your CSS rules.
Instead of this:
#icCard_print .cardinner .photo .student img{
border:2px solid #ccc;
border-radius:10px;
filter:brightness(2);
-webkit-filter:brightness(2)
}
You could simplify it to this:
.student-img{
border:2px solid #ccc;
border-radius:10px;
filter:brightness(2);
-webkit-filter:brightness(2)
}
with the html for that image tag being this:
<img class="student-img>
And then move the height:73px into the CSS instead of in the style attribute.
Consider using a BEM styled css and you can see a good simplification/reduction in all your CSS rules.
Also, I always use !important for everything I have in the #media print block. This is the only place I allow myself to use !important but I use it on everything just to make sure I have proper specificity of the CSS.
Look here for how to emulate print mode in Chrome
Related
I have a link in text on this page, https://melodylakerart.com/product/sun-on-skin-mask-duplicate-1/ which when hovered over produces a pop up image.
As you can see, the text is broken - all the text between "sensitive' and 'off" should be on one line (including the link)
How do I get rid of the weird line breaks?
CSS is:
.hover_img a {
position: relative;
}
.hover_img a span {
position: absolute;
display: none;
z-index: 99;
}
.hover_img a:hover span {
display: block;
}
.hover_img a:hover span {
display: block;
width: 350px;
}
HTML is:
Sensitive ears? Add an
<div class="hover_img">
<a href="#">adjustable silicone strap
<span>
<img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
</span>
</a>
<div>
to take the pressure off
The addon is doing something strange with the internal div. It wraps the content in a p tag and pushes the div outside. Best to remove it as not needed and move the class name to the a tag (except)..... Change the a to a span because then you wont have the clickable behaviour.
Change the html to:
Sensitive ears? Add an <span class="hover_img">adjustable silicone ear protector strap <span><img src="https://melodylakerart.com/wp-content/uploads/2020/06/Mask-extenders-2.jpg" alt="image" height="100"></span></span>to take the pressure off.
Modify the Css:
span.hover_img { position:relative; color:#f66f61; }
span.hover_img span { position:absolute; display:none; z-index:99; }
span.hover_img:hover span {display: block;width: 350px;}
you have some problemes with the HTML tags organisation
try to replace the the full <div class="hover_img"> with this code
<div class="hover_img">
<p>
<span>Sensitive ears? Add an </span>
<a href="#">adjustable silicone strap
<span>
<img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
</span>
</a>
<span>to take the pressure off</span>
</p>
<p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-22252-0-0">
<label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-22252-0[]"
data-raw-price="1.50" data-price="1.5" data-price-type="quantity_based"
value="face-mask-strap-extension-loop-ear-protector"
data-label="Face Mask Strap Extension Loop Ear Protector"> Face Mask Strap Extension Loop Ear Protector
(+<span class="woocommerce-Price-amount amount"><span
class="woocommerce-Price-currencySymbol">£</span>1.50</span>)</label>
</p>
<div class="clear"></div>
</div>
I don't know how to explain this very well but...
I want to select an element but it's like "far" from other one
Like this:
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
.image.forest [some selector idk] p {
color: red;
}
.image.train [some selector idk] p {
color: blue;
}
You could re-write it like this if it works for you.
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>I want to change the color of this text if the image there ^ is "forest", which I'll change with JS</p>
<style>
.forest + p {
color: red;
}
.train + p {
color: blue;
}
</style>
Why dont you just add a class to the p tag right after the forest image.
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p class="forest-paragraph"></p>
.forest-paragraph {
color: #000;
}
You'd need to go from <img> to <div> to <p>, but going from <img> to <div> presents a problem: there is no CSS selector that allows one to reference an element that is higher up in the DOM tree, i.e. no child-to-parent selector.
Instead, you can apply the .forest class to the <div>.
HTML:
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
CSS:
.forest + p {
color: red;
}
I have the following code.
<html>
<head>
<style>
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
</style>
</head>
<body>
<div id="info">
About Us |
Privacy Policy
<a id = "fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz"> <img src="../images/facebook.png" height = 16, width = 16 /> </a>
</div>
</body>
</html>
I want to move the fb link to the right corner. I guess my styling is not working. Or am I going wrong somewhere?
You have defined a class in your stylesheet
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
so while using it you should do
<div class="info">
...
</div>
<div class="fb">
...
</div>
OR if you want to use id then
#fb{
position: relative;
right:-1000px;
}
#info{
position:relative;
}
<div id="info">
...
</div>
<div id="fb">
...
</div>
first don't use spaces in attr="smth". Also you use id not class so css selector should be #fb , not .fb
Use this #fb{
float:right;
}
You are using class (.class) selectors instead of id (#id) selectors in your css
The styles are not reflecting because you are using . instead of #. . is used while dealing with class, for id use #.
Try this:
#fb{
position: fixed;
right:10px;
}
#info{
position:relative;
}
Jsfiddle
<div id="info">
About Us |
Privacy Policy
<a id ="fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz">
<img src="../images/facebook.png" height = 16, width = 16 alt="FB"/> </a>
</div>
CSS
#fb
{
float:right;
}
.info
{
position:relative;
}
There were no class named fb. DEMO
I wonder if there is a service where I can "clean-up" html-code so that all inline style="" attributes get transformed into css rules and replaced with respective class="" attributes.
For example I'd like to get from this code (file 'test.html'):
<!-- test.html -->
<div style="width:600px;margin:auto;padding:10px 0px 10px;cursor:pointer;color:#336699;font-style:italic;font-size:18px;"
onClick="toggleText('addmessage')">
<span style="border-bottom:1px dotted #336699;">
Add message</span>
</div>
<div id="addmessage" style="width:600px; margin:auto;padding:10px 0px 10px;display:none;">
... etc.
somethig like this:
<!-- test.html -->
<div class="class_1"
onClick="toggleText('addmessage')">
<span class="class_3">
Add message</span>
</div>
<div id="addmessage" class="class_2">
... etc.
plus css file:
<!-- style.css -->
.class_1, .class_2
{
width:600px;
margin:auto;
padding:10px 0px 10px;
}
.class_1
{
cursor:pointer;
color:#336699;
font-style:italic;
font-size:18px;
}
.class_2
{
display:none;
}
class_3
{
border-bottom:1px dotted #336699;
}
http://www.tinytool.net/96002/inline_css_extractor
I am trying to override the css from another file and I would like to know how specific of a reference I would need to override it.
Here is the page I am working with if you'd like to take a look:
http://www.bolistylus.com/shop/
This is what I'm trying to override:
.products li {
float: left;
margin: 0 10px 20px 0;
padding: 0;
position: relative;
width: 150px;
}
Here is the HTML I'm working with:
<div id="main">
<section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a> › Shop</div>
<h1 class="page-title">All Products</h1>
<ul class="products">
<li class="product first">
<a href="http://www.bolistylus.com/shop/boli-2/">
<img width="150" height="150" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct-150x150.png" class="attachment-shop_small wp-post-image" alt="pinkproduct" title="pinkproduct" />
<strong>Boli Pink</strong>
<span class="price">$24.00</span>
</a>
Add to cart
</li> <li class="product ">
</li></ul><div class="clear"></div>
</div></section>
</div><!-- #main -->
.products li has a specificity of (0, 0, 1, 1)
a minimal higher specificity can be created with
ul.products li which has a specificity of (0, 0, 1, 2)
See this jsfiddle: http://jsfiddle.net/DAL9A/
.products li and you can use !important if it doesnt take. Try to load that after what your trying to override.
UPDATE*
Try just using ".product"
Actually just ready your comments. What are you trying to target? The image? If So you should get the width and height out of inline and apply it in CSS