~
Post by Avalikia on Jul 22, 2015 5:26:08 GMT -5
So, I've been toying with ways to code my own signatures to most effectively use the 726x250 area now allowed for them. As you may have noticed, I have mine set up so that there's an image on one side and the rest is on the other - since it's a much wider space than it is tall it makes sense to do it that way, though if you don't know coding and you try to do it then it seems impossible and if you do know coding then you know that there's multiple ways of doing it.
After toying with the multiple ways of doing it, I've hit upon what I believe is the most elegant way of coding this, and I thought that I'd share it because I don't believe that it's really that difficult to understand how to use it if someone explains it properly and I'd love to see other people being able to do it if they wish. If you want to do this to your signature, do not be intimidated by how long this post is - I didn't give a long explanation because it's horribly complicated but because I wanted to make sure that you understand all your options and understand each without getting confused along the way.
So, here is the code I'm using for my signature as of the moment I'm writing this:
Which may look extremely complicated if you're not used to coding, but I'll walk you through what each part does.
img - First I say that I want it to display an image with the img code. Proboards actually understands the img in two ways. Either, like me, you give it img code, a url, and then a closing /img code. Or within the img code tag itself you have something that says src="URL" and no closing /img code. If that confuses you, all you need to know is that if you know how to put an image in your signature already then you're using one of those methods and that the style code will work either way.
style - Then, within the img code, I tell it more specifically exactly how I want the image to be displayed. I do this with the style code, which is extremely powerful and has nearly infinite options, but I'll explain just the couple I think you all will find useful. As you can see, you put how you want it to be styled in quotes, and there's : and ; involved. It doesn't matter whether you tell it the width or the float first.
After the img code, you'll notice that the rest of the coding is pretty standard coding, like you'd see in a post. First I tell it that I want everything else centered, give the unstyled img code(s) for my badge(s), tell it how to list my characters, close that center code, and I'm done.
(Note: If you use the 'Preview' button while editing your signature, it will probably look like your float code isn't working. This is because the Preview display box is quite narrow and that will make the rest of your signature display below your main image. You'll have to save it and see how it displays on your main profile page or in the forum itself to see how it actually appears.)
If you have any questions or problems using this method, feel free to let me know and I'll help you troubleshoot! And I'm looking forward to seeing everyone's signatures!
After toying with the multiple ways of doing it, I've hit upon what I believe is the most elegant way of coding this, and I thought that I'd share it because I don't believe that it's really that difficult to understand how to use it if someone explains it properly and I'd love to see other people being able to do it if they wish. If you want to do this to your signature, do not be intimidated by how long this post is - I didn't give a long explanation because it's horribly complicated but because I wanted to make sure that you understand all your options and understand each without getting confused along the way.
So, here is the code I'm using for my signature as of the moment I'm writing this:
[img style="width:476px;float:left;"]http://img.photobucket.com/albums/v479/Avalikia/adminsig.jpg[/img][center][img]http://i62.tinypic.com/3169945.jpg[/img]
[b]Avalikia[/b] ~ Pamela Isley - Poison Ivy
Nina Stenet ~ Heather Glass - VerMillion
Evangelina Bradley
Victor Fries - Mr. Freeze[/center]Which may look extremely complicated if you're not used to coding, but I'll walk you through what each part does.
img - First I say that I want it to display an image with the img code. Proboards actually understands the img in two ways. Either, like me, you give it img code, a url, and then a closing /img code. Or within the img code tag itself you have something that says src="URL" and no closing /img code. If that confuses you, all you need to know is that if you know how to put an image in your signature already then you're using one of those methods and that the style code will work either way.
style - Then, within the img code, I tell it more specifically exactly how I want the image to be displayed. I do this with the style code, which is extremely powerful and has nearly infinite options, but I'll explain just the couple I think you all will find useful. As you can see, you put how you want it to be styled in quotes, and there's : and ; involved. It doesn't matter whether you tell it the width or the float first.
width - this simply says how wide I want the image to be. It's not necessary to have it at all if the image is already the size that you want it to be (if it's removed from my sig, it will change the style part of the code to read: style="float:left;" ) If you want your entire signature with everything to be exactly as wide as it can be and have your signature badges fit in there perfectly, since the signature badges are 250px wide you'll want your big image to be 476px wide because that adds up to 726.
Note: If you want to specify the height instead for some reason, you can use 'height' instead of 'width'. However, I don't recommend using both at once (that would look like: width:#px;height:#px; ) because you only need one and you can throw your image out of proportion if you use the wrong numbers. (Unless that's what you want...)
float - this is the code that actually says that I want this image to be next to the rest of the sig instead of above it - this is called 'floating'. You can float an image to the right or to the left (but you can't make it float in the middle). Whatever else you put in your signature will appear in the space that this image isn't using, as long as it isn't too wide. If the rest of the signature ends up being taller than the floating image, then it will use as much of the space next to the image as it can and then use the full width of the signature after that.
After the img code, you'll notice that the rest of the coding is pretty standard coding, like you'd see in a post. First I tell it that I want everything else centered, give the unstyled img code(s) for my badge(s), tell it how to list my characters, close that center code, and I'm done.
(Note: If you use the 'Preview' button while editing your signature, it will probably look like your float code isn't working. This is because the Preview display box is quite narrow and that will make the rest of your signature display below your main image. You'll have to save it and see how it displays on your main profile page or in the forum itself to see how it actually appears.)
If you have any questions or problems using this method, feel free to let me know and I'll help you troubleshoot! And I'm looking forward to seeing everyone's signatures!
