Settings --> Personal tab --> Personal Information --> Signature
Paste your text/html code in the signature box and click Save at bottom of page.
Changes to your sig effect all past posts and are immediately visible.
Sig #1 - simple text link
<a href="YOUR LINK URL" target="_blank"><font size="4" color="blue">Click to Visit my Website</font></a>
Sig #2 - simple image link
<a href="YOUR LINK URL" target="_blank"><img src="URL OF YOUR IMAGE" alt="PeaceSign Icon" title="Click to Visit My Website" width="45" /></a>
Sig #3- image link + text slogan
<table><tbody><tr><td><a href="YOUR LINK URL" target="_blank"><img src="YOUR IMAGE URL" alt="PeaceSign Icon" title="Click to Visit My Website" width="40" /></a></td><td><font size="3" color="green"><i>Because life isn't meant to be lived in black and white</i></font></td></tr></tbody></table>
Sig #4 - clickable social media icons
<table><tbody><tr><td><a href="YOUR URL" target="_blank"><img src="http://www.colscreations.com/Buttons/website.png" alt="Website Icon" title="My Website" width="30" /></a></td><td><a href="YOUR URL" target="_blank"><img src="http://www.colscreations.com/Buttons/facebook.png" alt="Facebook Icon" title="My Facebook" width="30" /></a></td><td><a href="YOUR URL" target="_blank"><img src="http://www.colscreations.com/Buttons/pinterest.png" alt="Pinterest Icon" title="My Pinterest" width="30" /></a></td><td><a href="YOUR URL" target="_blank"><img src="http://www.colscreations.com/Buttons/instagram.png" alt="Instagram Icon" title="My Instagram" width="30" /></a></td><td><a href="YOUR URL" target="_blank"><img src="http://www.colscreations.com/Buttons/twitter.png" alt="Twitter Icon" title="My Twitter" width="30" /></a></td></tr></tbody></table>
- each <td> ...</td> contains one icon image and its link
- "YOUR URL" - replace with your own URL
- alt =" " - accessibility text for screen readers
- title=" " = text viewers see mousing over the icon
You may download my icon set here: SocialMediaIcons.zip
Please upload them to your own host rather than linking to mine.
Seems there is a maximum height for sigs. Somewhere between about 45-50 pixels. Higher than that, the bottom is cut off. I couldn't find a way to make thing stay linear without using a basic table and I tried a bunch of thing to get rid of the border but couldn't. Basic HTML isn't hard. Trying to conform it to the unknown properties of the sig box IS hard, LOL.
If anyone has a template to share, please add them to this thread. Will be a handy resource for folks who want a quick sig without struggling over code.
P.S. - the posting box is awful with line breaks and spaces between lines. It's almost like every time you preview, it adds more spacing. I don't know. I spent more time trying unsuccessfully to get rid of all the extra space in this post than I did on the sigs. UGHHH
It's the forum. Sorry, I hadn't checked downloading it directly from my post. From anywhere else there is no problem downloading it - just click the link and yes to download. The forum is apparently protecting us from potentially dangerous downloads by throwing up a warning message saying the download of the .zip is not allowed because yadayadayada. However, I just clicked the button that basically said "I understand, download anyway" and it downloaded.
You can also right-click the link in my original post, choose "copy link", then paste it into your address bar, enter/go - and accept the download. Since you're not downloading it directly from the forum that way, there's no issue.
But, since it may be easier for people, here are the 7 .png icons in the .zip:
Click them, it'll open the forum photo viewer and from there, there's a download button on the lower right.
I downloaded the zip today and had no problems... maybe a browser issue for some? Anyway, thanks so much for the signature help!
I better tweak my signature! I made the table go wonky
Seems there is a maximum height for sigs. Somewhere between about 45-50 pixels. Higher than that, the bottom is cut off.
OK, found it in the page source code.
max-height:48px; overflow:hidden;"So 48 is the magic number. Anything beyond that will be cut off because overflow=hidden.
target="blank" is included in my template codes. Some people find links opening in new tabs annoying but I am a big believer in it and always use it for off-site linking. I don't want to send people away from whatever page of mine they're on, too easy for people to get distracted with that content and not come back. And if they do use the back button to get back to my site, it has to load again and they've lost where they were at.
The .zip is 7 individual .png icons so one can use just whichever they need. (In the code, just delete the <td>...</td> for whatever you don't need.) See above reply re issue with downloading the .zip directly from the forum and for the individual icons you can download separately.
WYSIWYG (What You See Is What You Get) composition is a wonderful thing. For the perfectionists & control freaks among us, having the ability to also work with the raw code is a real boon. But the HTML box here in the forum that lets you edit your raw post is pretty wonky to work with. The post might look OK but then you hit Preview and whoa, now there's extra blank line spacing you didn't want. Go back to composition mode, delete the spaces. Preview - nope, now they're back and even bigger. So go into HTML view and manually adjust the <p>'s and <br>'s until it looks as desired in compose view, but then Preview is full of even more spaces. I actually copied the whole raw HTML of my orig post to my own editor, adjusted to deal with the spacing and pasted back into HTML box. Looks right in compose mode but on preview - bam! - the unwanted spacing comes back and seems like every Preview generates more spacing that then has to be removed. So its a circle you can't beat. I spent more time going back and forth on this last night, copying & pasting and previewing & editing again and cursing at the screen then I'd like to admit before giving up. Shouldn't be that hard to get a simple line break or space (ONE) between lines. </end rant>
This is very handy! Thank you for posting!
Thank you very much @PacifierCity and @ilonagarden ! I spent way too much time playing with it this morning!😂
Very nicely done!
Ok. Try this:
<table><tbody><tr><td><a href="URL of Link #1" target="_blank"><img src="URL of Icon Image #1" alt="#1" title="for #1" width="40" /></a></td><td><a href="URL of Link #2" target="_blank"><img src="URL of Icon Image #2" alt="#2" title="for #2" width="40" /></a></td><td><a href="URL of Link #3" target="_blank"><img src="URL of Icon Image #3" alt="#3" title="for #3" width="40" /></a></td></tr></tbody></table>
Here is the exact same code but I added some line breaks so you can visualize what's going on:
<table><tbody><tr>
<td><a href="URL of Link #1" target="_blank"><img src="URL of Icon Image #1" alt="#1" title="for #1" width="40" /></a></td>
<td><a href="URL of Link #2" target="_blank"><img src="URL of Icon Image #2" alt="#2" title="for #2" width="40" /></a></td>
<td><a href="URL of Link #3" target="_blank"><img src="URL of Icon Image #3" alt="#3" title="for #3" width="40" /></a></td>
</tr></tbody></table>
title="your text here" ---> this is the message people will see when they hover over the image so this is where you want to put 'click to visit my website' or whatever.
alt="your text here" ---> this is the text a screen-reader would read out loud. But it's also the text that will show on the page if for some reason the browser can't display the image. ALT text is mandatory for images on a webpage if you want it to validate. I don't think it's of importance here in a sig but I included it since if you add an image to a post using the camera icon and then check the HTML, it includes ALT for the image so you know, when in Rome ....
width="40" ---> change the 40 to whatever size you want. The browser will scale the height correctly to that. Just remember that 48 is the max height for a sig. If it's easier you can use height="40" instead and the width will scale to that.
You can use https://www.w3schools.com/html/tryit to edit & try out your sig. It's easier typing/editing there then in the little sig box.
Make sure you have no line breaks in your code when you paste it in your sig box. The sig and posting in general is wonky with spaces and wants to add unwanted <br>s and <p>s if it "senses" a space.
Ugh. See all the extra spacing in my above post? That's what I'm talking about. Wasn't there when I posted. But then I immediately went to Edit to fix the link I included and posted without previewing after the edit. And poof - it added a bunch on unwanted spacing. So annoying.
Brilliant! Thanks so much, Col. Agree, the sig box is definitely fiddly and the limitations seem a bit random. Nice to be able to make our posts more personal. Well done! 👏👏👏
Thank you so much, that is very helpful.
