i write this code to print html page in paper copy using paper 80mm but this code not working correctly i need to a few help to correct it
#media print {
div.invoice{
background: #FFFFFF;
width:40%;
margin-left:30%;
margin-top: 0px
}
div.invoice div{
background: #FFFFFF;
color: black;
margin-left: 1%;
}
div.invoice h2{
font-size: 14px;
}
div.invoice h3{
font-size: 13px;
}
div.invoice h4{
font-size: 12px;
}
div.invoice div h2, div.invoice div h3, div.invoice div h4{
color: black;
line-height:0.8em;
margin-top:1px;
-webkit-margin-before: 0.8em;
-webkit-margin-after: 0.8em;
}
h1, h2, h3, h4{
-webkit-margin-before: 0.4em;
-webkit-margin-after: 0.4em;
}
}
Please follow below steps:
Step 1 : Add media="print" to your stylesheet link or example :
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="print" >
step 2 : Then follow below media query.
#media print
{
body { margin: 0; background-image: none; font-size: 12pt; }
}
Related
Just curious, why when I do print preview the headings are still colored after I've set a class selector to black? If by putting .container within the media rule and setting the color too black, should every text including headings be set to black? I know I can easily add h1, h2... I'm just curious as to why I can not set a selector to a specific color and everything within that selector be set to that during print? Thanks for the feedback!
/* reset style */
html {
font-size: 12px;
}
/* body and page container */
.container {
max-width: 600px;
margin: 0 auto;
border: 3px red;
}
/* headings */
header {
text-align: center;
padding: .4em;
background-color: darkgrey;
}
h1 {
text-shadow:2px -4px 5px black;
color: #EADCDC;
font-size: 5em;
}
h2 {
color: brown;
font-size: 3em;
}
p {
font-size: 1.2em;
line-height: 1.4em;
}
body {
font-family: Tahoma, Arial, Helvetica, sans-serif;
background-color: #dee9f9;
}
h3 {
color: green;
font-size: 2em;
}
article {
background-color: gold;
padding: 3%;
}
.accent {
text-decoration: underline;
text-align: center;
line-height: .8em;
}
/* unordered list */
ul {
list-style: circle;
font-size: 1.2em;
line-height: 1.4em;
}
aside {
background-color: #EADCDC;
width: 45%;
padding: 2%;
margin: 2%;
box-shadow: 3px 3px 3px black;
border-radius: 30px;
float: right;
line-height:4em;
}
footer {
padding: 0.6em;
color: ivory;
background-color: darkgrey;
text-align: center;
}
/// This is what I am referring to
#media print {
body, .container, aside, article {
color: black;
background-color: white;
box-shadow: none;
}
}
#page {
margin: 1in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Super Battle</h1>
</header>
<aside>
<h2 class="accent"> ARE YOU READY?</h2>
<h3>DATE</h3>
<p>10/31/2022</p>
<p>12AM - 12pm</p>
<h3>LOCATION</h3>
<p>LAS VEGAS</p>
<p>NEVADA</p>
<p>MGM GRAND CASINO</p>
</aside>
<article>
<h3>PRICES</h3>
<p>$200General</p>
<p>$400 VIP</p>
<p>$1000 ALL ACCESS</p>
<h3>SPONSORS</h3>
<ul>
<li>ELON MUSK</li>
<li>DONALD TRUMP</li>
<li>TEKASHI 69</li>
<li>BARACK OBAMAS X WIFE</li>
</ul>
</article>
<footer>
<p> www.LASVEGASBATTLE.us</p>
</footer>
</div>
</body>
</html>
I am having issues getting a background image to work using your conversion api.
Eg of the template file styling:
<meta charset="utf-8" />
<link href="https://use.typekit.net/mmg2zqw.css" rel="stylesheet" />
<style>
body, p, li, td, th, dt, dd { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; font-size:20px; color:#333; }
body { background: url(/templates/backgrounds/certificate-background.png) no-repeat; }
img { border:none; display:block; }
p { margin-top:0; font-size: 20px;}
span { margin-top:0; font-size: 24px; color: #78BE21;}
h1, h2, h3, h4, h5 { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; color:#555; }
h1 { font-size:68px; margin-top:10px; margin-bottom: 20px; }
h2 { font-size:52px; margin-top:5px; margin-bottom: 10px; color: #78BE21; }
h3 { font-size:30px; margin-top:5px; margin-bottom: 5px; }
h4 { font-size:18px; margin-top:5px; margin-bottom: 0; }
h5 { font-size:14px; margin-top:5px; margin-bottom: 0; }
Do I need to add a parameter to the api call to allow the image to work?
You are thinkting to put a minimum height to see a possible change ? Beacause if your tag contains nothing, so your background will not be visible.
Try this on your body :
body {
background-image: url('/templates/backgrounds/certificate-background.png') no-repeat;
width: 100%
min-heigth: 500px;
}
I created a simple network of HTML pages styled with SCSS but the SCSS rules aren't being applied!
Heres how my SCSS file looks like:
//SCSS variables
$Heading-size: 60px;
$Mobile-Heading-size: 40px;
$Mobile-Body-Size: 30px;
$Defualt-background: rgba(149, 149, 243, 0.616);
//SCSS Inheritance and .class selector
.nav{
#extend h1;
}
img{
width: 250px;
}
body {
color: black;
background-color: $Defualt-background;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
//SCSS Nesting
h1 {
text-align: center;
size: $Heading-size;
color: tomato;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: $Defualt-background;
}
}
table {
border-radius: 5px;
border-width: 5px;
th {
border-width: 4px;
}
td {
border-width: 2px;
}
}
//responsive #media query
#media only screen and (max-width: 768px){
h1 {
size: $Mobile-Heading-size;
}
body {
//The background is a test to see if it works :)
$Defualt-background: orange;
background-color: $Defualt-background;
size: $Mobile-Body-Size
}
}
And this is how I linked it to my html:
<link rel="stylesheet" href="./CSS/style.css">
Just to be clear im linking the CSS generated by my compiler not the original SCSS!
Working through a tutorial to learn about CSS and I am trying to figure out how some whitespace is being created. When I inspect the page, the whitespace is within the body tag. I thought the body tag would put all text within the background image. But when I re-size the window there is various degrees of white space created (as you can see in the image).
I would like to create a new row for the More Text so that when the screen is re-sized smaller, the row remains below the image--instead of creating the whitespace between. Thanks for any help.
html
{% load staticfiles %}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page-header">
<h1>Title</h1>
</div>
<div class="page-footer">
<h1>More text</a></h1>
</div>
</body>
</html>
css
h1 a {
color: #666699;
font-family: 'Lobster';
}
body {
background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
.page-header {
background-color: transparent;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-footer {
background-color: transparent;
position:absolute;
padding: 20px 20px 20px 40px;
bottom:0;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: gray;
font-size: 26pt;
text-decoration: none;
position: relative;
bottom: 10px;
height: 5px;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
color: #666699;
}
You can use media queries to define attributes for a given element for smaller screen.
#media screen and (max-width: 800px){
.myclass{
myattribute:myvalue;
}
}
A easier and better solution would be using a third party framework like bootstrap or foundation which has a grid system for responsive design.
I looked at your css on codepen:
http://codepen.io/artchibald/pen/KrJdpY
It seems you have a bottom 0 declared in the css, below is the corrected version:
h1 a {
color: #666699;
font-family: 'Lobster';
}
body {
background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
.page-header {
background-color: transparent;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-footer {
background-color: transparent;
position:absolute;
padding: 20px 20px 20px 40px;
/* REMOVE THIS--------bottom:0; */
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: gray;
font-size: 26pt;
text-decoration: none;
position: relative;
bottom: 10px;
height: 5px;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
color: #666699;
}
I am using a template for a tumblr theme: https://olleotathemes.tumblr.com/theme/oscar
I want to make each of the links on the masthead start on a new line instead of having them separated by spaces, so it's easier to read. I am wondering if it's possible to do this.
So far I think the links are configured using CSS, and so far I found that masthead-navigation has an option to change the font size...
Part of the code is provided below, but the full code is provided in the link above.
article {
padding: 5%;
width: 70%;
margin: 0 15%;
border-radius: .3em
}
.post-background article {
margin: 5% 15%
}
.masthead-widget {
padding: 1% 10%;
text-align: center
}
.widgets {
width: 100%
}
.widget {
border-radius: .3em
}
.masthead-navigation ul {
font-size: 1.0em;
}
.hashtag {
display: none
}
.post-tags a {
border: 1px solid {
color: Metadata links
};
padding: .3em 1em;
border-radius: .3em
}
.post-title {
font-weight: 700
}
h1, h2, h3, h4, h5, h6, #masthead {
font-family: {
text: Secondary Google Font name
}
}
Thank you very much!
PS: I'm new at this, so thank you for your patience!
Try to add this code before </head>:
<style>
#masthead li {
float: none;
}
#masthead nav a {
padding: 0;
float: none;
}
</style>
I got this result: