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.
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."
The space difference between 2 lines of code in my jupyter notebook is too much. I want to reduce it.
I checked out the custom.css file inside the custom folder in my .Jupyter directory, but I have no experience with CSS. I'm confused between so many options to change which one. Is it possible to change this?
In CSS, the distance between lines is defined as line-height. I'm not entirely sure how this will apply to you as i have never used Jupyter, but if it works from a CSS stylesheet you could use:
*{
line-height:10px; // Tweak till happy
}
In that custom.css file try to insert the following:
* { line-height: 140%; }
That's a line height parameter which makes the distance from one baseline (= the line on which the letters are put) to the next being 1.4 time the height of the maximum space that is used for letters.
Change that value until you find one that's convenient (120%, 160%, whatever)
The * character at the beginning makes that apply to all lines in the whole document. If headers and similar look okay and you only want to change the line height for "regular" text, write p instead of *, which will apply to all paragraphs, like
p { line-height: 140%; }
browser always load CSS which it see till the end of page load, If you want to edit something from your page but you want to create custom.css for that so linked that CSS on HTML page after Jupytor.css. After that Everything you will edit will be displayed in your page. Still explain your question more nicely if you are not achieving your goal. Thanks
I was able to change the space difference between 2 lines of code by tweaking the line-height part in the following code. It is inside the custom.css file inside the ~/jupyter/custom directory.
div.CodeMirror pre {line-height: 1.1 !important;}
This is probably something simple, but the Skills section on a site I'm working on for a friend (BrianCipoletta.com) isn't displaying on print preview.
The Skills section shows up fine there, but when you click Print up top or print preview, you can just barely make out (and select the top row), but nothing else shows. I've went into the print.css and I'm still at a loss.
If anyone has a minute to take a look it would be greatly appreciated, thank you! The css files are...
http://www.briancipoletta.com/css/style.css
http://www.briancipoletta.com/css/print.css
In your main document, give your .container element for the Skills section a unique id:
<div id="skillsContainer" class="container">
Then in your print CSS, add the following rule:
#skillsContainer {
height: 200px;
}
The reason Skills wasn't showing up was because in the print view, all its children were absolutely positioned, so its height defaulted to zero.
You may also want to tweak the CSS for your column-left, column-right, and column-center classes as well, as in the print view they are a bit taller (at 500px) than they need to be.
So, I downloaded a free website template. I modified the layout a little and now I'm having problems getting the top location icons to become smaller and position themselves all in one straight line. I've tried changing the "image image-full" tag in the CSS file from 100% to a smaller percentage. That makes the icon smaller but then the icons won't position themselves to be all on one line. The site is found at http://harmlesscrack.com/br/. I've torn apart this CSS file changing everything I can find that links to the location icons and just about given up on all hope of understanding how they formatted this CSS.
P.S. Please don't flag this for "not being a useful question.' I really do need help here.
Just explicitly set the widths of the <div class="4u">, or alter the .\34 u class. For example, the following will place the 4 containers in-a-row spanning only one line:
// HTML markup
<div class="4u">
...
</div>
// CSS
.\34 u {
width: 24.333333%;
}
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .