Support » CSS / opmaak vragen » Drie foto's als banner, onder titel

  • Opgelost stywax

    (@stywax)


    http://parsival.be/parsivalnew/

    onder de titel, wil ik als een soort van banner drie foto’s plaatsen.
    Dit enkel op de startpagina.

    Ik ontwikkelde hiervoor de onderstaande code.

    Nu heb ik twee vragen omtrent dit idee.
    Zal deze code werken?
    Waar moet ik deze code juist plaatsen? In welk php bestand en waar juist in dit php bestand?

    <div class="header_fotos">
    
    <a href="http://parsival.be/parsivalnew/mosselen/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/Banner_Mosselen_2015.jpg"/></a>
    
    <a href="http://parsival.be/parsivalnew/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/logoparsival_transparant.gif"/></a>
    
    <a href="http://blog.parsival.be/?view=magazine"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/10/cropped-banner_bouw-e1445366212953.jpg"/></a>
    
    </div>
    
    .header_fotos{
        text-align: justify;
    }
    
    .header_fotos img {
        display: inline-block;
        width: 100px;
        height: 100px;
    }
    
    .header_fotos:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Even heel snel enkele hints. Kan zijn dat je er nog wat aan toe moet voegen maar even uit mijn hoofd:

    Onderstaand in de header.php op de correcte plaats

    <?php
    if ( is_home() ) { ?>
       <div class="header_fotos">
    
    <a href="http://parsival.be/parsivalnew/mosselen/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/Banner_Mosselen_2015.jpg"/></a>
    
    <a href="http://parsival.be/parsivalnew/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/logoparsival_transparant.gif"/></a>
    
    <a href="http://blog.parsival.be/?view=magazine"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/10/cropped-banner_bouw-e1445366212953.jpg"/></a>
    
    </div>
    <?php } else { } ?>

    Voeg dan toe aan de css

    .header_fotos img {

    float: left;
    }

    Hoi

    Alvast bedankt.

    Echter krijg ik steeds een server fout als ik uw code plak in header.php

    Ik vermoed doordat ik de juiste locatie, waar de code in header.php, moet komen niet terug vindt…

    Hoe is het mogelijk om deze locatie terug te vinden?

    Zou er iemand me kunnen vertellen waar ik bovenstaande code van (wpbeveiligen) juist moet posten in de header.php?

    Heb al op enkele plaatsen geprobeerd maar krijg steeds een serverfout nadien…

    Indien je de code weer verwijdert doet de site het weer ?

    Haal de lege else statment eens weg.

    <?php
    if ( is_home() ) { ?>
       <div class="header_fotos">
    
    <a href="http://parsival.be/parsivalnew/mosselen/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/Banner_Mosselen_2015.jpg"/></a>
    
    <a href="http://parsival.be/parsivalnew/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/logoparsival_transparant.gif"/></a>
    
    <a href="http://blog.parsival.be/?view=magazine"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/10/cropped-banner_bouw-e1445366212953.jpg"/></a>
    
    </div>
    <?php } ?>

    Doet ie het dan wel ?

    Yup als ik hem verwijdert werkt de site perfect.

    onderstaande is de code van de header.php.
    Waar moet ik bovenstaande code (jullie suggestie) juist plaatsen?

    <?php
    if ( !defined( 'ABSPATH' ) ) {
        exit;
    }
    
    global $template, $raindrops_current_theme_slug;
    $raindrops_link_unique_text = raindrops_link_unique_text();
    do_action( 'raindrops_pre_part_' . basename( __FILE__, '.php' ) );
    do_action( 'raindrops_pre_part_' . basename( __FILE__, '.php' ) . '_' . basename( $template ) );
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
        <head>
            <meta http-equiv="content-type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
    <?php wp_head(); ?>
        </head>
        <body id="<?php echo $raindrops_current_theme_slug; ?>" <?php body_class();?>>
    		<?php if ( raindrops_warehouse( 'raindrops_disable_keyboard_focus' ) == 'enable' ) { ?>
            <div class="skip-link"><a href="#container">"><?php esc_html_e( 'Skip to content', 'raindrops' ); ?></a></div><?php echo raindrops_skip_links(); ?>
    		<?php } // raindrops_disable_keyboard_focus ?>
    
            <div id="<?php echo esc_attr( raindrops_warehouse( 'raindrops_page_width' ) ); ?>" class="<?php echo esc_attr( 'yui-' . raindrops_warehouse( 'raindrops_col_width' ) ); ?> hfeed">
    		<?php raindrops_prepend_doc(); ?><header id="top">
    			<div id="hd" <?php raindrops_doctype_elements( '', 'role="banner"' ); ?>>
    
    <a href="http://parsival.be/parsivalnew/"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/logoparsival_transparant.gif"/></a>
    
    				<?php
    				if( raindrops_is_place_of_site_title() == true ) {
    
    					echo raindrops_site_title();
    				}
    				 echo raindrops_site_description();
    				?>   
    
    			</div>
                <?php 
    
    				/**
                     * Custom Header
    
                     */
    
    				 $raindrops_title_in_the_header_check = raindrops_warehouse_clone( 'raindrops_place_of_site_title' );
    
    				if ( true == $raindrops_link_unique_text || $raindrops_title_in_the_header_check == 'header_image' ) { ?>
    
    			<?php  echo raindrops_header_image( 'elements' );
    				} else { ?>
    
    			<?php  echo raindrops_header_image( 'home_url');
                    }
    
                    raindrops_nav_menu_primary();
    
    				/**
                     * horizontal menubar
                     */
    			?>
    			<?php  raindrops_after_nav_menu();?>
    
    		</header>
    		<div id="bd" class="clearfix">
    
    		<?php do_action( 'raindrops_after_part_' . basename( __FILE__, '.php' ) . '_' . basename( $template ) ); ?>

    Indien je dit alleen op homepage wil moet je niet in header.php wezen maar op je front page., dit kan home.php, page.php of index.php zijn (je moet ff uitzoeken welk bestand je front page is)

    Dan plaats je de code bovenaan in de file

    Wil je het wel in de header dan kan je proberen :

    <?php
    if ( !defined( 'ABSPATH' ) ) {
        exit;
    }
    
    global $template, $raindrops_current_theme_slug;
    $raindrops_link_unique_text = raindrops_link_unique_text();
    do_action( 'raindrops_pre_part_' . basename( __FILE__, '.php' ) );
    do_action( 'raindrops_pre_part_' . basename( __FILE__, '.php' ) . '_' . basename( $template ) );
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
        <head>
            <meta http-equiv="content-type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
    <?php wp_head(); ?>
        </head>
        <body id="<?php echo $raindrops_current_theme_slug; ?>" <?php body_class();?>>
    		<?php if ( raindrops_warehouse( 'raindrops_disable_keyboard_focus' ) == 'enable' ) { ?>
            <div class="skip-link"><a href="#container">"><?php esc_html_e( 'Skip to content', 'raindrops' ); ?></a></div><?php echo raindrops_skip_links(); ?>
    		<?php } // raindrops_disable_keyboard_focus ?>
    
            <div id="<?php echo esc_attr( raindrops_warehouse( 'raindrops_page_width' ) ); ?>" class="<?php echo esc_attr( 'yui-' . raindrops_warehouse( 'raindrops_col_width' ) ); ?> hfeed">
    		<?php raindrops_prepend_doc(); ?><header id="top">
    			<div id="hd" <?php raindrops_doctype_elements( '', 'role="banner"' ); ?>>
    
    <a href="http://parsival.be/parsivalnew/"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/logoparsival_transparant.gif"/></a>
    
    				<?php
    				if( raindrops_is_place_of_site_title() == true ) {
    
    					echo raindrops_site_title();
    				}
    				 echo raindrops_site_description();
    				?>   
    
    			</div>
                <?php 
    
    				/**
                     * Custom Header
    
                     */
    
    				 $raindrops_title_in_the_header_check = raindrops_warehouse_clone( 'raindrops_place_of_site_title' );
    
    				if ( true == $raindrops_link_unique_text || $raindrops_title_in_the_header_check == 'header_image' ) { ?>
    
    			<?php  echo raindrops_header_image( 'elements' );
    				} else { ?>
    
    			<?php  echo raindrops_header_image( 'home_url');
                    }
    
                    raindrops_nav_menu_primary();
    
    				/**
                     * horizontal menubar
                     */
    			?>
    			<?php  raindrops_after_nav_menu();?>
    
    		</header>
    		<div id="bd" class="clearfix">
    <?php
    if ( is_home() ) { ?>
       <div class="header_fotos">
    
    <a href="http://parsival.be/parsivalnew/mosselen/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/Banner_Mosselen_2015.jpg"/></a>
    
    <a href="http://parsival.be/parsivalnew/"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/11/logoparsival_transparant.gif"/></a>
    
    <a href="http://blog.parsival.be/?view=magazine"target="_blank"><img src="http://parsival.be/parsivalnew/wp-content/uploads/2015/10/cropped-banner_bouw-e1445366212953.jpg"/></a>
    
    </div>
    <?php } ?>
    
    		<?php do_action( 'raindrops_after_part_' . basename( __FILE__, '.php' ) . '_' . basename( $template ) ); ?>

    Kan zijn dat je de code op meerdere plekken moet proberen voor het gewenste effect

    Perfect!

    Hartelijk bedankt!

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Het onderwerp ‘Drie foto's als banner, onder titel’ is gesloten voor nieuwe reacties.