Support » CSS / opmaak vragen » Logo weerskanten header toevoegen

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Beste Irene,

    Welkom terug.

    Suggestie[s]:

    1. Afbeeldingen -zoals een header- laten zich het eenvoudigst bewerken in een grafisch programma. Zo heb je volledige controle over inhoud, lagen, kleuren, positie van alle elementen. heb je [nog] geen geschikt grafisch programma? gebruik GIMP. Het is gratis, heeft alle noodzakelijke functies en werkt vergelijkbaar als ‘de grote namen’.
    2. GIMP:

    3. Maak een nieuwe afbeelding van 1008px bij 212px
    4. kies ‘geavanceerde opties:’ >> vullen met ‘transparantie’. Alleen zo ontstaat een transparante laag waarop jij meerdere elementen kwijt kunt
    5. open apart in GIMP, één of méér, elementen bijv logo’s etc.
    6. Dit verschijnt als aparte afbeeldingen
    7. transparante header: start een nieuwe LAAG
    8. sleep een logo oid. op de nieuwe laag > hij landt in het midden
    9. sleep de boel op de juiste plek
    10. maak voor elk apart element een nieuwe laag; zo houd je controle over alle zaken groot en klein…
    11. sla steeds de nieuwste variant op header 1, 1a, 1b 2, 2a etc. Zo kan je voor- en achteruit… in de ontwikkeling
    12. Tevreden? exporteer als: PNG-bestand; Zo blijft de transparantie bewaard en blijven zaken als je menu, site-titel etc. zichtbaar…
    13. Plaats de header en bekijk het resultaat

    Dus ik kan niet ‘eenvoudig’ twee plaatjes naast ‘De Zoete Suikertoef’ plaatsen door ergens iets aan te passen?
    Das nou jammer.
    Dan blijft het lekker zo staan zoals het is 🙂
    Buiten het feit dat ik van bovenstaande oplossing helemaal niets snap(ligt aan mij hoor, niet aan jou, hahahaha) moet het allemaal vooral met zo min mogelijk handelingen gedaan worden.
    Ik kamp met een hele vervelende schouder die laptop werk bijna, of eigenlijk niet, trekt.
    Heb na jaren de moed bij elkaar geraapt om de site toch maar op poten te krijgen maar dan moet het wel enigszins eenvoudig blijven.

    Irene,

    Je site verdient een leuke header. Het is betrekkelijk eenvoudig, maar dan moet eerst het plaatje worden samengesteld. Ik wil dit wel even voor je doen in Illustrator of Photoshop, mits je de plaatjes hebt, en een klein schetsje kunt geven. Dan vertel ik je daarna met welke code je dit plaatje in je header krijgt.
    Als je op mijn naam klikt, kun je via mijn profiel naar mijn website, en tref je mijn telefoonnummer aan. Ik heb hier morgen wel even tijd voor (ik neem aan dat het goede plaatjes zijn)

    groet,
    Lianne

    Hallo Lianne,

    DANK JE WEL! 😘
    Ik heb al een logo hoor, vandaar dat ik dacht ‘ die plak ik er ‘effe’ in 😂.

    Oke, in principe werkt het zo, maar toch even: mooie taarten maken is een vak, mooi websites idem dito. Je logo bepaalt de code om hem te plaatsen (ook responsive). Aanbod staat.

    groet,
    Lianne

    Hallo Lianne,

    Ik begrijp niet zo goed wat je bedoelt met de volgende zin.
    ‘ je logo bepaalt de code om ‘ te plaatsen (ook responsive)

    Het logo wat ik heb dat gebruik ik al een jaar of twee. Staat ook op 2 verschillende kaartjes.
    Er hoeft dus geen logo ontworpen te worden want dat is al gedaan.

    Ik begreep al dat er niets meer hoeft te worden ontworpen. Het plaatje bepaalt de code: de maatvoering, wel niet de naam en tagline erin etc.

    http://www.facebook.com/dezoetesuikertoef

    Daar is het logo als profielfoto gebruikt.
    Maar op de site wil ik het logo zonder de tekst eronder.
    Die afbeelding heb ik ook.

    Hi Irene,

    In Illustrator heb ik een plaatje gemaakt, met de taartjes aan weerszijden, de sitename en de tagline (in originele lettertypes). Deze is geschikt voor schermbreedtes boven 530px breed. Voor smallere schermen heb ik een tweede plaatje gemaakt, met slechts 1 taartje.

    Via deze link kun je bekijken om welke plaatjes dit gaat, incl. de uitwerking op je site.

    Nu de instructie:

    • Upload bestanden taart-logo.png en taart-logo-mobiel-png binnen ‘Media’ (deze maand nog doen, anders url aanpassen)
    • Voeg de onderstaande code toe aan je style.css-bestand, te bereiken via ‘Weergave” > ‘Theme-editor’
    .site-title {
         text-indent: -10000px;
        background: url("/wp-content/uploads/2015/08/taart-logo.png") no-repeat center top;
        height: 145px;
    }
    
    .site-description {
        font-size: 0em;
        text-indent: -10000px;
    }
    
    @media screen and (max-width: 530px) {
        .site-title {
         background: url("/wp-content/uploads/2015/08/taart-logo-mobiel.png") no-repeat center top;
        height: 85px;
    }
    }

    Groet,
    Lianne

    P.S. De taart-afbeeldingen zijn ongetwijfeld scherper te maken, ik heb ’n download gebruikt van je Facebook-pagina.

    Ohhh!!! Je hebt ‘m ‘gewoon’ even gemaakt! Wat lief!
    Sorry overigens voor de late reactie, was beetje druk met van alles en nog wat.
    Ik heb nog wel een ander bestand van logo maar heb geen idee of die beter is qua kwaliteit.

    Geen moeite: 10 minuten werk. Maar werkt het?
    groet,
    Lianne

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Het onderwerp ‘Logo weerskanten header toevoegen’ is gesloten voor nieuwe reacties.