Header manuell an Seitengröße anpassen.

  • Gelöst rafael1

    (@rafael1)


    vor 7 Jahren, 4 Monaten

    Hallo 🙂

    Wordpress Version:

    • 4.8.1

    Installiertes Theme:

    • Chosen

    Ich habe das Theme Chosen installiert und würde gerne den Header manuell anpassen. D.h. ich möchte gerne das Hintergrundbild für den Header responsive bis zum Seitenrand der Seite haben. Im Screenshot ist dies mit den roten Pfeilen gekennzeichnet.

    https://www.dropbox.com/s/gvqw65q293besno/HeaderSeiten.png?dl=0

    In der Header.php bzw. Style.css habe ich das versucht anzupassen, jedoch ohne Erfolg. Zwar konnte ich das Hintergrundbild im Header Bereich verkleinern, nach unten in die Länge ziehen oder vom oberen Seitenrand verschieben, aber nicht über den anscheinend festgelegten Seitenabstand hinaus vergrößern.

    Hat jemand evtl. die gleiche Erfahrung gemacht und einen Tipp für mich, wie ich das Hintergrundbild an den Seitenrand anpassen kann?

    Vielen Dank.

    Viele Grüße
    Rafael

    • Dieses Thema wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
    • Dieses Thema wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
Ansicht von 15 Antworten – 1 bis 15 (von insgesamt 15)
  • lukasbieri

    (@lukasbieri)

    vor 7 Jahren, 4 Monaten

    Hallo Rafael

    Ein Link zu deiner Seite würde weiterhelfen. Vermutlich lässt sich das Problem mit etwas CSS-Trickserei lösen – ansonsten müsstest du die Theme-Files bearbeiten, was aufwändiger werden könnte. So oder so: Ohne Link kann man dir nur schwer helfen!

    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    Hallo Lukas,

    mit dem Link wird es schwierig, da es momentan noch auf einem Testserver läuft.
    Würde es evtl. helfen die Header.php oder Style.css Dateien bzw. den Code zu posten?

    Moderator Torsten Landsiedel

    (@zodiac1978)

    vor 7 Jahren, 4 Monaten

    Dein Theme nutzt ein DIV mit der Klasse „max-width“, um die Site nicht größer als 1400 Pixel werden zu lassen. Der Header ist in diesem DIV, kann also nicht breiter werden. Zudem hat der darüber liegende DIV „overflow-container“ noch ein Padding, was in jedem Fall für einen Abstand an den Rändern sorgt.

    Du könntest den Header aus dem Container lösen und selber für die Abstände sorgen oder mit einem absolut positionierten DIV das Hintergrundbild an die richtige Stelle schummeln, um das zu erreichen, was du beschreibst … vielleicht gibt es auch noch andere Wege.

    @lukasbieri Das Theme findest du hier https://de.wordpress.org/themes/chosen/ – da ist auch ein Link zum Hersteller inkl. Demo, wo man sich das Problem anschauen kann.

    Gruß, Torsten

    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    Danke für die Antwort, genau das war das Problem.
    Ich habe es in der style.css geändert.
    So sah es vorher aus:

    
.max-width {
  max-width: 1400px;
  margin: 0 auto;
}

.overflow-container {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 100%;
  padding: 0 4.167%;
}

    Und so habe ich es abgeändert und passt soweit wie gewünscht: 

    
.max-width {
  max-width: 100%;
  margin: 0 auto;
}
.overflow-container {
  position: absolute;
  overflow: hidden;
  height: auto;
  min-height: 100%;
  padding: 0 0%;
}
    • Diese Antwort wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
    Moderator Torsten Landsiedel

    (@zodiac1978)

    vor 7 Jahren, 4 Monaten

    Ich würde dann aber ein paar Elementen noch einen Innenabstand geben, damit das nicht so an der Seite klebt und auf meinem 27″-Monitor werden die Bilder dann ganz schön groß wenn du alles über die Gesamtbreite laufen lässt …

    Gruß, Torsten

    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    Welche Elemente meinst du genau?
    Also im .max-width Abschnitt beispielsweise das so einfügen padding: 10px 10px 10px 80px;
    oder verstehe ich dich da jetzt falsch?

    Moderator Torsten Landsiedel

    (@zodiac1978)

    vor 7 Jahren, 4 Monaten

    Ja, an diesem Selektor müsste es auch klappen. Probiere es doch mal aus. 🙂

    Geht vor allem um die Abstände nach links und rechts, also der 2. und 4. Wert, die sollten auch besser gleich sein.

    Gruß, Torsten

    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    Moin,

    @zodiac1978 Danke, das hat soweit geklappt 🙂

    Leider habe ich jetzt folgende Problematik:

    Anstatt ein Bild in dem Header zu verwenden, soll jetzt ein Video im Hintergrund des Headers laufen.
    Ich habe es so wie in dem nachfolgendem Code ausprobiert:

    header.php:

    
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
 
<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 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">
 
                                <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
                                    <source src="wp-content/uploads/cloud/cloud.webm" type="video/webm"> 
                                   <source src="wp-content/uploads/cloud/cloud.mp4" type="video/mp4"> 
                                   <source src="wp-content/uploads/cloud/cloud.ogv" type="video/ogg ogv">
                                </video>
                                <div id="video_pattern"></div>
 
                                <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-navigati$
                                        <span class="screen-reader-text"><?php _ex( 'open menu', 'verb: open t$
                                        <?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( 'descript$
                                        } ?>
                                </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>' );
                                }

    style.css:

    
#video_background {
        position: absolute;
        top: 0px;
        right: 0px;
        min-width: 100%;
        min-height: 30% ;
        width: auto;
        height: 30%;
        z-index: -1000;
        overflow: hidden;
}
#video_pattern {
        background-image: url(wp-content/uploads/2017/08/CloudHell.png);
        position: absolute;
        opacity: 0.5;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: -1;
}

    Leider verläuft das Video nicht bis zum linken und rechten Seitenrand, wie im Bild zu sehen:
    Wenn ich das weiter anpasse, ist das Video länger als der Header:
    Hat jemand evtl. einen Tipp für mich? 😉

    Gruß Rafael

    • Diese Antwort wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
    • Diese Antwort wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
    • Diese Antwort wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    Ganz vergessen einzubinden: Bild1 https://www.dropbox.com/s/njm1hvjgzbimj0v/header1.png?dl=0

    Bild 2:https://www.dropbox.com/s/sxmig15ckccflu6/header2.png?dl=0

    Moderator Torsten Landsiedel

    (@zodiac1978)

    vor 7 Jahren, 4 Monaten

    Ohne Zugang zur Site kann ich dir da leider nicht helfen. Tut mir Leid. Der Aufwand das Nachzubauen, nur um zu helfen übersteigt das, was ich unbezahlt/freiwillig in einem Forum helfen kann …

    Gruß, Torsten

    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    Kein Problem, kann dich da verstehen 😉 Danke trotzdem.
    Evtl. lade ich das die Tage auf einen Live-Server, so dass darauf
    von extern ein Zugriff besteht.

    Gruß Rafael

    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    @zodiac1978 hättest du evtl. Zeit und Lust dir meine geschilderte Problematik evtl. anzuschauen, wenn ich dir den Link bzw. die Zugangsdaten dazu gebe?

    Gruß Rafael

    • Diese Antwort wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    Habe den Fehler soweit gefunden, habe die folgenden Punkte geändert:

    
#video_background {
    height: auto;
}
.site-header {
    overflow: hidden;
}
.overflow-container {
  position: relative;
}

    Dadurch ist das Video jetzt auf die ganze breite ausgelegt.

    Gruß Rafael

    • Diese Antwort wurde geändert vor 7 Jahren, 4 Monaten von rafael1.
    Moderator Torsten Landsiedel

    (@zodiac1978)

    vor 7 Jahren, 4 Monaten

    @rafael1 Leider nein. Ich helfe hier im Forum, weil das vielen helfen kann, die hier Lösungen suchen. Für einzelne Lösungen kann man Dienstleister buchen, davon leben sie. Ich bitte um Verständnis für diese Community-Sichtweise.

    Gruß, Torsten

    Thread-Starter rafael1

    (@rafael1)

    vor 7 Jahren, 4 Monaten

    @zodiac1978 Kein Problem, verstehe ich vollkommen.
    Habe über den Aspekt nicht nachgedacht und hätte ja
    auch den Link hier einfach posten können.

    Gruß Rafael

Ansicht von 15 Antworten – 1 bis 15 (von insgesamt 15)
  • Das Thema „Header manuell an Seitengröße anpassen.“ ist für neue Antworten geschlossen.