full-calendar print preview is not having color in preview page.Its takes only black color.
I didn't get different colors in print preview using window.print()..Please answer..thanks in advance.
The fullCalendar print CSS says (among other things)
.fc-event{background:#fff!important;color:#000!important;page-break-inside:avoid}
So the !important will override anything in the main CSS and any styles you may have added yourself, and cause the events to have a very plain style, presumably so it will be ok on the majority of printers.
This is the default behaviour. If you want to change it, you can modify the print CSS file to your taste.
Related
In a Rails app I am using Twitter Bootstrap as a starting point. Twitter Bootstrap uses some of the HTML5 Boilerplate reset which includes this gem:
#media print {
* {
color: #000 !important; /* Black prints faster: h5bp.com/s */
}
}
(note the linked article is from 200-effing-8)
My app outputs PDF using pdfkit/wkhtmltopdf and due to the above declaration all pdf output is black on white. The whole point of pdfkit/wkhtmltopdf (to me, in this app) is for PDF output to match the screen.
Is there any way for me to override this declaration in my stylesheets after Bootstrap is imported? I want it to be something along the lines of "auto" but that doesn't appear to be valid.
I can, of course, comment out the line in Bootstrap, but I'd rather avoid changing the source if I can (since I'm bringing it all in via the bootstrap-sass gem). I could also tell pdfkit/wkhtmltopdf to not use "print" stylesheets, but that creates different problems.
I've tried setting it to "inherit" but functionally that isn't what I'm after, and it doesn't seem to work anyway.
Thanks.
I would comment it out in the bootstrap css. The asterisk selector is a wildcard which will set all text content to black. Otherwise you would have to write out a lot of individual CSS rules using id or class to override. If most of the text content on your site is already set to black or a dark enough color, then you don't need that CSS print rule.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.
I have a CSS file which is not written by me, but I have to change stuff. My problem is a line like this:
list-style-image: url("../images/pfeil.png");
The path to the image is correct, but it's not displayed. I used Firebug to check which styles are applied and I see the line is stroke through. According to the documentation, that means that it's overwritten by another rule.
Is there a way / tool to find out, which rule is overwriting the line above?
They are not disabled. These entries have a strike through them to signify they have been reset or overwritten by a newer rule (one loaded after this style sheet for instance).
CSS styles are loaded in order of inclusion on the html page, with inline styles taking priority over CSS sheet definitions.
Firebug will show you which one has overwritten this one if you just review all CSS acting on that element. Just look for any other list-style-image: listed.
Open your page in chrome, hit ctrl, shift I to open developers console. On the right, there should be an accordion thingy with one of the options being "Computed Style". Open that, click on show inherited, find the setting your concerned about, click the little arrow next to it and it should open up and tell you where the computed setting is coming from.
Let me know if that does it for you.
I was wondering if it was possible to manipulate the CSS of websites. For example color in the input fields? I had a look at several questions, but its not clear to me if it is possble at all.
For Example in Google Chrome, Whenever a field is selected it shows a golden line around the outsite. Is it possible to do this and other things in delphi, with any website. Writing CSS code that gets applied to the website opend in Twebbrowser? Just for personal viewing only
Thx
Can I change the color of an input field background with this code as well? I can change background colors and change font size, but cant seem to figure out to color in or border an input field. This is the code:
http://www.delphidabbler.com/tips/58
It is possible to modify CSS by adding a stylesheet from code, after the page is loaded:
var
document: IHTMLDocument2;
stylesheet: IHTMLStyleSheet;
stylesheetIndex: Integer;
begin
// Inject CSS Style Sheets
document := webBrowser1.Document as IHTMLDocument2;
stylesheetIndex := document.styleSheets.length;
if stylesheetIndex > 31 then
raise Exception.Create('Already have the maximum amount of CSS stylesheets');
stylesheet := document.createStyleSheet('', stylesheetIndex);
stylesheet.cssText := ...
Using #jasonpenny's answer to add a stylesheet, what you need next to change the border around the input element that has focus, is what in CSS is called the focus pseudo class or selector. For more information see these articles:
http://www.w3schools.com/css/css_pseudo_classes.asp
http://www.w3schools.com/css/sel_focus.asp
http://www.w3schools.com/css/css_border.asp
The http://www.w3schools.com site has a wealth of information on web development. It also allows you to play with many examples so you can see what the effects would be when you change things. If you are trying to learn how to do css styling you might be better of getting to grips with all the information there, instead of trying to learn programming and a programming language at the same time.
I have HTML page of few tables created by ASP.NET and when I do the "Page Setup" option before printing the paper size is already selected as "Letter" and I want that option to be in "A4". I changed the size of the table but its not working.
Is there any page setup information I can put in HTML so that "Page Setup" option can take it from there.
Please help.
Thanks
Anto
You have to use media type in CSS. This way you can specify a different set of styles for print and screen medias.
Here is an article about printer friendly pages. You can also read about media types in the W3C learning section.
You cannot change anything in the Print window from the HTML. You can just specify another CSS file for print media to make your page look better when you print it (like remove buttons, remove any content which is useless on a sheet of paper, change sizes, change fonts, etc.)
Hope this helps.
You could give it a try with CSS, using the #page rule. Mind that this is valid for CSS 2.0 and CSS 3.0 but not for CSS 2.1:
#page { size: A4 };
I'm not sure if this will change your default selected paper size though.