Trying to add/change a few elements on my Tumblr layout.

[Carbonic]

Hey everyone, I downloaded a free Tumblr layout, and I'm trying to edit it, and make it more personal for me. (btw, it says in the source I am able to freely edit it.)

You can view my blog here: http://iamjaybot.tumblr.com

I'll add a colored "*" next to the area that i want to modify.

ORANGE * - I want to completely remove that header text, and add my own 470x70 transparent PNG image there, which area of my source should i modify for that?

YELLOW * - I want to change that darker gray backround to perhaps, a black, or darker gray color, and I want to change the light gray to a darker gray color, or something else perhaps.

GREEN * - I would like to add another table underneath the search box, above the "following" table.

here is what I'm talking about, if it isn't to much some help would be greatly appreciated. thank you.

 

[SrWebDeveloper]

ORANGE:

Find:

<div id="header">
<h1><a href="/">Hi there, I am Jaybot.</a></h1>
</div>

Change to:

<div id="header"></div>

Find:

#header {
		margin:auto;
		margin:0px 30px 10px 10px;
		padding:         0 30px 20px 20px;
}

Change to (example, must edit first):

#header {
		margin: ?px;
                background-image: url('/path_to/image.png');
                width: ?px;
                height: ?px;
                border: 0;

}

Notes: Replace ? and path_to with your actual values of course. This inserts whatever PNG you want in whatever path you wish and sets margin if you need whitespace around it. I could not supply these values for you because I don't know what image nor its precise size which affects the margin and other settings.


YELLOW:

Find:

body {
	color:            #222;
	margin:           10px 20px -20px 20px;
	background: #dddfdb; 
	font-family:      'Lucida Grande', Helvetica, sans-serif;
}

#container {
	margin:auto;
	background-color:#f8fafb;
	width:900px;  
	min-height:700px;
}

/* ROunded Corners */

.box { 
  background: #F8FAFB; 
}

For the "darker grey color" change "background: #dddfdb;" to "background-color: black" or whatever hex value you want for other colors.
For the "light grey" color Change both instances of "background: #F8FAFB;" to "background-color: #xxxxxx" using whatever hex value you want for a darker color.

GREEN:

Bit of confusion here, you actually don't use tables, you use DIV's to create those boxes, so if you mean insert another similar looking box at that position do this:

Find:

<div class="mirza">
   <strong>Following:</strong>

Insert BEFORE:

<div class="mirza">Your content here</div>

Note: Obviously replace "Your content here" with your actual content.





That should do it.

Couple of observations:

1) Might be wise to create a separate style sheet, name is "default.css", move all content between the <style> tags in your head section there, remove the <style> tags and insert the following in your head section instead:

<link rel="stylesheet" type="text/css" href="default.css" />

2) If you're not sure about margin, colors and why I changed "background" to "background-image" please learn more about CSS in this tutorial.

3) It is up to you to select colors, I advise sticking to the "50% lighter/darker" suggestion if you need a contrasting color that must be darker/lighter and not sure what color to use.

-jim

ps: I hope this helps, if not, please ask and I'll try again!

 

[Carbonic]

Thanks! I got it all to work, just one last thing, on my header how can I make it align to where I have it in this example?