Blogging Forum Discuss WordPress template help... in the vBulletinSetup Information forums; Brandon (or anybody else who is capable of assisting), would you mind helping me figure out one little thing on my blog? Here's the blog: http://www.nick.eagleconnections.net/ Basically, I'm wanting to ...

[Nick R]

Brandon (or anybody else who is capable of assisting), would you mind helping me figure out one little thing on my blog?

Here's the blog: http://www.nick.eagleconnections.net/
Basically, I'm wanting to reduce the height of the main grey bar. It's much bigger than the content inside of it (blog title and description) and it really irks me. lol

I'm assuming this can be figured out by simply looking at the page source and the stylesheet? If not, let me know if you need anything else.

Thanks in advance!

[Cerberus]

There is a couple places to look for that, its either in the css file, I believe its called style.css or whatever, or the header.php

<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
<div id="header">

<div id="pagenav">
<ul>
<li class="current_page_item"><a href="http://www.nick.eagleconnections.net">Home</a></li>
<li class="page_item page-item-2"><a href="http://www.nick.eagleconnections.net/about" title="About">About</a></li>
</ul>

</div>

<div id="searchform">
<form method="get" action="http://www.nick.eagleconnections.net/">
<fieldset>
<label>Blog Search</label>
<input value="" name="s" id="searchinput" type="text">
<input value="Search" id="searchbutton" type="submit">
</fieldset>

</form>
</div>

<div id="logo">
<h1><a href="http://www.nick.eagleconnections.net/" title="Nick’s Blog">Nick’s Blog</a></h1>
<div class="description">My ramblings about whatever comes my way. Websites, vBulletin, Forum Management, Photography, Animals and more.</div>
</div>

<!-- ^^^^^^^^^^^^^^ please modify ^^^^^^^^^^^^^^ -->

<!--<div id="about">
<p>My ramblings about whatever comes my way. Websites, vBulletin, Forum Management, Photography and more.</p>
</div>-->
<!-- ^^^^^^^^^^^^^^ please modify ^^^^^^^^^^^^^^ -->
</div>
<div class="clear"></div>
<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->

Yeah you need to look for the css definitions for logo. Thats the class that is defining that I made it bold and red so you could see...I hope that helps

[Nick R]

See, that's what I thought. But the thing is that adjusting the logo class doesn't fix it. It simply adjusts where on the grey block the text is located.
Here is the class:

#logo {
	float: left;
	display: inline;
	margin-top: 25px;
	margin-left: 20px;
	margin-right: 200px;
	padding-left: 40px;
	background: url(images/logo.png) no-repeat;	
	background-position: left 5px;
}

For example, increasing the margin-top value adds more space between the top of the text and the top of the grey block - but in no way modifies the size of the grey block itself.

Usually I can figure stuff like this out, but I'm quite baffled on this one.

[Rocket 442]

That Grey Box is actually the body background image here:
http://www.nick.eagleconnections.net.../images/bg.gif

Its a 1x173px image, that repeats over the x-axis. So you'd have to just go in, make that image smaller, save it and overwrite it.

Then you'll want to change the header and logo css elements to make sure to keep it within the new grey box height.

Hope that helps.

[Cerberus]

Oh I see why, its just a repeated image

http://www.nick.eagleconnections.net.../images/bg.gif

You need to change this here.

background: url(images/logo.png) no-repeat;
background-position: left 5px;
}

Umm..my css is rusty on changing the image height...

height:35px;

I am pretty sure by just adding height and defining it to fit your needs it should do the job

LMAO I was too slow...Or you can do what Rocket said

[Nick R]

Perfect!!! Thank you both. Cerebrus, I'd rep+ you but I have to spread it around first. :p

[Cerberus]

No problem man. It looks better without the extra space

[Nick R]

Yup; that's exactly why I wanted to fix it

What do you think about the blog in general? The design, the whole concept/idea, etc.?

[Rocket 442]

I don't think its a bad theme. Good start and nice and clean.

I do see one error,
On your sidebar, you have two closing "-->" to end a comment in your design.
Delete that extra one and it'll be fixed.

[Nick R]

Thanks, Andy.

For some reason, IE is giving me trouble with comment tags...
If I use <!-- commented text -->, the closing part will display in the browser (like you just saw). So I tried using <comment>commented text</comment> which is a tag that I believe only IE recognizes, because in Firefox, the commented text displayed - but in IE, it did its job.
So in order to hide the text from both browsers, I had to use this combination: <comment><!-- commented text --></comment>

Any idea why this is happening?