Support » CSS / opmaak vragen » Twee logo's in header header plaatsen twenty twelve

  • Hallo,

    Ik gebruik voor mijn website http://www.texelferienhaus.com/ het twenty twelve theme en heb een Child thema aangemaakt.

    Graag zou ik in mijn site-header h1 element tweede logo’s willen plaatsen. Een aan de linkerkant van het element en een aan de rechter kant van het element zodat de header er als volt uitziet:

    <Logo1><Texel Ferienhaus> <Logo2>

    Logo 1 en Header tekst staan aan de linkerzijde tegen elkaar aan. Logo 2 moet 50px ten opzichte van de rechterzijde blijven.

    Daarnaast wil ik dat Logo2 verdwijnt wanneer het menu ook verandert in een knop bij kleinere schermen (bijvoorbeeld op iphone).

    Ik hoop dat ik het duidelijk genoeg heb omschreven en dat iemand mij hiermee kan helpen.

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
    1. kopieer het bestand ‘header.php’ van het originele theme, naar de map van het childtheme
    2. pas de ‘header.php’ van het childtheme aan, zoals geïllustreerd in het onderstaande fragment.
    3. [...] <![endif]-->
      <?php wp_head(); ?>
      </head>
      
      <body <?php body_class(); ?>>
      <div id="page" class="hfeed site">
      	<header id="masthead" class="site-header" role="banner">
      		<hgroup>
      			<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>
      			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging variabele afbeelding -->
      <img src='<?php echo get_post_meta($post->ID, 'logo2', true); ?>' />
      <!-- EINDE toevoeging variabele afbeelding -->

      </hgroup>

      <nav id=”site-navigation” class=”main-navigation” role=”navigation”>[…]`

      <li>Dus: Plaats code in header.php, zoals hierboven geïllustreerd.</li>
      <li>browser:edit-pagina veschijnt een extra veld-optie</li>
      <li>voeg veld toe: <em>logo2</em></li>
      <li>waarde: pad naar de logo2-afbeeldingafbeelding [Zorg dat het pad KLOPT!]</li>
      </li>
      <li>Op deze manier wordt het tweede logo geplaatst. Dit is variabel instelbaar voor elke pagina / bericht afzonderlijk.</li>

      Natuurlijk kan je ook een statische toevoeging maken:

      [...] <![endif]-->
      <?php wp_head(); ?>
      </head>
      
      <body <?php body_class(); ?>>
      <div id="page" class="hfeed site">
      	<header id="masthead" class="site-header" role="banner">
      		<hgroup>
      			<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>
      			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging statische afbeelding --><div id= "logo2">
      <img src="logo2" alt="tweede logo" height="42" width="42">
      </div><!-- EINDE toevoeging logo2 afbeelding -->

      </hgroup>

      <nav id=”site-navigation” class=”main-navigation” role=”navigation”>[…]`

      De positie van div ‘logo2’ is nu te verfijnen dmv CSS

      bijv:

      #logo2{margin-top: -10px;
              float:right;
      }

    1. kopieer het bestand ‘header.php’ van het originele theme, naar de map van het childtheme
    2. pas de ‘header.php’ van het childtheme aan, zoals geïllustreerd in het onderstaande fragment.
    3. [...] <![endif]-->
      <?php wp_head(); ?>
      </head>
      
      <body <?php body_class(); ?>>
      <div id="page" class="hfeed site">
      	<header id="masthead" class="site-header" role="banner">
      		<hgroup>
      			<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>
      			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging variabele afbeelding -->
      <img src='<?php echo get_post_meta($post->ID, 'logo2', true); ?>' />
      <!-- EINDE toevoeging variabele afbeelding -->

      </hgroup>

      <nav id=”site-navigation” class=”main-navigation” role=”navigation”>[…]`
      </li>
      <li>Dus: Plaats code in header.php, zoals hierboven geïllustreerd.</li>
      <li>browser:edit-pagina veschijnt een extra veld-optie</li>
      <li>voeg veld toe: <em>logo2</em></li>
      <li>waarde: pad naar de logo2-afbeeldingafbeelding [Zorg dat het pad KLOPT!]</li>
      </li>
      <li>Op deze manier wordt het tweede logo geplaatst. Dit is variabel instelbaar voor elke pagina / bericht afzonderlijk.</li>
      </ol>
      Natuurlijk kan je ook een statische toevoeging maken:

      [...] <![endif]-->
      <?php wp_head(); ?>
      </head>
      
      <body <?php body_class(); ?>>
      <div id="page" class="hfeed site">
      	<header id="masthead" class="site-header" role="banner">
      		<hgroup>
      			<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>
      			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging statische afbeelding --><div id= "logo2">
      <img src="logo2" alt="tweede logo" height="42" width="42">
      </div><!-- EINDE toevoeging logo2 afbeelding -->

      </hgroup>

      <nav id=”site-navigation” class=”main-navigation” role=”navigation”>[…]`

      De positie van div ‘logo2’ is nu te verfijnen dmv CSS

      bijv:

      #logo2{margin-top: -10px;
              float:right;
      }

    1. kopieer het bestand ‘header.php’ van het originele theme, naar de map van het childtheme
    2. pas de ‘header.php’ van het childtheme aan, zoals geïllustreerd in het onderstaande fragment.
    3. [...] <![endif]-->
      <?php wp_head(); ?>
      </head>
      
      <body <?php body_class(); ?>>
      <div id="page" class="hfeed site">
      	<header id="masthead" class="site-header" role="banner">
      		<hgroup>
      			<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>
      			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging variabele afbeelding -->
      <img src='<?php echo get_post_meta($post->ID, 'logo2', true); ?>' />
      <!-- EINDE toevoeging variabele afbeelding -->
      		</hgroup>
      
      		<nav id="site-navigation" class="main-navigation" role="navigation">[...]
    4. Dus: Plaats code in header.php, zoals hierboven geïllustreerd.
    5. browser:edit-pagina veschijnt een extra veld-optie
    6. voeg veld toe: logo2
    7. waarde: pad naar de logo2-afbeeldingafbeelding [Zorg dat het pad KLOPT!]
    8. Op deze manier wordt het tweede logo geplaatst. Dit is variabel instelbaar voor elke pagina / bericht afzonderlijk.

    Natuurlijk kan je ook een statische toevoeging maken:

    [...] <![endif]-->
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<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>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging statische afbeelding --><div id= "logo2">
    <img src="logo2" alt="tweede logo" height="42" width="42">
    </div><!-- EINDE toevoeging logo2 afbeelding -->

    </hgroup>

    <nav id=”site-navigation” class=”main-navigation” role=”navigation”>[…]`

    De positie van div ‘logo2’ is nu te verfijnen dmv CSS

    bijv:

    #logo2{margin-top: -10px;
            float:right;
    }
    1. kopieer het bestand ‘header.php’ van het originele theme, naar de map van het childtheme
    2. pas de ‘header.php’ van het childtheme aan, zoals geïllustreerd in het onderstaande fragment.
    3. [...] <![endif]-->
      <?php wp_head(); ?>
      </head>
      
      <body <?php body_class(); ?>>
      <div id="page" class="hfeed site">
      	<header id="masthead" class="site-header" role="banner">
      		<hgroup>
      			<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>
      			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging variabele afbeelding -->
      <img src='<?php echo get_post_meta($post->ID, 'logo2', true); ?>' />
      <!-- EINDE toevoeging variabele afbeelding -->
      		</hgroup>
      
      		<nav id="site-navigation" class="main-navigation" role="navigation">[...]
    4. Dus: Plaats code in header.php, zoals hierboven geïllustreerd.
    5. browser:edit-pagina veschijnt een extra veld-optie
    6. voeg veld toe: logo2
    7. waarde: pad naar de logo2-afbeeldingafbeelding [Zorg dat het pad KLOPT!]
    8. Op deze manier wordt het tweede logo geplaatst. Dit is variabel instelbaar voor elke pagina / bericht afzonderlijk.

    Natuurlijk kan je ook een statische toevoeging maken:

    [...] <![endif]-->
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<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>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2><!-- toevoeging statische afbeelding --><div id= "logo2">
    <img src="logo2" alt="tweede logo" height="42" width="42">
    </div><!-- EINDE toevoeging logo2 afbeelding -->
    		</hgroup>
    
    		<nav id="site-navigation" class="main-navigation" role="navigation">[...]

    De positie van div ‘logo2’ is nu te verfijnen dmv CSS

    bijv:

    #logo2{margin-top: -10px;
            float:right;
    }

    Hallo WP Ginfo,

    Bedankt voor je reactie alleen is het nog niet helemaal wat ik zoek denk ik.

    Het logo dat ik wil plaatsen is een rode pijl. Deze moet naar beneden wijzen richting de widgets. Hoe krijg ik het voorelkaar om de rode pijl altijd boven de widgets blijft staan wanneer ik het scherm verklein (daarmee simuleer ik kleidere schermen). Met andere woorden de pijl moet 70 px van de rechterzijde blijven staan bij kleindere schermen

    Ik zag dat er voor background image de volgende css beschikbaar is die dit doet:

    background-image: url(dog.png);
    background-position: calc(100% – 50px);

    Zoiets zoek ik ook om het logo op zijn plaats te houden.

    Daarnaast wil ik dat als het navigatie menu in een knop verandert (bij de kleinste schermformaten) De rode pijl verdwijnt.

    Hoop dat je me hiermee nog kunt helpen

    ?? Heb je al geprobeerd de afbeelding van de pijl IN de sidebar met widgets te plaatsen. Op die manier weet je zeker dat – bij verkleinen – de pijl samen met de widgets getoond wordt.

    De meest reguliere oplossing – zoals gezegd – is het spelen met de CSS-opmaak.
    Het gebruik van %percentages of em als relatieve maten is dan vaak meer succesvol.

    Natuurlijk is dit alles het meest makkelijk bij het gebruik van een theme dat ‘van zichzelf’ al netjes ‘toont’op de diverse schermformaten.
    Bijv een responsive theme scheelt dan een heeeeeeeeeeleboel.

    Vallen zaken weg op de achtergrond?
    Verander dan de z-index van het element.
    bijv:

    #logo2{margin-top:-3em;
            float:right;
            z-index:99999999;
    }

    Hoe je de pijl laat verdwijnen / verandert in een bepaald geval, is wat boven mijn pet. Wellicht iets voor de EXPERTS? Het enige dat ik kan verzinnen [niet uitgeprobeerd] is hem NET buiten het kleinste beeldformaat op een vaste plek te fixeren. Zo zie je hem wel in een groot scherm, niet op een klein scherm. Ook dat kan met CSS.

    Bijv:

    #logo2{ position:fixed;
             top: 40px;
             left:380px;
    }

    Welke waarden je precies dient te gebruiken is een kwestie van veel proberen, tot je tevreden bent.

    Hoi,

    De rode pijl moet je in je css als achtergrondimage koppelen aan je widget-element. Met positionering (negatieve top-waarde, (bv. top: -50px;) krijg je hem boven de widgetruimte.

    Wil je bij een bepaalde schermbreedte de pijl weghebben, dan moet je een mediaquerie gebruiken. Laten we aannemen dat je widgetruimte het id ‘widget’ heeft en dat je de pijl weg wilt hebben zodra het scherm minder breed wordt dan 680px. Je code kan er dan als volgt eruit zien:

    #widget {
    background-image: url(dog.png);
    position: relative;
    top: -..px;
    left (of right): ..px;
    }
    
    @media screen and (max-width:680px){
    	#widget{
    		margin-top:0
    	}

    Succes!
    Lianne

    Oh sorry, het tweede gedeelte van de code had ik nog niet correct.

    `#widget {
    background-image: url(dog.png);
    position: relative;
    top: -..px;
    left (of right): ..px;
    }

    @media screen and (max-width:680px){
    #widget{
    background-image: none;
    }

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Het onderwerp ‘Twee logo's in header header plaatsen twenty twelve’ is gesloten voor nieuwe reacties.