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.
Related
I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."
I made a report of Qweb in odoo 10. Put my css in tag and place it in ".page" class div. Like this
<div class="page">
<style type="text/css">
.header,
.footer {
display: none !important;
}
</style>
</div><!--end of page-->
It is working perfectly on screen but when I generate PDF or take print from the screen by CTRl + P. It doesn't shows the css colors, backgrounds, padding and margins. I have consulted following link:
Plus I also have one solution. If we apply this tag it reflects some of the properties on the printing page.
t-attf-style="background: #333;color: #FFF; padding: 10px 0px; margin: 0px 0px 0px 6px;"
Is there any way to print the backgrounds and some different font colors on printing page other than these options. The first link is not making any changes and the second solution don't work for all properties plus its very time taking to place this tag with all the HTML tags.
I am facing this problem from last one year. That would be great help and a new learning If someone helps me sort this problem.
Thanks
Well the right answer is always the one through that separate module of defining and calling color fields as done in custom invoicing module. But I suggest a hack. Create images of that color and put them on that area with position: absolute and adjust the remains(text) on it. Plus for font and other things t-attf-style works perfectly.
I am having trouble changing the styles of a widget on my Wordpress site.
The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"."
The styles seem to be mainly applied to the ID ".content", but I'd like to alter those styles ONLY at the ".text-3" level.
I can change the content stylings and get the effect I want in the widget, but it changes all of the other widgets.
I want the bottom widget to fully span the page (ie, full blue background, centered text, resizing and wrapping text at smaller screen widths), but to leave the other sections alone.
Any tips on how to target this widget independent of the other sections?
Usually wordpress widgets have a their own style css file in wp-content/plugin and the name of the plugin.
Anyway if you open the developer tools on the web browser and you click on the element you want to change, you will figure out which selector to use.
Make some test on the developer tool and then make the changes on your files.
In this EXACT CASE you can do it with:
.widget:last-child {
/* your rules */
}
As this is the last child of the section id="main".
Or use its ID:
#text-3 {
/* your rules */
}
Okay. I solved it. Let's see if I can explain.
First, I changed the #content container to:
body.home #content.col-full {
max-width: 100% !important;
}
This of course expanded the full container.
Then I was able to style individual widgets as needed.
It was the more parent element that needed styling, then everything else flowed from there. But it was hard for me to target, since I:
Didn't know how to target only the home page (body.home)
Didn't see that the container was #content
Didn't realize that the easiest thing to do was to adjust the container and to style the contained widgets separately
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 want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*