Is there a way to adapt CSS (add some keyword) for copying rendered HTML page?
Like there is way to make CSS for mobile device or for printing I need similar thing for copying for pasting in Word or Excel.
Example is:
I have a page that I need to copy and paste to Word for report but on that page there are input tags that I don't need in report.
There is a JS hack for this but is there some CSS way to do this?
I'm a bit confused with your question.
You could copy and paste and delete the input tags manually. Have you tried including a CSS print media query to your code and excluding the input boxes?
#media print {
/* something like this */
input {display:none;}
}
#L_A_W
I did tired that but when I do "Select All" (Ctrl+A) on page and Paste it to Word I get input tags pasted in Word document that I don't need there.
When I print the page, I can print it to PDF (for example) without input tags, css "#media print" is working for this, but I need to edit report data before sending report.
I need:
#media copy {
.some_element {
display: none;
}
}
Related
I'm using DASH app on Heroku that requires user to print out the page in PDF. I'm looking to 'save to pdf' option in the browser, however, a simple page print contains Div elements that are undesirable such as buttons. I'm using DASH BootStrap Components but I don't see any .d-print-none (Display in Print) options in their documentation. Is there a way I can hide div elements on printing? Apologies for the basic question.
You could give each item you want to hide a certain className, and then set up a stylesheet with something like this:
#media print {
.print-class {
display: none;
}
}
You can set the class_name property of your div to d-print-none:
html.Div("YOUR CONTENT HERE", class_name = "d-print-none")
https://getbootstrap.com/docs/4.0/utilities/display/
I tried to convert this html resume to pdf and print it but as you see there is a problem in template after changing. For example compare skills in both html version and pdf version.
This is Github repo of this project: https://github.com/xriley/DevResume-Theme
And this is a sample of HTML file: https://themes.3rdwavemedia.com/demo/devresume/
How can I fix it for ever?
I need this: https://themes.3rdwavemedia.com/wp-content/uploads/2019/04/DevResume-Sketch-Template-PDF-Preview.pdf
Solution 1 - Without Coding:
You can select margins as custom from more settings to make changes for each page accordingly.
Then you can drag these blue dotted borders to adjust text based on your need.
As i have drag thelower border upward to make senior developer text to appear in next page.
Solution 2 - With Coding:
Simply adjust margins for each page from solution 1.
Then by using the #page in your CSS. You can modify margins when printing a document. You can't change all CSS properties with #page. Only few properties such as margins while printing the page etc.
#page:first { <----- first here is refering to only First Page
margin-left: 0.75cm;
margin-top: 0.25cm;
margin-bottom: 0.25cm;
margin-right: 0.75cm;
}
If you want to apply margins on all page then simply do this:
#page { your margins values }
You can read more about #page property here.
I have my course book as html parts chapter-by-chapter. I have done some modifies on it. It seems very well when it is read on webpage but when I want to convert it to pdf or print it it seems narrow. The issue is that how the page can be fitted in A4. If you look at output.pdf which can be found on main page. Besides, the shared links for you understand me. (especially page 47). I can merge them just in a pdf file. I think that if the css can be edited, it will be fitted in A4 and seems in pdf like a book. I need your helps. As an example you can look at ch18.html and ch19.pdf I can't write other links because of reputation. But all files can be looked from main page.
Pages: http://bookfiles.host-ed.me/ch18.html and ch19.html
Css file: http://bookfiles.host-ed.me/static/CACHE/css/ab0ffefbadc3.css
I absolutetly newbie about css. Thank for your helps.
The issue appears to be with your max-width on your "document" div. You have it set at several different places in your css file based on the screen size. I would go through them one by one and find the one that is affecting your print file. You need to set your max-width to 100%. Having a max-width less than 100% is what is causing it to print narrow.
Once you identify which one is causing the problem, you can add a new style that only goes into affect when you print.
Add this to your CSS file, for example:
#media print and (color){
#lesson-fragment, [role="document"] {
width: 100%;
max-width: 100%;
}
}
You can also put other specific print styles inside of the #media print code. Like if you wanted to change the font size or color only when it printed.
I have a HTML header template with its own style sheet. This HTML code is complex, it contains menu's, different blocks and other floating elements. The CSS file contains styles from whole website. It total 800 selectors.
When I just include the HTML and the CSS in my existing website, it breaks. This is due the fact that a lot of CSS rules are interfering with the rules of the website. For example CSS from the header template has a selector with name ".nav" and the website has that too. Because both of them have different rules, the website breaks.
My question is how do I 'include' this HTML file in an existing website without complete recoding.
I though the following: process the styles from the template and give each a unique name. So every '#body' becomes "#body-1", every ".nav" bocomes ".nav-1", etc. Doing this by hand will take a while.
Is there a tool which could do this?
Use what I call "CSS Namespacing".
Change the CSS rules for the new page such that they are contextual to an ID or class.
For example, take this:
.nav // nav for new page
{
blah: blah;
}
and make it this:
#NewyThingy .nav
{
blah: blah;
}
And surround the newly included page in div with id="NewyThingy".
Or
.NewyThingy .nav
{
blah: blah:
}
and change the body tag of the newly include page to have class="NewyThingy".
How do i give default color for text in html ? To explain more in detail...We have dreamweaver or notepad++ or dojo tools or visual studio or any other tool...when we start typing anything..by default it gives color for specified text..Another good example is stack overflow..when some one asks a question...there will be blue color for some text and red for some text and so on...
same like that,i have an web page where when user clicks a button, a message pops up with some html code..so for tags like its should represent one color and content text should be in other color.
hoe do i go about this.?
Thanks in advance
Thanks for reply..Currently we have 5 to 10 lines of html code..but in future as per requirement we might have 1000 or more lines of code..so for each tag i nned to css class ?
Cascading Style Sheets sound like what you're looking for. You can use CSS to define not only colors, but the entire appearance of your page.
The most basic CSS selectors are just the names of HTML tags, so you could write a simple stylesheet like this:
body {
color: blue;
}
h1 {
color: red;
}
p {
color: purple;
}
What you can do is have a master css file and include it in all your html pages. In the master css file you define all your html tags so that they represent what you want the users to see. Once you include the master css file in your html page, it will look same as your other pages. This way you dont need to write css in all the files. You will just need to add a link attribute to all your html files.
<LINK href="master.css" rel="stylesheet" type="text/css">