nav/profile page: 'cloud'

[mistojen]

'cloud' dw profile/nav page

I can't seem to get the font size to agree with the profile page, so I've made two variations of this, one with and one without the character name on it. Unfortunately, the one with the character name won't work on the profile. Below are three codes, two that are for a journal entry (one with and one without the character name) and one for a profile page (without the character name). NOTE: This only works on the profile page or if your journal has the default gray color background.

CHARACTER NAME
	» LINK » LINK » LINK » LINK » ©

the code (in-entry):
<center><table style="width: 650px; height:230px;"> <tr><td style="width: 500px; height: auto; font-family: Georgia,serif; font-size: 32px; font-weight: bold; font-style: italic; color: #2FC3F5;text-shadow: -2px 2px 2px rgba(150, 150, 150, 1);text-align: center; padding: 10px; text-transform: lowercase;">CHARACTERNAME</td></tr> <tr><td> <table style="width: 500px; height: 230px;background-image: url(GIFURL);"><tr style="height: 230px; width: 500px;background-image: url(http://i.imgur.com/NitLQvM.png);"><td></td></tr> </table> </td> <td> <table style="width: 150px; height: 230px;"> <tr style="vertical-align: middle;"><td style="vertical-align:middle;padding: 30px 5px;"> <span style="font-family:'arial narrow';"><a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» <a href="http://mistojen.dreamwidth.org/" style="color: #000; text-decoration: none;">©</a></span> </td></tr> </table> </td></tr> </table></center>

» LINK » LINK » LINK » LINK » ©

the code (in-entry):
<center><table style="width: 650px; height:230px;"> <tr><td> <table style="width: 500px; height: 230px;background-image: url(GIFURL);"><tr style="height: 230px; width: 500px;background-image: url(http://i.imgur.com/NitLQvM.png);"><td></td></tr> </table> </td> <td> <table style="width: 150px; height: 230px;"> <tr style="vertical-align: middle;"><td style="vertical-align:middle;padding: 30px 5px;"> <span style="font-family:'arial narrow';"><a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» <a href="http://mistojen.dreamwidth.org/" style="color: #000; text-decoration: none;">©</a></span> </td></tr> </table> </td></tr> </table></center>

» LINK » LINK » LINK » LINK » ©

the code (profile page):
<center><table width="650" height="230"> <tr><td> <table width="500" height="230" cellspacing="0" cellpadding="0" background="GIFURL"><tr height="230"width="500" background="http://i.imgur.com/NitLQvM.png"><td></td></tr> </table> </td> <td> <table width="150" height="230"> <tr valign="middle"><td valign="middle"><br /><br /><br /> <font face="arial narrow">» <a href="URLGOESHERE"><font color="black">LINK</font></a> » <a href="URLGOESHERE"><font color="black">LINK</font</a> » <a href="URLGOESHERE"><font color="black">LINK</font></a> » <a href="URLGOESHERE"><font color="black">LINK</font></a> » <a href="http://mistojen.dreamwidth.org/"><font color="black">©</font></a></td></tr> </table> </td></tr> </table></center>

instructions:

1. Replace the following:
   • GIFURL (needs to be at 500x230 in size; to resize or crop gifs, I recommend ezgif, just remember to re-upload your image somewhere else, due to the fact that ezgif only temporarily saves the url)
   • URLGOESHERE
   • LINK with your link text
   • CHARACTERNAME (if applicable)
2. If you want to add or remove links, you'll need to tweak the padding in that <*td> tag or add/remove <*br /> tags from the profile code to keep the links in the center.
3. In the instance that you'd like to upload it yourself just in case, the overlay is located here: http://i.imgur.com/NitLQvM.png

   On the off chance that you want the overlay with a white background (like if you're going to use it on IJ or on a journal layout with a white background for the entries, the url for that overlay is here: http://i.imgur.com/u3EJHrm.png

4. Please do not remove credit.
5. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
6. Enjoy!

to change the colors:

#000, black #2FC3F5

Comments

[callshimdanno]

Hi It's Murgy and I am using this code here. I was wondering if there was a way to get rid of the white. Also is there a way to remove the text from the gif? Thanks!

[mistojen]

There's not a way to get rid of the white, no; it's designed for in-entry so the transparency I made that makes the cloud shape is colored to match the background of the default entry color. My computer's been kind of a shit, otherwise I'd offer to recolor it to match your background for you, but Photoshop won't run properly lately, I'm so sorry :( As for getting the text off the gif, I'm not all that knowledgeable about gifs themselves or how they're made so I would think the only option would be to crop it out and then blow up the gif with a resize? I'm not sure :( I don't think so unless you crop it off, though.

[callshimdanno]

No worries at all! Thank you for getting back to me <3

[mistojen]

No problem. Sorry again! If you know someone else with functioning Photoshop, they should be able to match the color with a screenshot of your journal and save down one of the transparency images to change the color so that it'll work for you, though? Otherwise, if you want and don't know how, I'll be happy to give you a modified code that'll keep the links where they are and change the shape of the gif to a circle or a leaf-like shape to go there instead and that won't need a transparency, so you won't have to worry about the color. Just let me know :)

[callshimdanno]

A circle or leaf would be awesome.... if you don't mind?

Boom, take your pick! :)

[mistojen]

LEAF-SHAPE:
<center><table style="width: 650px; height:230px;"> <tr><td> <table style="width: 500px; height: 230px;"><tr style="height: 230px; width: 500px;"><img src="http://i.imgur.com/6IGAoO9.gif" style="-moz-border-radius-topleft: 150px;-webkit-border-top-left-radius: 150px; border-top-left-radius: 150px;-moz-border-radius-bottomright: 150px;-webkit-border-bottom-right-radius: 150px;border-bottom-right-radius: 150px;"><td></td></tr> </table> </td> <td> <table style="width: 150px; height: 230px;"> <tr style="vertical-align: middle;"><td style="vertical-align:middle;padding: 30px 5px;"> <span style="font-family:'arial narrow';"><a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» <a href="http://mistojen.dreamwidth.org/" style="color: #000; text-decoration: none;">©</a></span> </td></tr> </table> </td></tr> </table></center>


OVAL:
<center><table style="width: 650px; height:230px;"> <tr><td> <table style="width: 500px; height: 230px;"><tr style="height: 230px; width: 500px;"><img src="http://i.imgur.com/6IGAoO9.gif" style="-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;"><td></td></tr> </table> </td> <td> <table style="width: 150px; height: 230px;"> <tr style="vertical-align: middle;"><td style="vertical-align:middle;padding: 30px 5px;"> <span style="font-family:'arial narrow';"><a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» <a href="http://mistojen.dreamwidth.org/" style="color: #000; text-decoration: none;">©</a></span> </td></tr> </table> </td></tr> </table></center>



RECTANGLE WITH ROUNDED EDGES:
<center><table style="width: 650px; height:230px;"> <tr><td> <table style="width: 500px; height: 230px;"><tr style="height: 230px; width: 500px;"><img src="http://i.imgur.com/6IGAoO9.gif" style="-border-radius: 75px; -webkit-border-radius: 75px; -moz-border-radius: 75px;"><td></td></tr> </table> </td> <td> <table style="width: 150px; height: 230px;"> <tr style="vertical-align: middle;"><td style="vertical-align:middle;padding: 30px 5px;"> <span style="font-family:'arial narrow';"><a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» LINK</a> <a href="URLGOESHERE" style="color: #000; text-decoration: none;">» <a href="http://mistojen.dreamwidth.org/" style="color: #000; text-decoration: none;">©</a></span> </td></tr> </table> </td></tr> </table></center>

Re: Boom, take your pick! :)

[callshimdanno]

Thank you so much! You rock!

[mistojen]

No problem! Enjoy!

[lebensfresser]

Using, thank yous!

[mistojen]

You're welcome and thanks for letting me know!

[lebensfresser]

No problem! Just in case you want to see. No clue why it's giant, I've tried changing the height and width numbers to no avail, xD But it's okay.

[mistojen]

Ahhh, it's because the image is large. You have to change that, not the table. So where it says img src="urlofyourimage" style="all-the-border-radius-stuff" add in the height and width requirements you want for the image in the style tag there. That'll constrain the image itself, resizing the table, if that's what you were trying, isn't going to impact the image. Let me know if that doesn't work and I'll see what I can come up with for you! ♥

[lebensfresser]

THAT'S where it goes, herp derp. Thanks a ton, it worked.

I do have a stupid 'halp' question - please tell me how I can remove the link bits? The things I tried only broke the code. /o\

[mistojen]

Link bits? Not sure if you mean the whole link or...? Can you be more specific?

[obscurus_phantasma]

>.< Yeah, sorry. I wanted to use your code as an Inbox thing, but I don't need the links. How might I remove the <a href etc ?

[mistojen]

Oh, okay. If you want there to be text just not a link, then remove the a href="URLGOESHERE" style="color: #000; text-decoration: none;" from before the text and then remove the < /a > after it, but leave the span in tact.

If you don't want text at ALL, delete all of the links except the one that credits (at the bottom), and as long as you keep the span in tact, it won't eff up the table. At least, it shouldn't, so long as at least one of them (the credit) is still there to anchor that side of the table in place.

[obscurus_phantasma]

Yeah, I want text, just no linkypoos. Thaaank yoouuss, mistojen! I appreciate your time and coding. ♥

[mistojen]

No problem!