.svg/2000px-Google_Chrome_icon_(2011).svg.png){kind=icon}
Hey everyone- I don't have time to make everyone a table like I would like to, but you're all more than welcome to take this code and use it for your own characters so long as you provide proper credit for the image.
I tried to provide very specific instructions on how to edit the table so that even those who don't know much about table editing should be able to use it!
Image Credit
Colors you need:
These are named exactly like they are in the code, just replace them with the proper color every time you see something in all caps. You don't have to change anything else (but if you know what you're doing, you're more than welcome to!)
BACKGROUND COLOR- the background color
FONT COLOR- the font color
TAB COLOR- the color of the lighter purple tabs and the table border
NAME COLOR- the color of the character name and image border
TEXT SHADOW- color close to but slightly lighter or darker than NAME COLOR
SPEECH COLOR- the color of the character's speech
IMAGE URL- the url link to your image
CREDIT LINK- the link to the image credit
What Sevin used:
Don't steal my colors, just wanted to show you what I used :D
BACKGROUND COLOR- 371f52
FONT COLOR- c6c1a5
TAB COLOR- 847591
NAME COLOR- 17151a
TEXT SHADOW- 564d5e
SPEECH COLOR- c8866f
IMAGE URL- http://images.helovia.net/index.php/view/53836f2259201
CREDIT LINK- https://www.flickr.com/photos/ladydragonflyherworld/
Searching for an image:
Use this link and replace 'flower' in the search bar with whatever it is you'd like to search for. All images in this search are creative commons licensed, meaning you can use them on this site.
Click on the image you'd like to use.
In the bottom right, click on the download arrow ( ↓ )
Click on 'Square (150x150)' and download the image.
Upload the image to Helovia's image hoster here.
Use the second box down to find your image URL and insert it into the code where appropriate.
I tried to provide very specific instructions on how to edit the table so that even those who don't know much about table editing should be able to use it!
Kahlua Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. "Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem." Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. here comes the sun |
Code:
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<table align=center width=600 cellspacing=0 cellpadding=0 style="background: #BACKGROUND COLOR; color: #FONT COLOR; font-family: verdana; font-size: 8pt; text-align: justify; border: solid 3px #TAB COLOR; border-radius: 10px 150px 10px 150px;"><tr><td><div style="background: no-repeat #TAB COLOR; margin: 75px 200px 0px 0px; border-radius: 0px 20px 20px 0px; height: 60px; font-family: Lora; padding-left: 200px; font-size: 50px; color: #NAME COLOR; text-shadow: 1px 1px 2px #TEXT SHADOW;">Kahlua</div><div style="background: url('IMAGE URL') no-repeat; height: 150px; width: 150px; border-radius: 75px; border: solid 2px #NAME COLOR; margin-top: -105px; margin-left: 25px;"></div><div style="padding: 20px 65px 30px 65px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. <font color=SPEECH COLOR>"Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem."</font> Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div><div style="background: no-repeat #TAB COLOR; margin: 0px 0px 30px 200px; border-radius: 20px 0px 0px 20px; height: 60px; font-family: Lora; font-size: 30px; text-align: center; line-height: 60px; padding: 0px 25px 0px 25px; font-variant: small-caps; color: #NAME COLOR; text-shadow: 1px 1px 2px #TEXT SHADOW;">here comes the sun</div></td></tr></table>
<center><a href=CREDIT LINK>Image Credit</a></center>Colors you need:
These are named exactly like they are in the code, just replace them with the proper color every time you see something in all caps. You don't have to change anything else (but if you know what you're doing, you're more than welcome to!)
BACKGROUND COLOR- the background color
FONT COLOR- the font color
TAB COLOR- the color of the lighter purple tabs and the table border
NAME COLOR- the color of the character name and image border
TEXT SHADOW- color close to but slightly lighter or darker than NAME COLOR
SPEECH COLOR- the color of the character's speech
IMAGE URL- the url link to your image
CREDIT LINK- the link to the image credit
What Sevin used:
Don't steal my colors, just wanted to show you what I used :D
BACKGROUND COLOR- 371f52
FONT COLOR- c6c1a5
TAB COLOR- 847591
NAME COLOR- 17151a
TEXT SHADOW- 564d5e
SPEECH COLOR- c8866f
IMAGE URL- http://images.helovia.net/index.php/view/53836f2259201
CREDIT LINK- https://www.flickr.com/photos/ladydragonflyherworld/
Searching for an image:
Use this link and replace 'flower' in the search bar with whatever it is you'd like to search for. All images in this search are creative commons licensed, meaning you can use them on this site.
Click on the image you'd like to use.
In the bottom right, click on the download arrow ( ↓ )
Click on 'Square (150x150)' and download the image.
Upload the image to Helovia's image hoster here.
Use the second box down to find your image URL and insert it into the code where appropriate.
