New to css – remove branding div and adjust colophon

  • Resolved Andy

    (@andythreecoaching)


    14 years, 7 months ago

    Hi, just started with both WP and CSS (i’m a designer rather than a developer).

    Here is the front end design ‘look’:

    https://www.threecoaching.com/index___OLD.html

    and here is where i’m currently at:

    https://www.threecoaching.com/

    I’ve started with the ‘twenty ten 0.7’ theme. The default i believe.

    As i’m trying to make the 2nd link look like the 1st, i have many questions but for now could someone help me do the following 2 things:

    1. Need to remove that branding image (the woods) altogether, i have found this in the stylesheet but just cutting the code out doesn’t help:

    /* This is the custom header image */
#branding img {
	clear: both;
	border-top: 4px solid #000;
	display: block;
}

    2. That bottom bit which is supposed to site snugly under the main central collumn. Any idea how to adjust it? it’s currently under #colophon but not sure if it should be just put in a new div altogether?

    Code looks like this:

    #colophon {
background-image:url('https://www.threecoaching.com/images/background-tile_content-end.png');
	background-repeat:no-repeat;
	margin-top: 0px;
	padding: 20px 0;
	overflow: hidden;
}

    Thanks for any help! Not sure if i need to attach the CSS file/s?

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

  • Not sure on your second issue, maybe someone more farmilliar with the theme you’re using can help, but issue #1 can probably be fixed by digging around your theme’s header.php. From your source code, it looks like the forest image is being called right below the “site-description” div.

    Thread Starter Andy

    (@andythreecoaching)

    Yeah, i think you’re right.

    I can see the div in the header, here’s the entire code block:

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty Ten
 * @since 3.0.0
 */
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<title><?php
	// Returns the title based on the type of page being viewed
		if ( is_single() ) {
			single_post_title(); echo ' | '; bloginfo( 'name' );
		} elseif ( is_home() || is_front_page() ) {
			bloginfo( 'name' ); echo ' | '; bloginfo( 'description' ); twentyten_the_page_number();
		} elseif ( is_page() ) {
			single_post_title( '' ); echo ' | '; bloginfo( 'name' );
		} elseif ( is_search() ) {
			printf( __( 'Search results for "%s"', 'twentyten' ), esc_html( $s ) ); twentyten_the_page_number(); echo ' | '; bloginfo( 'name' );
		} elseif ( is_404() ) {
			_e( 'Not Found', 'twentyten' ); echo ' | '; bloginfo( 'name' );
		} else {
			wp_title( '' ); echo ' | '; bloginfo( 'name' ); twentyten_the_page_number();
		}
	?></title>
	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">
			<div id="branding">
				<?php if ( is_home() || is_front_page() ) { ?>
					<h1 id="site-title"><span><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<?php } else { ?>
					<div id="site-title"><span><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></div>
				<?php } ?>

				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

<?php
// Retrieve the dimensions of the current post thumbnail -- no teensy header images for us!
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail');
list($src, $width, $height) = $image;

// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && has_post_thumbnail( $post->ID ) && $width >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else : ?>

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

					<?php endif; ?>
</div><!-- #branding -->

<div id="access">
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">

    I’m not sure how to remove it or if removing it here is the best way. The mixture of css and php is throwing me off.

    Any ideas?

    Cheers

    Well, I’m assuming you want no header image at all up there, right? If that’s the case, then the simplest way to accomplish it would be to just remove this line:

    <mg src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

    Of course, that leaves the PHP code block there, which some might see as messy, but I personally would leave it just in case I wanted to add back the header image at some point.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘New to css – remove branding div and adjust colophon’ is closed to new replies.