Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Seite 2 von 4 ErsteErste 1234 LetzteLetzte
Ergebnis 11 bis 20 von 38
Like Tree3Likes

Thema: Flexible Header-Grafik?

  1. #11
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    Ich habe das jetzt mal getestet (mit FireFox 'Inspektor')!
    Was habe ich gemacht?
    1. IMG Tag in
    <header id="masterhead" class="site-header"...>
    <img src="http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/cropped-HP-Neuer-Header3d_1920.jpg" style="width: 100%; margin-bottom: -5px;">
    ...
    </header>

    2. Custom CSS für class="site-header" padding auf 0px gesetzt:
    .site-header {
    padding: 0px !important;
    }

    und so sieht es dann bei mir mit dem FireFox aus:
    280 Pixel breit (Handy)
    lessing-gym_280.jpg

    680 Pixel breit (noch Handy - fast Tablet)
    lessing-gym_680.jpg

    1024 Pixel breit (Standard VGA)
    lessing-gym_1024.jpg

    1600 Pixel breit (Desktop / Laptop) sieht genau so gut aus - kann aber hier leider nur jeweils 3 Bilder hochladen.
    Azrael_0815 and philine like this.

  2. #12
    PostRank: 0
    Registriert seit
    01.04.2017
    Beiträge
    17
    Juhuu, das sieht schonmal super gut aus, Danke! Mir ist nur noch nicht ganz klar, wo ich den img Tag einfügen muss? In der style.css oder der custom-header.php (oder ganz woanders?)

  3. #13
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    header.php ist der richtige Ort... und zwar direkt hinter dem '<header id="masterhead"....> Tag.
    Dann müsstest du noch deine Formatierung mit der Einfügung der Hintergrundgrafik (siehe dein erster Post) entfernen... am besten auskommentieren.
    im php durch:
    /* .. auskommentierter Inhalt.. */
    im html durch
    <!-- .. auskommentierter Inhalt.. -->
    löschen würde ich es nicht, denn das ist eine Rückfallposition, die man vielleicht irgendwann mal wieder braucht.
    Die Formatanweisung mit dem
    .site-header {
    padding: 0px !important;
    }
    gehört dann natürlich in das Custom CSS.

    Du solltest, falls du es nicht noch nicht gemacht hast, dir ein 'Child-Theme' anlegen und die Änderungen dort durchführen, denn sonst kann es dir passieren, dass mit dem nächsten Update deines Themes alles wieder auf Anfang gesetzt wird... das Child-Theme würde aber erhalten bleiben.

  4. #14
    PostRank: 0
    Registriert seit
    01.04.2017
    Beiträge
    17
    Also irgendwie bin ich zu blöd die richtige Stelle zu finden. In meiner header.php gibt es keinen '<header id="masterhead"....> Tag. Auch nicht in der custom-header.php.


    Die einzigen Stellen wo ich überhaupt die id #masthead finde ist in der functions.php:

    if ( has_header_image() ) {
    $custom_css = '#masthead{ background-image: url("' . esc_url( get_header_image() ) . '"); background-repeat: no-repeat; background-position: center center; }';
    wp_add_inline_style( 'education-hub-style', $custom_css );
    }

    Jetzt bin ich ehrlich gesagt wieder komplett verwirrt :-/

  5. #15
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    Leider kenne ich dein Theme überhaupt nicht, da ich mit WP nur lokal und mit den Standardthemes 'rumspiele'! Aber da sieht das so aus... (z.B. header.php für twentyseventeen)
    HTML-Code:
    <?php
    /**
     * The header for our theme
     *
     * This is the template that displays all of the <head> section and everything up until <div id="content">
     *
     * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     *
     * @package WordPress
     * @subpackage Twenty_Seventeen
     * @since 1.0
     * @version 1.0
     */
    
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?> class="no-js no-svg">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="site">
            <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
    
            <header id="masthead" class="site-header" role="banner">
    
                    <?php get_template_part( 'template-parts/header/header', 'image' ); ?>
    
                    <?php if ( has_nav_menu( 'top' ) ) : ?>
                            <div class="navigation-top">
                                    <div class="wrap">
                                            <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
                                    </div><!-- .wrap -->
                            </div><!-- .navigation-top -->
                    <?php endif; ?>
    
            </header><!-- #masthead -->
    
            <?php
    ......
    In deinem Theme muss es auch sowas geben - da wo die <!DOCTPE HTML> Angabe steht, der <head>.. </head> Bereich eingefügt wird - und dann, der interessante Teil, der <body> Tag steht... dahinter muss dann der <header> zu finden sein.

    Aber vielleicht gibt es hier ja auch jemanden, der dein spezielles Theme kennt.

  6. #16
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    Ich habe mal den Herrn 'Google' gefragt und glaube, ich habe die Stelle zum Einfügen des Bildes in den Header gefunden.
    In deinem Themen Ordner gibt es einen Unterordner 'inc' und darin einen Ordner 'hook' und in diesem Ordner eine Datei 'structure.php'!
    Wenn du da so etwa 100 Zeilen runter scrollst, dann findest du folgenden Eintrag:
    HTML-Code:
            function education_hub_header_start() {
            ?><header id="masthead" class="site-header" role="banner"><div class="container"><?php
            }
    Wenn du diese Passage wie folgt ergänzt, dann sollte es klappen:
    HTML-Code:
            function education_hub_header_start() {
            ?><header id="masthead" class="site-header" role="banner">
            <img src="http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/cropped-HP-Neuer-Header3d_1920.jpg" style="width: 100%; border: 0px; margin-bottom: -5px;" alt="Logo Header">
            <div class="container"><?php
            }
    Viel Erfolg... wie gesagt, ich kann es selber nicht testen - aber ich bin zuversichtlich !
    philine likes this.

  7. #17
    PostRank: 0
    Registriert seit
    01.04.2017
    Beiträge
    17
    Yeeeeaaaaaah! Es hat geklappt! Du bist super, tausend Dank

  8. #18
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    103
    Uhhh... da bin ich aber froh! So im Dunkeln herumtappen und es selber nicht testen zu können, ist normalerweise nicht so mein Ding! Aber wenn es jetzt klappt, dann bin ich gerne mal meinen sonstigen 'Gewohnheiten' untreu geworden.

  9. #19
    PostRank: 10 Avatar von SirEctor
    Registriert seit
    28.10.2008
    Beiträge
    9.432
    Du solltest das unbedingt in einem Child-Theme ändern, sonst sind bei einem Theme-Update diese Änderungen wieder weg.
    Das Geheimnis des Könnens liegt im Wollen!

  10. #20
    PostRank: 0
    Registriert seit
    26.07.2017
    Beiträge
    18
    Hallo

    Ich stehe vor dem gleichen Problem wie @philine.
    Ich habe das Theme Chosen und die Wordpress Version 4.8.1 installiert. Jetzt wollte ich den
    Header anpassen, so dass das Hintergrundbild bis zum Seitenrand geht. Leider ohne Erfolg, so
    wie im Screenshot zu sehen ist. HeaderSeiten.jpg

    So sieht die Header.php vom Theme Chosen aus:

    HTML-Code:
    <!DOCTYPE html>
    
    <html <?php language_attributes(); ?>>
    
    <head>
            <?php wp_head(); ?>
    </head>
    
    <body id="<?php print get_stylesheet(); ?>" <?php body_class(); ?>>
            <?php do_action( 'body_top' ); ?>
            <a class="skip-content" href="#main"><?php _e( 'Skip to content', 'chosen' ); ?></a>
            <div id="overflow-container" class="overflow-container">
                    <div id="max-width" class="max-width">
                            <?php do_action( 'before_header' ); ?>
                            <header class="site-header" id="site-header" role="banner">
                                    <div id="menu-primary-container" class="menu-primary-container">
                                            <?php get_template_part( 'menu', 'primary' ); ?>
                                            <?php get_template_part( 'content/search-bar' ); ?>
                                            <?php ct_chosen_social_icons_output(); ?>
                                    </div>
                                    <button id="toggle-navigation" class="toggle-navigation" name="toggle-navigation" aria-expanded="false">
                                            <span class="screen-reader-text"><?php _ex( 'open menu', 'verb: open the menu', 'chosen' ); ?></span>
                                            <?php echo ct_chosen_svg_output( 'toggle-navigation' ); ?>
                                    </button>
                                    <div id="title-container" class="title-container">
                                            <?php get_template_part( 'logo' ) ?>
                                            <?php if ( get_bloginfo( 'description' ) ) {
                                                    echo '<p class="tagline">' . esc_html( get_bloginfo( 'description' ) ) . '</p>';
                                            } ?>
                                    </div>
                            </header>
                            <?php do_action( 'after_header' ); ?>
                            <section id="main" class="main" role="main">
                                    <?php do_action( 'main_top' );
                                    if ( function_exists( 'yoast_breadcrumb' ) ) {
                                            yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
                                    }
    Wenn ich dort den Code
    HTML-Code:
    <img src="wp-content/uploads/2017/08/cloud.jpg" style="width: 100%; margin-bottom: -5px;">
    im <header> </header> Bereich einfüge, wird das Bild oberhalb des Headers eingefügt und danach kommt erst der eigentliche Header.
    Einmal als Screenshot dazu: header1.jpg

    Füge ich das Bild im <head> </head> Bereich ein:
    HTML-Code:
    <!DOCTYPE html>
    
    <html <?php language_attributes(); ?>>
    
    <head>
            <img src="wp-content/uploads/2017/08/cloud.jpg" style="width: 100%; margin-bottom: -5px;">
            <?php wp_head(); ?>
    </head>
    Ist das Bild bis zum Seitenrand, aber der Header befindet sich unterhalb des Bildes. header2.jpg

    Ich habe irgendwie einen Denkfehler. Vielleicht hat jemand einen Tipp für mich

    Gruß Rafael

Seite 2 von 4 ErsteErste 1234 LetzteLetzte

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •