Ondersteuning » Thema en CSS/opmaak » Lettertype en kleur paginatitels en header wijzigen lukt niet

  • Ik heb een pagina gemaakt ( wwww.langlevetaart.nl ) en het is behoorlijk geworden zoals ik wilde. Het lukt me alleen niet om het lettertype en de kleur van de paginatitels te wijzigen.

    Ik heb hier gelezen en geprobeerd dingen te wijzigen in css. Ik moet zeggen, het is als Chinees voor mij, ik begrijp er weinig van. Maar goed, wel geprobeerd. Helaas is het niet gelukt, alleen de titel van de pagina (de header als ik het goed heb?) is nu van een mooi lettertype in een minder mooi lettertype veranderd. (geen idee hoe ik dat voor elkaar heb gekregen..)

    Ook heb ik geprobeerd het voor elkaar te krijgen met een plugin. Dat ging heel goed, het zag er prima uit, alleen als ik op ‘save’ druk in de plugin, springt alles weer terug in het originele, zwarte, lettertype. Ook geen succes dus.

    Wie wil mij helpen en kan dit uitleggen in een beetje simpele taal? Ik wil dus graag titel in de header en de titels bovenaan elke pagina in hetzelfde lettertype. Ik vind Lucida Calligraphy Italic mooi, maar een ander sierlijk lettertype vind ik ook prima. Ook zou ik de titels graag in dezelfde kleur willen.

    Ik hoor graag van jullie want ik word er een beetje wanhopig van!

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Hi

    Het lukt me alleen niet om het lettertype en de kleur van de paginatitels te wijzigen.

    — — –Eerst wat algemene info…

    Lettertypen: Belangrijk om te weten…
    Als website bouwer kan je opgeven welke lettertypen je wilt gebruiken voor je site. Dat betekent echter niet automatisch dat BEZOEKERS van je site altijd dat lettertype ook ZIEN.
    Dat komt omdat websites de lettertypen gebruiken die bij de bezoeker van je site op de PC staan. staat het lettertype van jouw site niet op de PC, dan wordt een vervangend lettertype gebruikt.
    Daarom ook is het goede gewoonte om bij de bouw van je site een ‘font-family’ op te geven. Heeft de bezoeker het eerst opgegeven lettertype niet, dan wordt het volgende gebruikt of het daarop volgende etc. Het meest algemene lettertype staat als laatste genoemd; Zoek dus een lijst van fonts bij elkaar dat op elkaar / acceptabel lijkt.
    Bijvoorbeeld:

    p {
        font-family: "Times New Roman", Georgia, Serif;
    }

    Om dit probleem op te lossen kan je lettertypen in je site ‘inbakken’. Zo toont je site zoals jij bedoeld hebt, ongeacht of de bezoeker het betreffende lettertype op de PC heeft staan.

    Hier vind je de info:
    http://www.w3schools.com/css/css3_fonts.asp

    Een andere oplossing [veeeeeel eenvoudiger] is, om een mooi lettertype en font-family te kiezen die WEL standaard in WINDOWS zit.
    Hier de lijst…
    https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows

    == == == …en verder…
    Hieronder een voorbeeld hoe je fonttype, -kleur en -grootte aan te passen met gebryuik van een in windows ‘ingebakken’ font.

    .entry-title, .page-title {
        font-family:gabriola !important;
        color:#99cc66;/*kleur lettertype*/
        font-size:3.25em; /*lettergrootte rekeninghoudend met verschillende devices*/
    
    }
    h1,h2,h3 {
        font-family:gabriola !important;
        color:#99cc66;/*kleur lettertype*/
        }
    h1{    font-size:3.25em; /*lettergrootte rekeninghoudend met verschillende devices*/}
    h2{    font-size:2.75em; /*lettergrootte rekeninghoudend met verschillende devices*/}
    h3{{    font-size:2.25em; /*lettergrootte rekeninghoudend met verschillende devices*/}

    Natuurlijk kan je dit alles verder naar wens aanpassen…;-)
    == == == WAT NU TE DOEN MET DEZE CODE…

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
    Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
    Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

    Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

    == == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
    Zet de bovenstaande code dan ONDERAAN het bestand ‘style.css’ van je thema. Ververs je browser <CTRL-F5>.
    == == ==

    == == == Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. Activeer het childtheme.
    6. ==

    7. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
      – Maak je aanpassingen in style.css van het childtheme;
    • Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
    • open de map van je childtheme
    • gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
    • voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
    • UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
    • browser: druk <CTRL-F5> om je browser te verversen
    • bekijk het resultaat

    – mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

    Thread starter Maartje81

    (@maartje81)

    Bedankt voor het uitgebreide antwoord!
    Helaas is het nog niet gelukt.
    Ik heb het volgende gedaan:

    – Een childtheme aangemaakt. Dit ging vrij makkelijk, alleen was de achtergrondkleur van de pagina weg (achtergrond was nu wit) en ook als ik via ‘customizer’ de kleur probeerde aan te passen gebeurde er niks. Omdat ook het aanpassen van het lettertype niet lukte, heb ik hem uiteindelijk maar weer terug gezet op het originele theme.

    – Ik het Filezilla gedownload. Ik weet alleen vervolgens niet goed wat ik er mee moet doen. Via internet heb ik gezien wat ik moet invullen bij ‘host’, ‘gebruikersnaam’, ‘wachtwoord’ en ‘poort’. Hij lijkt dan een verbinding te maken, maar dit mislukt.

    – Ik heb Notepad+++ ook gedownload, maar omdat het met Filezilla niet wilde lukken, heb ik hier nog niks mee gedaan.

    – Ik heb vervolgens geprobeerd je voorbeeld van de kleurcodes en lettertypes rechtstreeks in de style.css in het childtheme te zetten. Uiteindelijk lukte het om de kleur te veranderen (alleen de titels van de pagina’s, niet de header), maar de lettergrootte en het lettertype veranderde niet.

    Nu vraag ik me dit af (naast de grote vraag ‘Wat doe ik fout’ 😉 ):

    – Waarom moet ik werken met iets als Filezilla en Notepad, en kan ik niet rechtstreeks in de style.css (zo noem je dat toch? Als ik in het dashboard van mijn site op ‘weergave’ en ‘editor’ klik?) codes invoeren/veranderen?

    – Wat doe ik fout bij de aanmelding bij Filezilla en wat moet ik er precies mee doen?

    – Ik heb jouw voorbeeld van de codes genomen en daarin mijn lettertypes (volgens mij zijn dit lettertypes die bekend zijn in Windows) en kleur gezet. Is dit nu zoals ik het kan gebruiken of moet ik dan nog dingen toevoegen of juist weghalen? En pas ik hiermee ook mijn header (de titel van de site) aan in hetzelfde lettertype en dezelfde kleur?

    .entry-title, .page-title {
    font-family: lucida calligraphy; lucida handwriting; palatino linotype italic;
    color:#18a3a3;
    font-size:3.25em;}
    h1,h2,h3 {
    font-family:lucida calligraphy; lucida handwriting; palatino linotype italic;
    color:#18a3a3;}
    h1{ font-size:3.25em;}
    h2{ font-size:2.75em;}
    h3{ font-size:2.25em;}

    Nogmaals bedankt voor de hulp hoor! Ik ben duidelijk wel goed in taarten bakken, maar niet in website maken! 😉

    Hi,

    Ik ben duidelijk wel goed in taarten bakken, maar niet in website maken! 😉

    Voor mij geldt het omgekeerde, dus dat houdt de boel aardig in evenwicht 😉
    Beantwoord de onderstaande vragen / geef aanvullende info; Zo kunnen we de boel stap-voor-stap in het gareel krijgen.

    Ik loop je verhaal even stap voor stap door.
    — — — Een childtheme aangemaakt.
    Je meldt dat na het activeren van het CT, de boel [direct?] van uiterlijk veranderde. Dat klinkt vreemd!

    1. ??heb je de ‘One-Click Child Theme’ succesvol geinstalleerd??
    2. ??heb je ‘One-Click Child Theme-plugin’ geactiveerd
    3. ??heb je een CT aangemaakt??
    4. dashboard > weergave > childtheme
    5. volg instructies…
    6. controleer of het CT na installatie actief is:
    7. dashboard > weergave thema’s en verifieer
    8. — — — controleer de juiste werking van het childtheme
      Om te controleren of je CT juist werkt…

      h1.site-title,
      h1.site-title a,
      h1.site-title a:visited {
          color: #9966cc !important;/*lang leve taart wordt paars*/
      }
    9. Plaats de CSS ONDERAAN je ‘style.css’ van je CT.
    10. her-UPload de gewijzigde ‘style.css’ en overschrijf
    11. <CTRL-F5> ververs je browser en controleer. De site titel is van kleur veranderd…

    Als bovenstaande LUKT, is je CT succesvol geïnstalleerd en actief. Als het niet lukt…. zoek de fout… ;-((

    — — –Ik het Filezilla gedownload.
    Filezilla [elk FTP-programma] werkt in grote lijnen vergelijkbaar met de ‘windows verkenner’: het is een bestandsbeheerder.
    De belangrijkste verschillen:

    • win-verkenner: beheer bestanden op je eigen PC
    • ftp: beheer [web] bestanden op de webserver [elders]
    • win-verkenner: één scherm
    • ftp: 2 schermen: PCscherm en website-scherm

    — — — waarom aparte software

    Waarom moet ik werken met iets als Filezilla en Notepad, en kan ik niet rechtstreeks in de style.css (zo noem je dat toch? Als ik in het dashboard van mijn site op ‘weergave’ en ‘editor’ klik?) codes invoeren/veranderen?

    De dashboard-editor werkt [in dit geval] ook, maar heeft zo zijn beperkingen.
    Een code-editor zoals ‘notepad++’ biedt bijv. automatische kleuropmaak voor je codes.
    a. Dat maakt het lezen van code makkelijker
    b. Dat maakt fouten in codes makkelijker zichtbaar!!

    Het voordeel van een FTP-programma wordt direct duidelijk als je bijv.

    • mediabestanden zoals foto’s, video’s wilt uploaden
    • een backup van je site [muv. database] wilt maken
    • je zaken moet herstellen of een ander thema wilt installeren

    Hoe werkt dat dan…
    In filezilla kan je jouw favoriete [code] editor koppelen aan filezilla.

    1. open filezilla
    2. kies bewerken > instellingen
    3. scroll naar bestandsbewerking
    4. kies 'aangepast bewerkingsprogramma gebruiken
    5. blader en selecteer de gewenste code-editor
    6. sla de instellingen op

    == == ==

    1. Open je site mbv FTP
    2. Klik het gewenste bestand
    3. re-klik > 'bekijken / bewerken'
    4. het bestand opent in de gekozen editor
    5. Is de aanpassing in de editor klaar? Sla op
    6. Filezilla opent automatisch een venster met de vraag of deze wijzigingen moeten worden ge-upload naar de site...
    7. bevestig...

    Op deze manier gaat het allemaal lekker vlot...

    == == ==-- -- -- aanmelding bij Filezilla

    Je webhost heeft de ftp-toegangsgegevens voor je.

    Ik heb eens naar je bijgesloten code gekeken.
    [FYI: plaats code op dit forum aub tussen backtics [links naast de '1'] om problemen met de weergave van je post op het forum te voorkomen]

    • Voor zover ik kan zien staan de gekozen lettertype niet in de standaardlijst van windows
    • Kijk ook eens: 'http://www.w3schools.com/cssref/css_websafe_fonts.asp'

    • samengestelde namen van lettertypes moeten netjes tussen "..."

    voorbeeld:

    p {
        font-family: "Times New Roman", Times, serif;
    }

    Loop je vast, heb je vragen? Vraag gerust.

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Lettertype en kleur paginatitels en header wijzigen lukt niet’ is gesloten voor nieuwe reacties.