Bild in Header anpassen und verlinken etc...

PRH

Hallo,

würde gerne den Header in ein Bild (jpeg) ersetzen, hier der normale Header meines Blogs: ntropy.de

Habe dazu diesen Code in den Header eingefügt:

PHP

background: url(http://ntropy.de/wp-content/upl…200564915.jpg);
width: 450px;
height: 120px;
display:block;
position: relative;
z-index: 10;
top:100;
margin-top:-100px

PHP

Allerdings weiß ich nicht, wie ich das Ding anpassen kann, denn wenn ich es eingestellt habe sieht man noch den Original-Header und alles überlagert sich...

Außerdem würde ich dann gerne, wenn das Jpeg ordentlich sitzt (oben links, da wo jetzt das normale Logo ist) dieses Bild verlinken mit der Startseite...

Danke schonmal

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

-=Marc=-

Moin,

wenn ich Dich richtig verstehe, hast Du den angegebenen Code direkt in die header.php eingefügt? Das wäre dann der falsche Ort, die Anweisungen gehören in die style.css.
Du kannst aber etwas anders vorgehen. Schnapp Dir die header.php. Folgender Schnippsel gibt den Header aus:

PHP

<div id="header">
        <a href="<?php bloginfo('url'); ?>/" id="sitename"><!--fifty fifth ﬆreet--><?php bloginfo('name'); ?></a>
        
        <ul id="nav"><?php wp_list_pages('title_li=&depth=1'); ?></ul>
        
        <?php get_search_form(); ?>
    </div>

Der Schriftzug wird hier erzeugt (Ausschnitt aus dem Code oben):

PHP

<?php bloginfo('name'); ?>

der Rest der Zeile (davor und dahinter. Diesen Ausdruck kannst Du direkt durch die Grafik (ntropy-gerader-Schnitt-abgerundet-e1283200564915.jpg ... ich würde doch am Dateinamen noch etwas feilen... ;) ) ersetzen, inklusive Pfadangabe versteht sich. Ich mach das hier mal mit dem direkten Pfad:

PHP

<div id="header">
        <a href="<?php bloginfo('url'); ?>/"  id="sitename"><!--fifty fifth ﬆreet--><img src="http://ntropy.de/wp-content/uploads/2010/08/ntropy-gerader-Schnitt-abgerundet-e1283200564915.jpg"></a>
        
        <ul id="nav"><?php wp_list_pages('title_li=&depth=1'); ?></ul>
        
        <?php get_search_form(); ?>
    </div>

Damit wird die Verlinkung des Headers erhalten, wer auf die Grafik klickt landet auf der Startseite. Wie Du aber dem angehängten Screenshot unschwer entnehmen kannst, ist danach eine Anpassung der Werte in der CSS-Datei notwendig. Wenn Du die Höhe (height)

Code

#header {
border-bottom:1px solid #E6E6E6;
height:120px;
margin-bottom:20px;
}

auf 120px setzt, dann passt es wieder. Als nächstes solltest Du Dir dann mal die Breite der Navigation vornehmen, der letzte Link wird in die nächste Zeile umgebrochen. Setzt Du die Breite (width) zum Beispiel auf 460px, dann sieht es gleich ganz anders aus

Code

#nav {
float:left;
font-size:1.6em;
line-height:0.5px;
padding-top:20px;
width:460px;
}

Siehe screenshot2.jpg. So, das macht 20 Euro.... :mrgreen:

Einen schönen Tag
Marc

PRH

Super, es hat alles geklappt, auch wenn ich die Größen natürlich noch anpassen musste etc...Vielen Dank!

Ansonsten: Der Dateiname ist so komplex, weil ich das Bild noch skalieren musste und sich dann beim Speichern einfach ein nervig-langer Name einstellt:wink:

-=Marc=-

Jetzt hast Du natürlich noch einen arg großen Abstand zwischen "content" und "sidebar" nicht wahr? Aber das kriegst Du hin. ;)

makeaheader

headerbild auf startseite verlinken

Ich versuche schon seit einiger Zeit meinen header (bild) auf die startsiete zu verlinken und es klappt nicht. Was soll ich machen?
hier ist mein headertext

<?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 Twenty Ten 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;

wp_title( '|', true, 'right' );

// Add the blog name.
bloginfo( 'name' );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";

// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );

/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> 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>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID );
elseif ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
</div>

<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<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 /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div>
</div>
</div>

Ich hoffe jemand kann mir helfen =)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bild in Header anpassen und verlinken etc...

Jetzt mitmachen!