Neuling braucht kurzen Rat - header Text wrapping verdeckt header image

    Hallo,

    ich bin der Tom aus München.

    Ich bin dabei mir einen kleinen Blog zu bauen, und nun habe ich ein Problem mit dem header. Das Title wrapping überlagert mein header photo, außerdem finde ich es viel zu fett. Ich würde gerne auf den Balken verzichten, habe auch schon viel Zeit in die Suche gesteckt, aber ich komme nicht drauf. Ich arbeite mit Wordpress 4.9.8 mit lokalem Server und habe das Theme "radiant".


    Ich sage schon mal vielen Dank für Eure Hilfe.

    Gruß,

    Tom

    Wenn du uns einen Link zur Seite posten würdest, könnten wir dir vielleicht helfen, mit einem Screenshot alleine können wir nichts anfangen.

    Mit einer lokalen WordPress Installation ist das mit dem Link zur Seite nicht so einfach... aber es gibt zu dem WP-Theme eine Demo im Netz:
    https://demo.themegrill.com/radiate/
    craftsmen22
    Leider kann ich mit deiner Problembeschreibung nicht wirklich was anfangen... du willst den 'Balken(?)', also deine Navigation weg haben oder weniger 'fett' machen? Wie soll das dann aussehen?
    Zu der Überlagerung von Bild und Menüleiste könntest du versuchen dem <div...> mit dem Bild ein margin-top zu geben so dass das Bild um die Höhe des Menübalkens weiter nach unten rutscht!
    zB.

    HTML
    #parallax-bg {
   margin-top: 60px;
}


    Die 60px musst du natürlich noch an die tatsächliche Höhe deines Balkens anpassen.
    Und das Ganze bitte in das 'zusätzliche CSS' im Customizer eintragen - wenn du nicht weißt, wie das geht dann hier mal ein kleines Video(Tutorial)
    https://www.youtube.com/watch?v=KJpZT5IkOpc

    if(!sleep)

    {$sheep++;}

    Vielen Dank für den Link zum Theme. Ich habe mal ein Foto gemacht, vielleicht wird es nun klarer. Der Skyscraper ist zu einem kleinen Teil vom transparenten Balken verdeckt. Was müsste ich nun machen, damit das ganze Bild sichtbar ist, und wie bekomme ich den Balken schmäler, ich finde das schaut nicht so toll aus, wenn der Balken so fett ist.

    Ich hoffe man kann es erkennen, die Spitze ist im transparenten Streifen. Mein Ziel den Streifen nach oben schieben, oder das Bild absenken.

    7 Mal editiert, zuletzt von craftsmen22 (21. September 2018 um 22:55) aus folgendem Grund: falsche Datei

    Sailor: vielen Dank für die Nachfrage, ich habe versucht mit dem von dir verlinkten youtube video weiter zu kommen, aber wegen dem Trennen von Balken und Bild hatte ich dann meine Probleme.

    basti1012: eine gute Idee, mein css hier zu posten, hier ist das gute stück:

    <?php
    /**
    * The Header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id="content">
    *
    * @package ThemeGrill
    * @subpackage Radiate
    * @since Radiate 1.0
    */
    ?><!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">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>
    <div id="parallax-bg">
    <?php if ( get_header_image() && function_exists( 'the_custom_header_markup' ) && is_front_page() && has_header_video() ) :
    the_custom_header_markup();
    endif; ?>
    </div>
    <div id="page" class="hfeed site">

    <?php do_action( 'before' ); ?>
    <header id="masthead" class="site-header" role="banner">
    <div class="header-wrap clearfix">
    <div class="site-branding">
    <?php if ( is_front_page() || is_home() ) : ?>
    <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>
    <?php else : ?>
    <h3 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></h3>
    <?php endif; ?>
    <?php
    $description = get_bloginfo( 'description', 'display' );
    if ( $description || is_customize_preview() ) : ?>
    <p class="site-description"><?php echo $description; ?></p>
    <?php endif;?>
    </div>

    <?php if ( get_theme_mod( 'radiate_header_search_hide', 0 ) == 0 ) { ?>
    <div class="header-search-icon"></div>
    <?php get_search_form();
    } ?>

    <nav id="site-navigation" class="main-navigation" role="navigation">
    <h4 class="menu-toggle"></h4>
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'radiate' ); ?></a>

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu-primary-container' ) ); ?>
    </nav><!-- #site-navigation -->
    </div><!-- .inner-wrap header-wrap -->
    </header><!-- #masthead -->

    <div id="content" class="site-content">
    <div class="inner-wrap">

    Zitat von craftsmen22

    eine gute Idee, mein css hier zu posten, hier ist das gute stück:


    Das ist nicht die CSS-Datei von deinem Theme, sondern die header.php! Wenn man den Unterschied schon nicht kennt ...:roll:

    Nach dem posten habe ich es schon gemerkt, wollte es dann gleich ändern, aber die style.css war dann zu groß, und den Text als Link zum abrufen herzurichten, dafür hatte ich dann keine Zeit. Ich hätt's halt nicht am Morgen um sechs Uhr machen sollen, so war ich noch zu verschlafen. Aber wie kann ich nun die style.css einstellen, wenn die ein wenig mehr als 1400 Wörter hat. Soll ich was weglassen, oder soll ich es auf zwei posts aufteilen?

    Der Hinweis von Sailor hilft dir weiter!

    Das ist der entsprechende Inline-CSS-Code

    Code
    #parallax-bg {
    background-image: url('https://demo.themegrill.com/radiate/wp-content/themes/radiate/images/header/header-image-one.jpg');
    background-repeat: repeat-x;
    background-position: center top;
    background-attachment: scroll;
}

    Im Backend von Wordpress kannst du unter Design/Customizer bei "Zusätzliches CSS" dann eintragen:

    CSS
    #parallax-bg {
    background-position: center 60px !important;
}


    Mit den 60px musst du etwas rumspielen, bis es passt

    Das wird nichts nützen.... ich denke nicht, dass sich jemand die Mühe machen wird für dich ein > 1400 Wörter style.css durchzuackern!
    Ist ja aber auch nicht nötig, befasse dich etwas mit den Grundlagen (PHP, HTML, CSS) und beschäftige dich etwas mit den DevTools (Entwicklerwerkzeuge, die jeder Browser von Haus aus eingebaut hat), dann wirst du sehr schnell solche Probleme selber lösen können!
    Zumal ich dir die Antwort in Beitrag #3 schon gegeben habe! 2 Zeilen CSS Code in das 'zusätzliche CSS' im Customizer (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) ... und dein Problem wäre behoben.
    Und in dem ebenfalls in #3 angehängtem Tutorial-Video wird dir auch visuell gezeigt, wie man solche Änderungen im 'zusätzlichen CSS' durchführen kann.
    Jetzt versuche es erst mal auf diesem Weg und wenn es da Probleme gibt, dann liefere mehr Informationen als...

    Zitat

    ...ich habe versucht mit dem von dir verlinkten youtube video weiter zu kommen, aber wegen dem Trennen von Balken und Bild hatte ich dann meine Probleme.


    sonst ist es mit helfen sehr schwierig... hellsehen können wir alle nicht!

    - - - Aktualisiert - - -

    @Bandit ... Danke... wenigstens einer versteht mich :-D!

    if(!sleep)

    {$sheep++;}