Logo weerskanten header toevoegen

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’.

GIMP:

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

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

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

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.

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.

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