Support » CSS / opmaak vragen » Standaard fontfamily en tekstkleur in Tinymce aanpassen

  • IK gebruik Tinymce voor opmaak van pagina’s en berichten. Standaard staat de fontfamily op Georgia en de tekstkleur niet op mooi zwart.
    Ik gebruik het lettertype Verdana en zwart (#000000) als tekstkleur.
    Elke keer voordat ik ga beginnen moet ik dit wijzigen – vaak ook tijdens het opmaken.

    Hoe kan ik de opstart zo maken dat Tinymce gelijk met Verdana begint en mijn gewenste tekstkleur. Ik ben al wezen googelen maar ik kom er niet uit. Mijn kennis ontbreekt.

    Wie weet raad?

12 reacties aan het bekijken - 1 tot 12 (van in totaal 12)
  • Je kunt in je functions.php van je thema een functie zetten waarmee je een stylesheet definieert voor je editor (tinyMCE).

    function theme_add_editor_styles() {
        add_editor_style( 'custom-editor-style.css' );
    }
    add_action( 'admin_init', 'theme_add_editor_styles' );

    Je dient dan dus nog een file aan te maken in de root van je thema met de naam “custom-editor-style.css”. Hierin zet je de volgende CSS:

    body#tinymce.wp-editor { 
        font-family: Verdana, sans-serif; 
        color: black;
    }
    bhrdrtvdf

    (@bhrdrtvdf)

    Ruurd bedankt voor je reactie – ik ga kijken of mij dit gaat lukken.

    Code van Ruurd is echter alleen voor in de admin/editor en niet voor wat aan de voorkant weergegeven wordt.
    Dat zou je bij voorkeur ook niet in tinymce moeten doen maar in de CSS van het thema/extra css kader van de customizer.

    Die code is meestal iets in de trant van

    #content p{
     font-family: Verdana, sans-serif; 
     color: #000;
    }

    De specifieke css selector is afhankelijk van het gebruikte thema.

    Klopt wat Richard zegt, het is niet van toepassing voor de front-end. Echter heb ik gereageerd op je vraag om de content binnen TinyMCE te ‘stylen’:

    Hoe kan ik de opstart zo maken dat Tinymce gelijk met Verdana begint en mijn gewenste tekstkleur. Ik ben al wezen googelen maar ik kom er niet uit. Mijn kennis ontbreekt.

    Ik heb gevonden waar tinymce dit doet. Ga naar wp-inclues/js/tinymce/skins/wordpress/. Daar is de volgende file van belang wp-content.css. In deze css file staat het volgende :
    body {
    font-family: Georgia, “Times New Roman”, “Bitstream Charter”, Times, serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 9px 10px;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    overflow-wrap: break-word;
    word-wrap: break-word; /* Old syntax */
    }
    Georgia aanpassen naar Verdana of een ander font en klaar. Zowel inde backend als het frontend.

    Georgia aanpassen naar Verdana of een ander font en klaar. Zowel inde backend als het frontend.

    En zodra WordPress wordt ge-update zijn je wijzigingen weer weg. Dit is onwenselijk gezien WordPress regelmatig onderhevig is aan updates.

    @ceesdidden die methode raad ik met klem af.
    Bij een update van tinymce is die wijziging weer verdwenen. Dan is de oplossing van Ruurd beter aangezien die wel behouden blijft wanneer je dat toepast in een child-theme.

    Daarnaast maak je door het lettertype in de css van tinymce aan te passen dit niet direct tot het standaard lettertype aan de voorzijde van de website voor je gebruikers.

    Richard het lettertype is dan ook in frontend editor zoals je het hebt ingesteld. En ja een update kan een probleem geven als ze ook de css aanpassen. Maar dat zie ik niet zo xnel gebeuren. Verder kun je de css toevoegen aan je website als extra css regel.

    De tip van Cees Didden had ik zelf (na googelen) ook gevonden. Ik heb dat gewijzigd en het werkt tot een nieuwe update 🙂

    Ik wil graag benadrukken dat dit absoluut af te raden valt gezien je aan de bron/core van WordPress komt wat elk moment ge-update kan worden. Waarom? Ook dit is gelukkig te vinden via Google 😉 Een van belangrijkste redenen is de stabiliteit van je website en de update gevoeligheid.

    https://getflywheel.com/layout/wp-core/
    http://vizred.com/never-edit-wordpress-core-files-ever/
    https://wordpress.stackexchange.com/questions/1564/modifying-wordpress-core-files (biedt ook alternatieven)

    Mocht deze ‘bad-practice’ oplossing je geholpen hebben, wil je dan dit topic dan als ‘Opgelost’ markeren?

    bhrdrtvdf

    (@bhrdrtvdf)

    Ik heb de bad-practice oplossing weer hersteld naar het oude.

    De overige adviezen kan ik niet veel mee omdat mijn kennis hierbij ontbreekt 🙁

    Soms maakt WP iets eenvoudig wel erg moeilijk om te wijzigen ….

    Er zijn veel manieren op dit geklaard te krijgen en je hoeft het ook niet altijd zelf te doen. Grootste gros brengt zijn auto toch ook naar de garage als ie voor een beurt moet?

12 reacties aan het bekijken - 1 tot 12 (van in totaal 12)