Short Version:
I am using Chrome 27.0.1453.94 on Windows 7 Pro
I go to http://www.try-phpbb.com/30x/ using Chrome
I select Print... | Save as PDF
The print preview looks nothing like the web page - layout, links, fonts all wrong.
Why?
How can I fix this to make the PDF styled the same way as the web site?
Long Version:
I am a member of a secure forum (ie have to log in for access), which is base on the phpBB forum template (https://www.phpbb.com/). Our forum will be cleared of all threads and posts soon to make room for the next round of subscribers.
We have been given permission (even encouraged) by the moderators to download the contents of each topic/thread/post and write them into PDF files so we can keep referencing them in the future. We have to do this ourselves, and I volunteered to do the work as I have an IT background. But its proving harder than I thought.
I was hoping to do the following this process...
Download and add "Stylish" Chrome Extension
(https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe)
Add CSS code to Stylish to modify the appearance of the forum pages ready for PDF migration
In Chrome use Print | Save as PDF option to save styled page as a PDF doc
For multi-page forums, repeat this process for each page and then use PDFMate (or similar) to concatenate the PDF docs together into a single long PDF.
Steps 1, 2 and 4 are working perfectly, but step 3 is not.
The print preview in Chrome screws up the appearance of the forum pages. Layout styling is lost, fonts are completely different, links are missing or look terrible. For example, try printing this page (http://www.try-phpbb.com/30x/) - it looks completely different in print preview to how it looks in the browser.
Is there something I can do to fix this? Can I somehow give the print preview version some CSS code to restyle it? Anyone know why this would be happening?
Or alternatively, can you suggest another solution to convert HTML to PDF? I have tried Chrome extensions "iWeb2x" and "Send to Google Drive", but with no success - because the forum is secured, the PDF file they create is the forum's Login page, not the forum thread page I'm currently looking at.
Any help greatly appreciated - thanks.
Have a look here, maybe it's helpful
http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
You can set your own css style for the printed page.
Hope it helps, regards
I had a case, where if the iframe is display:none, the css is not loaded, thus not printing the correct CSS style. You can fix it with visibility:hidden; And size zero
Related
Ok so I have this template receipt file that I'm working on. I use this code to display an image on the webpage preview of the receipt:
<div class="barcode"><img class="barcode" src='https://www.example.com/?wc_barcode={{meta_data.[1].[value]}}'/></br>{{meta_data.[1].[value]}}</div>
What the image link ends up looking like in html on the preview page is:
https://www.example.com/?wc_barcode=6094644a91bc7
When you try to download the image it's an unnamed .png. It does not exist on my server and is generated by the link on the fly. It's Woocommerce Order Barcodes plugin from Woocommerce. Either way, the image shows perfectly fine in the preview but when I go to print the receipt the image disappears. Can someone help me understand what might be going on and what to do about it.
Not exactly sure what was done, but the developer customized the plugin to work the way I was using it so if someone else tries to use it like I am they will not have a problem either as the plugin is specifically designed to be embedded into different files and templates.
The Plugin is called Digital Barcodes by UKRSolution. Figured since they provided such great support and even extended plugin functionality due to not seeing someone using it in the manner I was, that I would let anyone interested or looking for this type of solution know.
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
Is it possible for me to edit the css using coda, and view my changes live in a separate window?
I just downloaded it as I heard good things about it, and I want to learn efficient CSS coding using it.
cmd-2 and cmd-3 are shortcuts that are great, looking for any tips that would help me be fast!
I think you might be looking for a plugin called Lively
http://menumachine.com/blog/2008/12/a-live-preview-window-for-coda/
Also you can add a refresh meta tag to your HTML. This will refresh the page every 2 seconds.
<meta http-equiv="refresh" content="2" />
Another solution is the XRefresh plugin for Firefox...
http://xrefresh.binaryage.com/
Hope that helps!
Couldn't you have the page you're building in a separate browser window and refresh with edits? Especially if you're not working off a server because you don't need to commit anything and all your files are immediately uploaded.
I know Coda has a preview screen for CSS styles. But as answered earlier you may want to try Lively if that's more what you are looking for.
Best of luck
Keep an eye on on LiveReload. It looks as if it has an impressive feature set and will cost you a small bit.
Lively? Coda does this already with the split window function; for example:
Split an index.html file and have one half as preview and the other in edit and you will see the preview change as you edit the editable file you have loaded.
With CSS, split the window and drag an html file from the left menu and change it to preview - saving the edited css file with update the preview.
A footnote to this is a problem where "live update" stops working - awaiting Coda's comments on this as only found one other thread online that refers to this major problem.
This may sound like a SuperUser issue, but I wrote the page in question and I'm wondering if there is something I can do to fix the problem....
I have a page in production that simlply displays data in a bunch of tables. Our employees basically go to this page to print a form with our clients information filled in for them. Today for a specific client the page is not printing. I've tried printing using IE 7 and 8 as well as Chrome on Windows XP and Windows 7. This client's data is by no means make the page longer or contain more data that others clients.
Symptoms:
Does NOT print using IE8 or IE7 on WinXP and Windows 7.
DOES print with Chrome.
The page to print is displayed fine as a far as the actual web page goes... it scrolls, there are no errors and and nothing seems to be wrong with the page.
When using IE to print, the document just spools with out actually printing out...I end up canceling the document from the printers window.
When viewing print preview the first page is displayed, but when we try to go to the second page in the print preview IE locks up.
This does not happen for every client, but when it does happen it can be reproduced.
The page is pretty long and has client info that is keeping me from just copy and pasting the markup for you guys. I am hopeing that some one else has experienced a similiar issue in IE and has some advice.
NOTE: The users are not allowed to use other browsers, so save the IE flamming please.
Hmmm, very hard to tell without markup.
Just to throw some ideas:
Are you using anything difficult on the pages, like Flash or Java?
Custom fonts / cufon?
Huge downscaled images?
opacity or IE specific crazy filter CSS rules?
A huge structure that IE doesn't manage to break up into pages, e.g. a giant table with position: absolute ?
If you use images, try turning off the images. Try turning off CSS.
A few things to try when debugging:
Switch everything over to a standard font and font size (e.g. Arial 12px).
Eliminate all CSS and JavaScript, and if that fixes it then you can narrow down from there by taking out chunk by chunk until it starts working.
If that doesn't work, try cutting down the content significantly to see if it will show up.
Here's my current workflow for editing CSS:
Me: "Take a look at this page!"
Guys: "Try making the post titles bigger"
Right click on a post title, choose "inspect" (to inspect it in firebug)
Find the appropriate CSS statement in Firebug (h2.post_title or something)
Modify the CSS in Firebug, ask friends how it looks
If it looks good, make the change again in Textmate
I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)
Edit: Something that works on a Mac would be ideal
Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.
http://www.skybound.ca/
Go forth and be enlightened. This is truly a life changing program.
Another possible workflow:
"Hey guys, take a look at this page!"
"Try making the post titles bigger"
Make the change to the CSS file
Hit reload
I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.
Check out Backfire:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
Haven't tried it, but sounds promising.
Check out my contribution to this problem:
http://www.cssupdater.com
Step 6 would then be:
6: One click on the "Sync now" button in Firebug!!
The click sends your changes to the desktop application, which syncs your orignal css files.
You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!
Heureka?
XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.
What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).
Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.