Ondersteuning » Thema en CSS/opmaak » logo over header slide plaatsen

  • Hoi,
    Ik heb een header slide gemaakt maar wil standaard het logo laten staan. Dat de foto’s veranderen zeg maar en dat het logo (transparant) er bovenop in de linker hoek blijft staan.
    Hoe doe ik dat?
    de site staat nu nog op een demo: merel.theatergroepzierik.nl

    Kan iemand mij helpen? Ik heb bijna geen verstand van codes.
    groetjes v Merel

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Hoi Merel,

    Eerst maar even over het logo [just in case…]

    Je wilt het logo ‘bovenop’ de slider, de slider ‘schijnt door’ het logo heen.
    Om een logo / afbeelding op een transparante ondergrond te krijgen, dien je een afbeelding te maken en op te slaan als PNG-bestand.
    Bijv. ’transparantLogo.png’.

    Heb je nog geen logo met transparante ondergrond, dan kan je bijv. het gratis programma GIMP gebruiken om zo’n afbeelding te maken.

    Thread starter mvogeltje

    (@mvogeltje)

    Hoi W.P. Ginfo,
    Ik heb al een transparant logo. Staat in de tekst op de index. En nu…?
    groetjes

    Beste Merel,

    dit kan je doen door met de css te spelen,
    de 2 divs moeten over elkaar schuiven.
    dit is het makkelijkste door het logo een waarde position absolute mee te geven en het omhulsel van beide relatieve,

    #header {
        position: relative;
    }
    
    #logo, #slider {
        position: absolute;
    }
    
    #logo {
        z-index: 20;
    }

    Zoiets zou het dan worden.

    De html ziet er dan ongeveer zo uit:

    <div id="header">
        <div id="logo">je logo</div>
        <div id="slider">je slider</div>
    </div>

    de z index is om zeker te zijn dat je logo boven je slider komt, deze moet altijd hoger zijn dan de slider dus.

    Hopelijk lukt het hiermee

    Merel,

    Die afbeelding op deze http://merel.theatergroepzierik.nl/ pagina is een BMP-bestand. De achtergrond is wit; dat is niet hetzelfde als transparant. Kijk in de mailbox van info@theatergroepzierik.nl voor een voorbeeld.

    Volgende vraag is nu:

    Waar precies wil je de slider plaatsen?

    • bijv. boven het menu, waar nu een statische header staat?
    • Onder de plek waar nu het logo staat op de pagina met titel INDEX?
    • elders…?

    En net zo belangrijk: Welke plugin gebruik je om de headerslide te maken.
    == == ==

    Voorbeeld van hoe deze afbeelding naar linksboven te verhuizen:
    [plaats in style.css van je childtheme]

    .wp-image-71{
    		position: absolute;
    		top: -350px; /*speel met deze waarde*/
    		z-index: 100000; /* zet afbeelding op de voorgrond [bovenste laag]*/
    		width: 20%; /*[afmetingen] speel met deze waarde*/
    		left: -70px; /*speel met deze waarde*/
    		}

    Opgelet!!
    Nu staat DEZE afbeelding op DEZE pagina, linksboven. Dus niet voor alle pagina’s.

    Als je deze afbeelding op elke pagina wilt plaatsen:

    1. Maak dan van het logo de header-afbeelding
    • dashboard . weergave > header
    • kies het logobestand [verklein het bij voorkeur eerst naar de gewenste grootte]
      Nu staat het logo groot bovenaan. Trek je nog niks aan van de grootte of de precieze plaats
    • kopieer de php-code van je slider [dat staat meestal ergens in de instellingen voor de slideshow [geef anders even de naam van de plugin]
    • kopieer ‘header.php’ van het originele theme naar je child-map
    • bewerk de ‘header.php’: plaats de php-code van je slider
      Controleer het resultaat. Staat de slider niet op de juiste plek?
      verplaats de code een stuk naar boven / onder [op een witregel]
    • Staan beide zaken [ongeveer] waar ze zijn moeten?
      Stel nu in de style.css de plek en grootte precies in.

    Thread starter mvogeltje

    (@mvogeltje)

    Hoi,
    Ik zie nu pas dat de header slider niet aan stond. De plugin daarvan is Header image slider. Ik wil het logo er transparant links bovenin zetten zodat die over de slider fotos valt. Als het goed is heb ik nu het logo vervangen op de pagina voor een (nu wel) transparante.

    Ik kan het logo toch geen header noemen want dan valt de header slider toch weg en daar moet het juist overheen komen te staan.

    Ik kan het logo toch geen header noemen want dan valt de header slider toch weg en daar moet het juist overheen komen te staan.

    De plaatsing ‘boven’ de slider is een kwestie van de ‘z-index’ van de onderste laag [=slider] een kleinere waarde geven dan die van het logo.
    == == ==
    De slider is ni idd actief. Goed gedaan!
    Het logo is nu transparant, maar heeft nog wat onvolkomenheden.
    De binnenkant van e, a,o en p hebben nog een witte vulling.
    == == ==

    1. FTP: kopieer ‘header.php’ van het originele theme naar je child-map
    2. open ‘header.php’ in een EDITOR [niet een wordprocessor] bijv ‘Notepad++’
    3. Pas de ‘header.php’ als volgt aan in de map van je childtheme.
      fragment [...]
      <header id="branding" role="banner">
      	<hgroup>
      	<!-- toevoeging -->
      	<div id="logo">
      	<img  width="376" height="113" src="http://merel.theatergroepzierik.nl/wp-content/uploads/Nieuw-logo-transparant-300x80.png">
      	</div> <!--einde logo -->
      	<!-- einde toevoeging -->
      			</hgroup>
      [...]
    4. == == ==

    5. Voeg onderstaande style-regels toe aan ‘style.css’van je childtheme
      #header {
          position: relative;
      }
      
      #logo, #slider {
          position: absolute;
      }
      
      #logo {
          z-index: 99999999999999999;
      	left:0px;
      	top:0px;
      }

    Ik zie dat W.P Ginfo me voor was met antwoorden,
    dont need to say more i guess 😉

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Het onderwerp ‘logo over header slide plaatsen’ is gesloten voor nieuwe reacties.