After a fair bit of looking around, the only way I've found to get a signature on gmail is to copy the rendered HTML signature. Two problems arose: 1) I couldn't actually select my entire signature, and I can't even see what I am selecting like how it works with regular text and other's tutorials for gmail signatures. 2) If I press Ctrl+A on Firefox (Chrome only copies half, even when I use Ctrl+A), I can manage to copy my signature, but if I try to paste in the signature box, it glitches out and appears static in the top left of that specific Chrome/Firefox tab, like this (edited for privacy reasons):
And if I try to just go for it and email (after saving changes), no signature will be rendered at all. Not too sure what to do at this point, so any suggestions are welcome.
Thanks.
EDIT: This is the HTML I use to render the signature. As a side note, I do replace those placeholder file names with links from an image hosting site. I also add 3 tags around a few of the ""s.
Ultimately I found the solution after playing with various HTML and image options. The problem lies in my use of the <div> tag for the layout of the signature. I should have been using <td>. Using the slice tool in Illustrator will render the HTML with <div> tags, while using ruler guides in Photoshop and saving for web (I used the legacy option) will render with <td> tags. I'm going to do a little more digging and see if using guides in Illustrator will still render with <div> tags, but I'm not sure if this site is the place to discuss this piece of the problem.
EDIT: By the way, Illustrator just really likes <div>s, so if anyone is looking to do this same thing, use Photoshop's legacy Save for Web mode. It will generate the <td> tags for you.
Related
An awful lot of modern web traffic (particularly on social media) consists of screenshots from web browsers. These typically include some formatted text, some layout, and some bitmap/vector graphics. E.g.,
It's really easy to take and share a screenshot, but it throws away lots of useful information and doesn't transfer well between devices (not to mention being far less amenable to things like screen readers for the blind and fancy data-mining). Of course the ironic part of this is that HTML/SVG is the perfect format for representing such data, and we're not using it even though it's right there.
html2canvas comes close to doing this, but doesn't properly handle images, see some semi-related discussion here.
My question is this, how can I select a visible area in my browser and save it in a format (ideally HTML) that preserves text and images and renders to something roughly similar when rendered separately? (so that it could be included as e.g. a data iframe for sharing).
I know that this is in general impossible, and that rendering HTML is a complicated task, but I feel like it should be possible to ask the browser something like "what elements are being rendered within these pixel coordinates?".
First:
Right click on page, then click on "Save page as".
Save it with a name that ends with .html (or .webarchive in some scenarios. See which works best for you).
Edit the now saved html file to only have the part you want (you can use any text editor. Sublime Text and Atom are usually suggested).
Then:
You can open it in your browser to see what you are up to.
You might want to inspect where the CSS is from too, and get that in your html's file folder, then link the html file to it, so as to preserve the styles.
As far as I understand, you'd want to bring all the CSS to be inline, or, at least, in the <head> section of the html file, so you can upload it as a single file, and don't need to keep linking it to the CSS file.
The page at www.patbanks.com is supposed to have a pretty image for the background. It shows on Safari, but not on Chrome or Firefox. (Didn't try IE.)
This is a Google Sites so I am not allowed to use CSS; please forgive the awful table-based code. Also unable to put the background in the BODY tag. So the image is in a TABLE tag. This is the only known way to get a background image.
(Answers that I researched were either about subtly different situations where CSS can be used properly, or about malformed URLs. I already verified that the image itself is accessible from that bizarre upload URL.) I am probably doing something offensive to the TABLE tag, or the Google-injected wrapper is doing something to thwart me. Except, the page works just fine when viewed by of all things, Safari...)
I solved the problem by changing the location of the image.
The real URL for the site is https://sites.google.com/a/{user/internal site name}/home. The published ("mapped") URL is just http://www.patbanks.com.
Originally, I uploaded it in the Attachments menu, and used the corresponding image URL. That points to some upload server (the terminal subdomain in the URL is like my Google Sites site name). That URL does not work for some browsers; it is ignored. I don't quite understand why, but it is definitely the case that it is referencing something "off site". Perhaps it is an XSS-prevention feature in the browser (since it worked anyway in some browsers, and not others).
The solution was to edit the page and use the Upload Image command. This creates the image with a very different URL than the Attachments does. (Then I used the HTML editor to remove the resulting unwanted IMG tag, and copied the URL to the TABLE background attribute.)
The page now displays with the background, in all browsers.
Google Sites used to have an "Entire Page Background" command, which I imagine used a CSS style in a DIV or on the BODY element. That's how I wrote the page before I tried to port it to Google Sites, but Google removed this functionality. There is still lots of documentation and third-party help pages that refer to that feature. That no workie no more. And Google Sites doesn't support CSS generally, because it interferes with their CMS. It automatically rewrites/redacts whatever HTML you input on your page.
Someday I'll understand exactly what was going wrong, but hopefully the workaround I've described here will be useful for people.
I have created a single HTML file that includes its own CSS styling, as well as custom HEAD tags so that it displays in a mobile browser fairly nicely. I then have it working with PHP as a file attachment.
Trouble is this -- Gmail is munging the View of it, but not the Download of it. Gmail is stripping out the CSS and rebuilding the HEAD without my custom viewport stuff.
Is there a programmatic way to code the HTML5 to cause Gmail to fail in doing this cleansing?
My only advice (and it sucks because it means a lot more work) is to put the styles inline with the html as much as you can. That seems to get past at least some of their filtering.
I'm trying to figure out where to put some code in an email. You know how you can get newsletters with styling and images, etc? I wanted to send some out but I cant figure out where to put the code. Do you add the images as attachments? Do you put the code in the body?
or should you upload the .html file as well?
Build the page as a normal HTML page. Use TABLES (yes, TABLES) for your layout. You can use inline CSS, but you cannot use a stylesheet. All images must be fully-qualified (http://yoursite.com/images/). Don't make it wider than about 650 pixels. No JavaScript.
View your newsletter HTML in a browser
Do a select-all, and copy
Paste it into a new message and send it to yourself
See what you end up with
Try other mail clients
Various mail clients will mess with your markup and your styles. What works on Gmail will look like poop on Outlook etc. It will be an exercise in frustration. Test, test, test.
Assume all images will NOT BE SHOWN when the user originally views the email.
Here's a good guide to what works and what doesn't:
http://www.campaignmonitor.com/css/
My advice: keep it simple - a logo and some text and a link to the real newsletter. Making email newsletters is a fine art, and frankly, people prefer to read them in a browser where they behave like a web page.
Sending out HTML emails eigh?
There can be a lot of problems you will quickly encounter, mostly revolving around each email client having their own different way of handling things. The aim here is to keep your email as small, simple, and unbroken as possible.
The message:
Each language has it's own requirements, you need to check with the language you are using to see what is easier, to do it inline as part of the mailing script, or to have it inserted through a HTML file, etc. So for more details here, post the language you're using.
Layout:
This is where message simplicity comes in. The best layouts are usually the most simple ones, especially considering not all email clients are 100% HTML standards compliant. You won't know how big your client's viewing window for the email will be nor can you force it to any size or pop it out. Remember that it's goal is to be a message, not a webpage. Usually simple flexible/elastic tables will do the trick just fine if you have anything more advanced than simple paragraphs.
Images:
Link everything statically (statically means http:\\www. ....mypicture.png as opposed to dynamic linking which looks like this \images\mypicture.png) hosted from your server. The reason for this is so that you will have no broken links, your email will be smaller in size (as opposed to attatching). The downside is that some clients may ask about showing pictures. The cold hard truth is that this cannot be avoided no matter which method you use (See for more details).
Links:
Again, link everything statically. Local/dynamic link's won't work and your recipients will be mighty unhappy.
CSS
Either have your CSS classes at the top, or everything in-line (< ... style="..." />). You don't want to attach a CSS file, it's messy and unconventional.
Scripts
Inline or at the top of your file, for the same reason as above.
Additional Documents
If you want to include PDF's or DOCX's, etc, the best and most common methodology is just like images, to host on your server and simply include a static link in your email to them. It keeps file size down and you don't have to worry about what each and every email browser/reader is going to do.
When viewing a webpage, I would like to copy a selection of text with its html formatting in one piece.
Meaning if some text is in bold and blue, I want the tool to create a style or class in the html which makes the text blue. Everything is contained in the produced html.
I have downloaded a similar plugin but the classes definitions are still external which means I have to get them separately. A non technical user would be at a loss here. I want the user to be able to copy and paste to a new webpage and that page just just works properly because the html copied contains everything.
This doesn't have to be a FF plugin. It could be IE or a Windows app.
I think you may be able to accomplish this by using the Firebug for Firefox extension. I often use it to export the content of a web page for use rebuilding a similar object. Is this still too technical? Firebug is a powerful, viable option that it is worth learning, I think.
I think the copy operation does this already. If I copy this page and paste it in a WYSIWYG editor such as TinyMCE (included in Wordpress), I get the formatting. For example the text of this page is (as pasted):
<h2>Firefox plugin to copy text with its formatting Intelligently?</h2>
The HTML markup is copied, but not external CSS. I suspect creating a piece of CSS that would apply to your standalone snippet of code the style it had within the DOM hierarchy would be horribly difficult if at all possible.
Try SnappySnippet, it's a Chrome extension that allows to copy html and all the related css style of an element. It integrates itself into the Chrome console. I hope this helps
This seems to be what you're looking for:
Web Design Pirate:
https://addons.mozilla.org/en-CA/firefox/addon/web-design-pirate-for-devtools/
It creates a new "Pirate" tab in the developer tools that lets you grab the elements you want, including all associated CSS.