Trying to mimic my Tumblr blog layout to my new Wordpress layout.

[Carbonic]

Hey everyone, I just started a new Wordpress blog. I used to use the Tumblr blog service, because the layout was nice and simple.

Tumblr: http://propanenightmare.tumblr.com
WP: http://myalternativemind.net

Basically, here is a picture of what I am trying to do.

http://img.skitch.com/20080623-dwix5sftpeqytq69netgxdf31k.jpg

I want to do a header on my WP blog, EXACTLY like the one on my Tumblr blog.
If I can even copy it exactly how it is, that would be great too.

I just don't know how though, someone else sent me the HTML code after I posted a question on how to do it, so I'm not really sure how to do it. The only thing I was able to do, was change the background.

And yes, I want to keep the Sidebar. So anyone that can help, that would be great!

 

[dtyson]

So all you want to do is stick the top image of your old blog (with all the text - "um hello... i'm just a boy... onesickstory") on the top of your new one? And you also want the links (Start Myspace Flickr)? Shouldn't be too difficult.

All you need to do is to stick the image after line 18 in the header.php file of the theme you're using (/wp-content/themes/blackletterhead/header.php) using a simple image tag: <img src="whatever_you_call_the_image"> (using the proper path, of course).

Then you'll need three separate images for the buttons, which you'll do the same thing for just after the line of code that you previously put into the header.php. Image tags for all three but this time you'll make the images links: <a href=""><img src=""></a> for all three.

Hope that puts you on the right track.

Oh, one more thing: no disrespect but you may want to think about changing the words "designed by" at the bottom of the new blog to "modified by" (or something along those lines). It's just poor form to do otherwise.

At least leave the original footer content in your code and comment it out if you can't have it. You, as an artist, wouldn't want somebody else taking your work and claiming it as their own, either in part or entirely without some form of credit, aye?

 

[Carbonic]

So all you want to do is stick the top image of your old blog (with all the text - "um hello... i'm just a boy... onesickstory") on the top of your new one? And you also want the links (Start Myspace Flickr)? Shouldn't be too difficult.

All you need to do is to stick the image after line 18 in the header.php file of the theme you're using (/wp-content/themes/blackletterhead/header.php) using a simple image tag: <img src="whatever_you_call_the_image"> (using the proper path, of course).

Then you'll need three separate images for the buttons, which you'll do the same thing for just after the line of code that you previously put into the header.php. Image tags for all three but this time you'll make the images links: <a href=""><img src=""></a> for all three.

Hope that puts you on the right track.

Oh, one more thing: no disrespect but you may want to think about changing the words "designed by" at the bottom of the new blog to "modified by" (or something along those lines). It's just poor form to do otherwise.

At least leave the original footer content in your code and comment it out if you can't have it. You, as an artist, wouldn't want somebody else taking your work and claiming it as their own, either in part or entirely without some form of credit, aye?

Okay, well I tried your method, and it kind of worked, but it didn't center the image up top, know how I can do that? I'll try again, take a SS of it, and post it here.

 

[Carbonic]

Here is what I did using your information.

here is the basic layout i'm trying to achieve.

I hope this helps, and thanks to anyone that can be of assistance!

 

[dtyson]

You can center that image by putting a paragraph tag around it (although it's not the preferred method for doing so - but for someone who isn't quite sure how to deal with this sort of thing in stylesheets, it's fine). You can also achieve the desired result for the picture with the text next to it with a table (again, not exactly current practice but it gets the job done, which I'm assuming is your only real need here).

Just copy and paste this code where you put the other:

<p align="center" style="margin-top: 10; margin-bottom: 10;"><img src="path/file.ext"></p>
<table align="center" width="466" border="0">
	<tr>
		<td align="center"><img src="path/file.ext"></td>
		<td>I'm just a boy. I am; an apple geek, graphic-designer, lost addict, britney spears fanatic, music and movie lover, blogger, pinkberry addict, sarcastic, and almost too blunt. I am 20 years old, and living in my crazed reality in California. I'm definitely atypical. Call me what you like, but most call me Jay. Oh, and for the record, my blog looks best in Apple's Safari browser.</td>
	</tr>
</table>

I set the width in the table to be the same width as your top image - that can be changed easily.

Your other buttons may be problematic where you have them because that area is not constant in Wordpress. If you click on a single post, you'll see that the layout changes a bit. You lose the sidebar and the columnar layout of the main page. Once you decide where else you might put them, let us know.

Good luck.

 

[Carbonic]

Thanks a bunch for your help, okay so I added the code you got, and here is the end result.

(i'll explain the markings after the pic)

GREEN- How would I move that up towards the top more? It just looks funky that it's super low.

BLUE- I would like to move that up as well, under the header picture though. And perhaps make the font bigger? Like the one size on my Tumblr blog? http://propanenightmare.tumblr.com

WHITE- If I am unable to add them under the dashed line, can I add those buttons ABOVE the dashed line?

RED- how would I add the userpic over there as well? exactly like the one on my tumblr blog?

thanks for your help, i will gladly donate some $ to you if you can help me do the finishing touches to my blog.

 

[dtyson]

GREEN: The reason that the header is so low is because you need to put it in the header DIV. Go to line 33 of your code and stick the stuff I gave you the other day after it. By the way, for this to work, you may need to make the header a little more than 200px high. Stick this code in right after the words "div id="header" (in line 33): "style="height: 260px;"" (minus the outside quotes). Change the height (260px) to suit your needs.

<div id="header" style="height: 260px;" onclick="location.href='http://myalternativemind.net';" style="cursor:pointer;">
********PUT YESTERDAY'S CODE HERE********
</div>

BLUE: If you want to make the font bigger in the text just add another [*gasp*] inline style to that paragraph (replace what you have with this and change 14px to whatever you want):

<td><p style="margin-top: 0; margin-bottom: 0; font-size: 14px;">I'm just a boy. I am; an apple geek, graphic-designer, lost addict, britney spears fanatic, music and movie lover, blogger, pinkberry addict, sarcastic, and almost too blunt. I am 20 years old, and living in my crazed reality in California. I'm definitely atypical. Call me what you like, but most call me Jay. Oh, and for the record, my blog looks best in Apple's Safari browser.</p></td>

WHITE: Yes. You can put the buttons in the head section as well to keep them constant on every page. Right after your first table, which ends at line 40, paste this other one:

<table>
	<tr>
		<td><a href=""><img src="path/file.ext"></a></td>
		<td><a href=""><img src="path/file.ext"></a></td>
		<td><a href=""><img src="path/file.ext"></a></td>
		<td><a href=""><img src="path/file.ext"></a></td>
	</tr>
</table>

Don't forget to change the image source to include the path to your button images as well as to add the links to other pages between the quotes after "a href". Same as the issue with the RED.

RED: You need to fill in the path information for your user picture. You'll need to do it in line 37, after you paste the code in the proper place. Change <img src="path/file.ext"> to reflect where your picture is.

No need for $. These aren't the most elegant solutions but they get the job you need done - done.

Good luck.

 

[Carbonic]

Awesome progress, I feel like it's coming along. Thanks for the help so far.

Here is what it looks like so far:

Just a few more things and I feel like it'll be perfected..


Theirs a ton of extra black space that I'd like to get rid of eventually, but I have a few more questions before I can do that.

I've highlighted the areas again that I need assistance on..

YELLOW: When I first took the SS I realized that I didn't add the URL for the image, but when I did this is the outcome that I got.

http://img.skitch.com/20080629-xk5wyxmsmmk1ubrqurjdnfpqch.jpg

ORANGE: How would I add the text underneath the header without having too much space underneath, and above it?

GREEN: Anyway to make it start where the dashed lines begin, or to center them?

EDIT/ I added my code incase you want to take a look and see if I am doing anything wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header" onclick="location.href='http://myalternativemind.net';" style="cursor:pointer;">
</div>











<div id="header" style="height: 260px;" onclick="location.href='http://myalternativemind.net';" style="cursor:pointer;">
<p align="center" style="margin-top: 10; margin-bottom: 10;"><img src="path/file.ext"></p>
<table align="center" width="466" border="0">
	<tr>
		<td align="center"><img src="http://i25.tinypic.com/34ywhu9.jpg"></td>
		<td><p style="margin-top: 0; margin-bottom: 0; font-size: 14px;">I'm just a boy. I am; an apple geek, graphic-designer, lost addict, britney spears fanatic, music and movie lover, blogger, pinkberry addict, sarcastic, and almost too blunt. I am 20 years old, and living in my crazed reality in California. I'm definitely atypical. Call me what you like, but most call me Jay. Oh, and for the record, my blog looks best in Apple's Safari browser.</p></td>
	</tr>
</table>
</div>

<table>
	<tr>
		<td><a href=""><img src="http://i31.tinypic.com/j9rdwp.jpg"></a></td>
		<td><a href=""><img src="http://i30.tinypic.com/21an0jb.jpg"></a></td>
		<td><a href=""><img src="path/file.ext"></a></td>
		<td><a href=""><img src="http://i28.tinypic.com/2dhe147.jpg"></a></td>
	</tr>
</table>

 

[dtyson]

You're still not putting the code where it needs to go in order to avoid a good bit of that black space. You've also put the wrong picture in the table cell to the left of the "about" text, which caused that text to get smashed and to scroll way down.

In the previous post I said to look for line 33 (or thereabouts) where you have a piece of code that looks like this:

<div id="header" style="height: 260px;" onclick="location.href='http://myalternativemind.net';" style="cursor:pointer;">
</div>

When you see the code above (around line 33) cut it out (along with any other code you've put in there after it). Then...

Copy this code:

<div id="header" style="height: 240px;" onclick="location.href='http://myalternativemind.net';" style="cursor:pointer;">
<p align="center" style="margin-top: 10; margin-bottom: 10;"><img src="http://i25.tinypic.com/34ywhu9.jpg"></p>
<table align="center" width="466" border="0">
	<tr>
		<td align="center" valign="top"><img src="http://i25.tinypic.com/2ege4yg.png"></td>
		<td><p style="margin-top: 0; margin-bottom: 0; font-size: 14px;">I'm just a boy. I am; an apple geek, graphic-designer, lost addict, britney spears fanatic, music and movie lover, blogger, pinkberry addict, sarcastic, and almost too blunt. I am 20 years old, and living in my crazed reality in California. I'm definitely atypical. Call me what you like, but most call me Jay. Oh, and for the record, my blog looks best in Apple's Safari browser.</p></td>
	</tr>
</table>
<table align="center" style="margin-top: 10px;">
	<tr>
		<td><a href=""><img src="http://i31.tinypic.com/j9rdwp.jpg"></a></td>
		<td><a href=""><img src="http://i30.tinypic.com/21an0jb.jpg"></a></td>
		<td><a href=""><img src="http://i28.tinypic.com/2dhe147.jpg"></a></td>
	</tr>
</table>
</div>

Paste it in where you've cut the other out.

Now all you should have to do is insert the URL's for the navigation at the bottom of the header (where you see the empty a href=""'s).

No offense but are you making any effort at all to look at the code that you're pasting? There are lots of conclusions to be drawn from it. Example: your green question - if you know that the buttons you're putting in for navigation are being placed into a table and at the same time you know that there is a centered table in the piece of code just above it, would it not stand to reason that you could try applying the same attribute (align="center") to the second table? This way, you learn something as well as get what you're looking for.

 

[Carbonic]

You're still not putting the code where it needs to go in order to avoid a good bit of that black space. You've also put the wrong picture in the table cell to the left of the "about" text, which caused that text to get smashed and to scroll way down.

In the previous post I said to look for line 33 (or thereabouts) where you have a piece of code that looks like this:

<div id="header" style="height: 260px;" onclick="location.href='http://myalternativemind.net';" style="cursor:pointer;">
</div>

When you see the code above (around line 33) cut it out (along with any other code you've put in there after it). Then...

Copy this code:

<div id="header" style="height: 240px;" onclick="location.href='http://myalternativemind.net';" style="cursor:pointer;">
<p align="center" style="margin-top: 10; margin-bottom: 10;"><img src="http://i25.tinypic.com/34ywhu9.jpg"></p>
<table align="center" width="466" border="0">
	<tr>
		<td align="center" valign="top"><img src="http://i25.tinypic.com/2ege4yg.png"></td>
		<td><p style="margin-top: 0; margin-bottom: 0; font-size: 14px;">I'm just a boy. I am; an apple geek, graphic-designer, lost addict, britney spears fanatic, music and movie lover, blogger, pinkberry addict, sarcastic, and almost too blunt. I am 20 years old, and living in my crazed reality in California. I'm definitely atypical. Call me what you like, but most call me Jay. Oh, and for the record, my blog looks best in Apple's Safari browser.</p></td>
	</tr>
</table>
<table align="center" style="margin-top: 10px;">
	<tr>
		<td><a href=""><img src="http://i31.tinypic.com/j9rdwp.jpg"></a></td>
		<td><a href=""><img src="http://i30.tinypic.com/21an0jb.jpg"></a></td>
		<td><a href=""><img src="http://i28.tinypic.com/2dhe147.jpg"></a></td>
	</tr>
</table>
</div>

Paste it in where you've cut the other out.

Now all you should have to do is insert the URL's for the navigation at the bottom of the header (where you see the empty a href=""'s).

No offense but are you making any effort at all to look at the code that you're pasting? There are lots of conclusions to be drawn from it. Example: your green question - if you know that the buttons you're putting in for navigation are being placed into a table and at the same time you know that there is a centered table in the piece of code just above it, would it not stand to reason that you could try applying the same attribute (align="center") to the second table? This way, you learn something as well as get what you're looking for.

I tried looking for line 33, but It doesn't tell me what line I am on. so I downloaded an html editor, opened up header.php in it, and before i added any code, it was only 18 lines. so I pressed enter a few times to get to line 33, i dont know if thats what you're suppose to do, but i'm completely clueless in this.

 

[Carbonic]

Got it to work, thanks!
When you said look for line 33, and to cutout that other code, my HTML editor said it was on line 18, so I'm assuming why I got that wrong.

 

[dtyson]

Yes. I was working from the source of your page and not the header.php itself. So there were other lines of code in what I was working with and I didn't consider that the line numbers I had would be off from what you had. That's my fault. You didn't need to enter down to line 33. Just adding the code at the bottom of the header.php would suffice.

Glad you figured it out, though.