prospitian: (4)
Courtney ([personal profile] prospitian) wrote in [community profile] photosynthesis2015-01-10 02:16 pm

Navigation: That's Beautiful To Me

A navigation table made with game advertisements in mind, but of course, you can use this for anything.

This has two separate codes depending on whether you want to use it in a journal entry, or in a comment. Please read the instructions carefully and let me know if you're having any trouble at all!

Preview Art Credit

For Journal Entries

Here's everything you need to replace. Make sure to remove the {[brackets]} too!

[BANNER HEIGHT] The height, in pixels, of your banner.
[BANNER URL] The URL to your banner image. If it's longer than 500px wide, it'll cut off.
[TITLE COLOR] The color of your title.
[SHADOW COLOR] The color of your title's shadow. It might take some messing around with this and the title color to make it legible.
{TITLE} The color of your title.
[LINK BACKGROUND] The background color for the links.
[LINK TEXT] The color of the link text.
{URL} Shows up ten times. These are the URLs your links will lead to.
{LINK} Shows up ten times. The text of the links.
[BLURB BACKGROUND] The background color for the blurb.
[BLURB TEXT] The text color for the blurb.
{BLURB} The text of the blurb itself.
[TITLE COLOR] The color of your title.
#000000 The color of my credit link. I have it set to a value so it doesn't get forgotten, but as long as you don't remove it or hide it, it's fine if you change the color to match your customization better!

Fonts used are Impact for the title, Calibri for the blurb, and Georgia for the links if you want to change any of them.

For Comments

If you want to use it in a comment, things get a little more complicated, because Dreamwidth isn't nearly as generous when it comes to CSS usage. So here's what you gotta do.

Skip to step 3 if you aren't going to use the built-in title code.

1. Use the first code. Start to post an entry with it. Mess with the colors and stuff until the title looks the way you want. You don't have to touch anything except for the title codes and text.

2. Screencap the preview/post. Crop the image with the title on it down to exactly what you want the dimensions to be.

3. You're done with that code and that post. Here's the code you're going to use for your comment:

Other than [BANNER HEIGHT], all of the things that need to be replaced in the journal entry code are the same here.

4. Upload the screencap from step 2 to imgur or something. Put that URL in the [BANNER URL] space.

5. Open Photoshop, Paint Shop Pro, or any other program that supports image transparency. Make a new image. It should be one pixel wide, and 4 pixels shorter than your image's height. So if your image is 300 pixels high, you want to make a 1x296 transparent image. Incidentally, you can use this one.
If you don't have the means to make a transparent image on your own, lemme know and I'll do it for you.

6. Upload that transparent image to imgur or whatever. Put that URL in the [FILLER URL] space.

7. Do all the rest of your replacements and stuff as normal. Bam, done!

For Profiles

1. Get your tissues ready, because everything about editing Dreamwidth profiles sucks and you're gonna cry.

2. Okay, well, probably not, since I did all the heavy lifting here, but you should still sob a little on my behalf and maybe pour one out for me.

3. Use this code.

You get to replace everything in the chart above from LINK BACKGROUND down, excluding the title color and including [BANNER HEIGHT].

4. If you want to use the title in the journal entries code, follow steps 1 & 2 under "For Comments."

5. Save, and go take a look at your profile. You'll notice that your background doesn't look right! It's starting to repeat in the corners, as shown here. Dreamwidth automatically adds some padding, but not consistently, so we're going to measure the excess.

6. Take a screencap of your preview. There are a lot of ways to figure out the extra pixels, but I'm gonna show you how to do it in MS Paint because it's pretty universal. Zoom in reeeeeal close. Make a little mark at where the corner of your banner is supposed to be, like I did here in red. Now hit CTRL+G, and you should have a grid like this! Zoom in as close as you can get, and count all those extra boxes. Yeah, really.

7. In that particular example, we've got 12 extra pixels of width, and 4 of height. The width isn't going to matter if your banner is 500 pixels wide still, because I've already gotten that fixed in the code for you. Subtract the extra height from your banner image's actual height. 300 - 4 = 296 in this particular example. That's going to be the number you use for [BANNER HEIGHT].

If you don't want to mess with any of that and would just like to use the same colors and stuff I have in the previews, here are the codes:

Journal Entries Comments Profiles

The image URLs used are for the banner in both codes, and for the filler in the comment code. In the journal entry code, the height is 300px.

This should all be much less complicated than it sounds once it all comes together! If you need any help at all, please don't hesitate to let me know!

Post a comment in response:

Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
Account name:
If you don't have an account you can create one now.
HTML doesn't work in the subject.


Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.