Trouble with header picture Twenty Twelve

  • Hello,

    I made a page in Twenty Twelve – I have made some changes in the top – but I can not get the headerpicture to remain in maximum size.

    Width to be 1000px – but somewhere made it on to 200px in width.

    The example can be seen here: https://naesborg.dk/testadmin/ – any idea what I am missing?

    Hoping for help ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Use a tool like Firebug to see the underlying HTML structure of the top section. Compare it to the original theme (check the theme’s demo). There might be a difference that was accidental when you edited the theme.

    Thread Starter Henrik

    (@heinohund)

    I have done that (used the Chrome builtin feature) – but i can’t figure out where the 200 comes from.

    This is my header file:

    <?php
/**
 * The Header template 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>
<link rel="icon" href="https://naesborg.dk/wp-content/uploads/2015/03/Naesborg_icon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="https://naesborg.dk/wp-content/uploads/2015/03/Naesborg_icon.ico" type="image/x-icon" />
<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">

<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
			<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 id="masthead" class="site-header" role="banner">
<img class="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/uploads/logoer/administration_logo_200x100.png" alt="site logo" />
<br>
		<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 if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
		<?php endif; ?>
	</header><!-- #masthead -->

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Is it here:

    width="<?php echo get_custom_header()->width; ?>"

    Thread Starter Henrik

    (@heinohund)

    I see, but where does til 200px size come from. The picture is 100px width

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    When you said “I have made some changes in the top”, what changes did you make?

    Thread Starter Henrik

    (@heinohund)

    Moved the menu to the top right and put in the logo file.

    CSS:

    /*
Theme Name: Naesborg Child 2012
Template: twentytwelve
Author: Henrik Karmark
Author URI: https://karmark.com
Description: Child til Naesborg A/S
Version: 1.0.1425501939
Updated: 2015-03-04 21:45:39
*/

@charset "UTF-8";

/*
Hovedemenu over billeder og fjerne streger
*/

@media screen and (min-width: 600px) {
.site-header {
    padding-top: 0;
}

.main-navigation {
    margin-top: 0;
}
}

.main-navigation div {
 float: right;
}

.main-navigation div.nav-menu > ul {
border: 0;
}

.site-header {
  padding: 0px 0;
}

/*
Fjerner ramme om billeder
*/

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: none !important;
    box-shadow: none !important;
}

/* Increase theme width to 1000px */
@media screen and (min-width: 960px) {
    .site {
        max-width: 1000px;
        max-width: 71.4285rem;
    }
}
.ie .site { max-width: 1000px; }

footer[role="contentinfo"] {
    max-width: 1000px;
    max-width: 71.4285rem;
}

/* Left & Right Sidebars */
@media screen and (min-width: 600px) {
    .custom-layout .site-content {
        width: 50%;
        margin-left: 25%;
    }
    .custom-layout .widget-area {
        position: relative;
        width: 20%;
    }
    .custom-layout #extra-sidebar {
        float: left;
        margin-left: -75%;
        width: 20%;
    }

}

/* IE8 and IE7 - Left and Right Sidebars */
.ie  .custom-layout .site-content {
    width: 50%;
    margin-left: 25%;
}
.ie .custom-layout .widget-area {
    float: right;
    width: 20%;
    position: relative;
}
.ie .custom-layout #extra-sidebar {
    float: left;
    margin-left: -75%;
    width: 20%;
}

/* Border p? tabeller fjernes */

.entry-content td, .comment-content td {
  border-top: 0px solid #ededed;
  padding: 0px 0px 0px 0;
}

/* Side baggrundsfarve */

.site {
	background-color: #ececec;
}

/* Footer */
footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
	clear: both;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	max-width: 1000px;
	max-width: 68.571428571rem;
	margin-top: 24px;
	margin-top: 1.714285714rem;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 0;
	padding: 1.714285714rem 0;
	background-color: #dadada;
}
footer[role="contentinfo"] a {
	color: #686868;
}
footer[role="contentinfo"] a:hover {
	color: #21759b;
}

/* Ingen streger under link i widget */

.widget-area .widget a {
color: #000000;
text-decoration: none;
}
.widget-area .widget a:hover {
color: #000000;
text-decoration: underline;
}
.widget-area .widget a:visited {
	color: #000000;
text-decoration: none;
}

/*
Logo i stedet for tekst
*/

.site-header hgroup { display: none; }
.site-logo { max-width: 100%; height:auto; }
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Trouble with header picture Twenty Twelve’ is closed to new replies.