Messing with/resizing headers

  • Resolved zotmaster

    (@zotmaster)


    16 years, 11 months ago

    Hi everyone. I’m still pretty new at this and my PHP knowledge is pretty much non-existent, so I’d like to see if anyone can help me.

    I’m using the inferno-mf 1.2 theme for my site (http://www.houseofzot.com) and I enjoy it a lot, but I don’t like the plain text header. I’ve downloaded a Dynamic Header plugin and I’ve sort of managed to figure out how to make it work to put my images in the header in lieu of plain text.

    However, I’m having two problems: first, I don’t know what exactly are the dimensions of the main text box in the theme. I would like to create images that are that same width, but I don’t know how to figure out exactly what that width is. Second, I’d like to use images that are larger than the small rectangular space that is the current header. Is it possible to tinker with the code to make, say, the vertical allowance of that header larger, so I can put a larger image in it?

    Here is the header code for the theme, it if helps:

    <!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<style type="text/css" media="screen">

<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) &amp;&amp; !is_single() ) {
?>
<?php /*?>	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }<?php */?>
<?php } else { // No sidebar ?>
<?php /*?>	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }<?php */?>
<?php } ?>

</style>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>
</head>
<body>
<div id="page">

<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

    Any help would be greatly appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi

    (@esmi)

    16 years, 11 months ago

    A link to your site would be more helpful…

    Thread Starter zotmaster

    (@zotmaster)

    16 years, 11 months ago

    I did post my site in that post, I just forgot to make it a hyperlink. Sorry.

    http://www.houseofzot.com

    esmi

    (@esmi)

    16 years, 11 months ago

    I completely missed the url. My apologies.

    The main header area is 780px wide and doesn’t currently have a defined width. I estimate that you could use a 100px high image without impacting on the overall page if you also made a few CSS changes. You’d need to edit style.css (line 324) and change:

    #headerimg {
margin:10px 0 40px;
width:780px;
}

    to

    #headerimg {
width:805px;
height:100px;
margin:0 0 0 15px;
}

    If you want to use a larger image, it will take a fair bit more editing.

    Thread Starter zotmaster

    (@zotmaster)

    16 years, 11 months ago

    I would like to use a larger image: the ones I am presently tinkering with are 200 pixels high.

    I’m assuming that would affect the overall page as you said it would require a fair bit more editing.

    Thread Starter zotmaster

    (@zotmaster)

    16 years, 11 months ago

    I was tinkering with the style.css code. I tried changing the height dimensions in your listed code but it didn’t affect anything. The only other place I saw header code:

    /*	Begin Headers */
#header {

	margin: 0px;
	padding: 0;

	}

    I added a height dimension here but that affects the height of the main body, where my posts are. I want to increase the allowable height of the header, where my “House of Zot” logo is, so I can instead change it to an image (or a set of images).

    Again, my knowledge in this area is sorely lacking, but at least in my style.css, I don’t know what other code I would add to change the dimensions of that header.

    esmi

    (@esmi)

    16 years, 11 months ago

    If you want to use a 200px high image, the theme will need a fair bit of editing.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Messing with/resizing headers’ is closed to new replies.