2012 merge header with backround

  • I am trying to make a seamless join between my header and a background (repeat right to left) of a similar pixel depth.

    I cant seem to remove the page margin which seems to affect this. I wont bore you with all that I have tried.

    Child theme activated.

    https://www.moonglass.net/piggies

    Thanks – steve

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

  • First you need to get your child theme set up correctly – the style.css file should contain ONLY changes – and those go after this:

    /*
Theme Name:     Twenty Twelve Child
Theme URI:      https://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     https://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

@import url("../twentytwelve/style.css");

    Thread Starter moonglass

    (@moonglass)

    Thanks for your interest

    Child theme activated and working correctly is what I meant to say. All alterations to css so far in child theme.

    steve

    Ah okay, sorry, I was confused by some of the copied stuff from the parent theme – but I see it’s not a copy – great!

    I think you’re going to need to modify the the header.php file to do this well – because of the way the padding is set in the CSS, changing it will mess up the rest of the page…

    Can you post your header.php file? Be sure to use the code buttons to post code here.

    Thread Starter moonglass

    (@moonglass)

    OK. . . Here is the header file. I have probably modified this – although I cant remember how – as I started working on this site a while ago.

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

   		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

	</header><!-- #masthead -->

	<div id="main" class="wrapper">

    Okay, so try moving this section:

    <hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

    Above this line:

    <div id="page" class="hfeed site">

    Then we’ll need to add/modify some CSS to make it all look good…

    Thread Starter moonglass

    (@moonglass)

    OK Thanks – have done that and made progress – although it has undone a few things that I had sorted out. Here is the style sheet from the child theme. Any code tagged with MEMODS explains what I have modified to get this far. Hope this makes sense.

    /*
Theme Name: Twenty Twelve Child2
Theme URI: https://www.ads-software.com/extend/themes/twentytwelve
Author: stee
Author URI: https://www.ads-software.com/
Description: Child theme for twentytwelve
Version: 1.1
Template: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url("../twentytwelve/style.css");
/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading

https://snook.ca/archives/html_and_css/font-size-with-rem
https://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

/* =Reset
-------------------------------------------------------------- */

/* MEMODS RADIUS HEADER IMAGE AND SHADOW ETC */

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
	/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like  */
	border-radius: 0px;
		box-shadow: none;

/*	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); */
}

/*MEMODS REMOVE PAGE TITLE (BELOW NAV) */
.entry-header {
    display: none;
}

.site-header h1.site-title a {
    display: none;
}

.site-header h1,
.site-header h2 {
	text-align: center;
	/* MEMODS REMOVE HEADER TITLE AND MOVES UP HEADER */
		display: none;
}

	/* MEMODS SPECIFIES PAGE BACKGROUND */
/* Page structure */
.site {
	background-color: #FFF;
}

	/* MEMODS MOVES UP HEADER IMAGE */

.header-image {
	margin-top: 0px;
	margin-top: 0rem;
}

body .site {
		margin-top:0px;
		margin-top: 0rem;
	}

/*MEMODS MODS TO SITE DESCRIPTION  */
h2.site-description {
color: #0085cf !important;
font-size: 17px!important;
text-align: center;

}

/* MEMODS ADD IMAGE TO FOOTER/REMOVE BORDER  */
footer[role="contentinfo"]

 {
    border-top: 0px;
	/* lowers footer image  */
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	/* width of image  */
	max-width: 940px;
	background: url("images/foot_image.jpg");
	height: 78px;
	background-repeat:no-repeat;
}

/* MEMODS REMOVE PAGE LOWER BORDER REMOVES SPACE AT BOTTOM OF PAGE */

.site-content article {
	border-bottom: 0px double;
	margin-bottom: 0px;
	padding-bottom: 0px;

}

/* MEMODS REMOVE UNDERLINING */
a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* SPECIFY NAVIGATION COLOUR */

.main-navigation li a:hover {
color: #4d83fd;
}

.main-navigation li a {
color: #769ffd;
} 

/* MEMODS NAVIGATION BELOW HEADER ETC
CANT USE POSITION ABSOLUTE - GOES WRONG ON SMALL SCREENS
.site-header {
	padding-bottom: 70px;
}
.main-navigation {
	position: absolute;
	top: 350px;
}
*/

/* MEMODS NAVIGATION HORIZ LINES ETC */
.main-navigation {
	border-bottom: 3px solid #0085cf;
	border-top: 3px solid #0085cf;
}

/* MEMODS NAVIGATION TO CENTER ETC */

.main-navigation ul.nav-menu {
	border: none;
	margin: 0 auto;
	width: auto;
}

/* Header */
.site-header {
	padding: 0px 0;
	padding: 0rem 0;

}
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘2012 merge header with backround’ is closed to new replies.