Support » Thema en CSS/opmaak » Grote van de letters in Headers en post aanpassen..

  • Opgelost Yendor71

    (@yendor71)


    Hallo,

    ben onlangs begonnen met WordPress en tot zover bevalt het prima, loop alleen vast omtrent lettertypes.

    ik zou graag de grote en het lettertype willen veranderen van de Headers en de desbetreffende post’s.
    (het liefst het lettertype zoals de tags onder de post)
    heb al gezocht in de style css, maar dit is mij iets teveel abracadbra..
    ik gebruik theme twentyten en dark-tt waarin al een child theme staat?

    http://yendor71.com/WordPress/

15 reacties aan het bekijken - 1 tot 15 (van in totaal 22)
  • Hi,

    Hieronder een voorbeeld:

    h1.entry-title, h1, h2, h3 {
        font-family: "arial black",arial, sans-serf;
    }
    
    h1 {
        font-size:1.1em;
        font-weight:bold;
    }
    
    h2 {
        font-size:0.8em;
        font-weight:bold;
    }
    h3 {
        font-weight:bold;
        }

    Natuurlijk kan je alle waarden 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 Yendor71

    (@yendor71)

    Okay, hartelijk dank. Ik ga hier vanavond mee stoeien.
    Heb ik tevens nog een vraag… Is het mogelijk om een tabel weg te halen of deze “onzichtbaar” te maken en hier een hover effect van te maken? En dan niet de tekst maar meer de achtergrond, als je er met de muis van boven naar beneden overheen gaat.
    Het gaat om concertdata.. Dat je dus de verschillende regels ( datum, plaats, zaal en land) om en om als het ware in een andere kleur oplicht…

    Hi,

    Veel succ6 met stoeien!

    Is het mogelijk om een tabel weg te halen of deze “onzichtbaar” te maken en hier een hover effect van te maken?

    Leuke vraag…

    Geen idee… m’n eerste reactie is ‘nee’; Hover-effecten zijn in gebruik bij links en een tabel is geen link…
    Maar…. slimme truuks… je weet ’t maar nooit…?!@#$
    Onzichtbaar maken kan natuurlijk wel… maar dan is ‘niet plaatsen’ en stuk makkelijker… 😉

    Thread starter Yendor71

    (@yendor71)

    Hallo,
    zal ivm de tabel kijken hoe en wat..deze is standaard al geplaats.. (standaard instelling in dit theme waarschijnlijk, ga kijken of ik dr wat mee kan)

    dan heet het waarschijnlijk geen hover effect wat ik bedoel…
    weet uberhaupt niet of dit een CSS cod effect is…
    maar wat ik bedoel is een effect waardoor de “achtergrond” als het ware wat oplicht qua kleur…dus niet de tekst zelf…geen idee hoe dit het..
    hier een voorbeeld van wat ik bedoel..

    http://www.volbeat.dk/3/dates

    ga in ieder geval ff bezig met de bovenstaande adviezen, kan ik alvast mee vooruit. Bedankt in ieder geval 😉

    Hi,

    Dank voor de aanvullende info!!
    Door de link naar een voorbeeld wordt je vraag in een keer een heel stuk duidelijker…; Nou nog een oplossing…;-)

    — — — — Wat ik heb gedaan

    1. Ik heb een ‘class=”rij0″ ‘ gemaakt om de bovenste rij een aparte opmaak te geven
    2. Ik heb een ‘class=”rij1″ ‘ gemaakt om de oneven rijen een aparte opmaak te geven
    3. Ik heb een ‘class=”rij2″ ‘ gemaakt om de even rijen een aparte opmaak te geven
    4. == == ==

    5. ik heb in de tabel bij elke RIJ steeds aangegeven of het class= rij1 of rij2 betreft [zie onderstaande voorbeeld]
    6. ik heb voor elke class een eigen opmaak aangemaakt. In dit geval heb ik steeds verschillende kleuren gemaakt. Dit om de mogelijkheden te illustreren. Natuurlijk kan je rij1 en rij2 dezelfde kleuren geven.
    7. vervolgens heb ik ‘.rij1:hover{}’ en ‘.rij2:hover{}’ elk eigen -en afwijkende- kleuren gegeven.
    8. Ook hier geldt Je kan de hover-kleur voor beide rijen gelijk houden [!maar natuurlijk wel afwijkend van de ‘standaardkleuren’voor de rijen!]

      == == == voorbeeld tabel

      <table style="width:70%">
         <tr class = "rij0"> /*kopteksten van de tabel*/
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Points</th>
        </tr>
        <tr class = "rij1"> /*oneven RIJ van de tabel*/
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr class = "rij2"> /*even RIJ van de tabel*/
          <td>John</td>
          <td>Brown</td>
          <td>65</td>
        </tr>
        <tr class = "rij1"> /*oneven RIJ van de tabel*/
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr class = "rij2"> /*even RIJ van de tabel*/
          <td>John</td>
          <td>Brown</td>
          <td>65</td>
        </tr>
        <tr class = "rij1"> /*oneven RIJ van de tabel*/
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr class = "rij2"> /*even RIJ van de tabel*/
          <td>John</td>
          <td>Brown</td>
          <td>65</td>
        </tr>
      </table>

      == == == de bijbehorende CSS-opmaakkenmerken

      /*Pas kleuren naar wens aan!!
      
      /*koptekst tabel;
      .rij0{
      background-color:#000000;/*zwart*/
       color: #ffffff;/*wit*/
      }
      
      /*kleur bij muis boven de rij1*/
      .rij1:hover{
      background-color:#ff0000;/*rood*/
       color: #99cc66;/*appelgroen*/
      }
      
      /*standaardkleur rij2*/
      .rij2{
      background-color:#f7f4f4;/*lichtgrijs*/
       color: #000000;/*zwart*/
      }
      
      /*kleur bij muis boven de rij2*/
      .rij2:hover{
      background-color:#0000ff; /*blauw*/
       color: #99cc66;}/*appelgroen*/

      == == == WAT NU TE DOEN MET DEZE CODE

    9. pas de tabel-RIJEN aan in de tekst van het bericht / de pagina zoals in het voorbeeld
    10. LET OP
      !!Maak deze aanpassingen in TEKST-tab van de dashboard-editor!! [dus niet de ‘visueel-tab’]

    11. EERDER in deze thread, vind je ‘WAT NU TE DOEN MET DEZE CODE’. Volg deze instructies om de CSS aan te passen…<

      Loop je vast? Vraag gerust!

      == == == leesvoer
      http://www.w3schools.com/css/default.asp
      http://codex.wordpress.org/Getting_Started_with_WordPress
      http://codex.wordpress.org/CSS
      http://codex.wordpress.org/Finding_Your_CSS_Styles
      http://codex.wordpress.org/FAQ_Troubleshooting
      http://codex.wordpress.org/Backing_Up_Your_Database
      Natuurlijk zijn er ook trainingen op het internet te vinden…
      bijv. [engels, betaald] Lynda.com:
      http://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/154417-2.html
      Natuurlijk zijn we op dit forum bereid je verder te helpen met je vragen / keuzes…

    Thread starter Yendor71

    (@yendor71)

    Hartlijk dank. dit gaat een uitdaging worden haha. ga het proberen 😉

    OK… hier nog een ‘zetje in de goede richting’.

    Hierboven staat het uitgebreide ‘stap-voor-stap’-verhaal.

    In het kort komt het hier op neer:

    1. open de pagina / het bericht met de tabel in de dahsboard-editor
    2. !!klik op de ‘TEKST-tab’ re-boven het editor-vak
    3. je ziet nu de opbouw van de tabel, vergelijkbaar als in het voorbeeld hierboven
    4. vervang [om en om] ‘<tr>’ in ‘<tr class = “rij1”>’ resp. ‘<tr class = “rij2”>’
    5. sla het gewijzigde bericht op
    6. == == ==

    7. geef de door jou gewenste kleuren op in de voorbeeld CSS
    8. open ‘style.css’ in een editor; Plaats de CSS-code ONDERAAN
    9. sla alle wijzigingen op
    10. <CTRL-F5> ververs je browser

    Loop je vast? Vraag gerust.

    == == ==
    handige TIP
    == == ==

    1. maak een nieuw TEST-bericht of nieuwe TESTpagina
    2. plak bovenstaande voorbeeld tabel in het bericht / de pagina
    3. plak bovenstaande CSS-code ONDERAAN het bestand ‘style.css’ zoals hierboven beschreven
    4. Nu heb je een mogelijkheid om te oefenen en te rotzooien, zonder dat je site daar echt ‘last van heeft’.
    5. Ben je tevreden over het resultaat?
    6. geef de rijen in de echte tabel nu een een <tr class = “rij1”>’ resp. ‘<tr class = “rij2”>’
    7. sla op en klaar is kees…
    Thread starter Yendor71

    (@yendor71)

    Okay, hartelijk dank voor deze uitvoerige uitleg! Ik ga er mee bezig. als dit allemaal werkt gaat dan in vervolg als ik een nieuwe data aanmaak ( nieuwe tabel dus) automatisch dit kleuren script werken? tot zover mijn vragen 😉

    Hi,
    Ja, dat is te zeggen als je dan de genoemde rij1 en rij2 codes toevoegt aan je rijen in de tabel en de CSS opneemt in je stylesheet…

    Thread starter Yendor71

    (@yendor71)

    Okidoki, ga dr deze week mee bezig. bedankt voor de info!!

    Graag gedaan.

    — — —
    Loop je vast? heb ik je verkeerd begrepen? Vraag gerust.

    Is je probleem opgelost Deel je oplossing met dit forum.
    … of hou je het voor gezien…?
    Vergeet aub niet de thread als ‘resolved’ / ‘opgelost’ te taggen in de rechter zijbalk.

    Thread starter Yendor71

    (@yendor71)

    mmhhhh, nu kan ik de (php?) pagina niet vinden waar de tabellen zouden moeten staan? of worden deze door CSS aangemaakt?
    als ik in de CSS van de plugin (gigpres)kijk staat daar het ÊÊn en ander wat eventueel aan te passen is door middel van en child theme..

    ter verduidelijking, het gaat om deze pagina waar ik mee aan het rommelen ben…

    http://yendor71.com/WordPress/gigs/

    Hi,

    Vergeet die php-bestanden!!!PHP-bestanden zijn het terrein van experts!! en hebben niets te maken met jouw vraag // situatie. Afblijven dus!! Het ‘verklooien’ van php-bestanden heeft GROTE gevolgen voor je site = ‘doet ’t niet meer…’

    Berichten en pagina’s zijn gewoon bereikbaar in je dashboard!
    Daarnaast kan je -zoals je al aangeeft- de CSS van de gigpress-plugin aanpassen in een childtheme.

    Als ik specifiek naar de tabel op jouw site kijk, zie ik dat er in rijen onderscheid wordt gemaakt tussen:

    • ‘gigpress-row active’ = hetzelfde als rij2 [even]
    • ‘gigpress-info active’ = uitklap regel met ‘+-plusje’
    • ‘gigpress-row active gigpress-alt’= hetzelfde als rij1 [oneven]
    • Net als in het bovenstaande voorbeeld kan je hier de opmaak regelen door voor elk element de opmaak vast te leggen in CSS van het [child]theme.

      — — —
      Hieronder -net als in het voorbeeld hierboven- de CSS voor alle elementen van je tabel en hun verschillende ‘states’.

      IN DE TABEL ZELF, HOEF JE GEEN CODE AAN TE PASSEN

      Voeg die CSS toe ONDERAAN je ‘style.css’ van je [child]theme, de stylesheet van de gigs-plugin. Welke css stylesheet maakt niet zo heel veel uit. Als ze maar wel ONDERAAN worden geplaatst!!

      Natuurlijk kan je de kleuren van de tekst en de achtergrond [in de verschillende ‘states’ naar eigen wens aanpassen zoals hierboven.

      tr.gigpress-row.active {
          background-color:#ff0000;/*rood*/
          color: #99cc66;/*tekstkleur appelgroen*/
          }
      
      tr.gigpress-info.active {
          background-color:#f7f4f4;/*wit*/
          color: #000000;/*tekst zwart*/
          }
      
      tr.gigpress-row.active.gigpress-alt {
          background-color:#0000ff;
          color: #99cc66;
      }
      
      tr.gigpress-row:hover {
          background-color:#ff00ff;/*violet*/
          color: #000000;
          }
      
      tr.gigpress-info:hover {
          background-color:#000000;/*zwart*/
          color: #ffffff;/*wit*/
          }
      
      tr.gigpress-row.active.gigpress-alt:hover {
          background-color:#aaeeff;/*lichtblauw*/
          color: #99cc66;/*tekstkleur appelgroen*/
      }
    Thread starter Yendor71

    (@yendor71)

    Okay, hartelijk dank! Nu wordt het mij duidelijk!! Ik Laat weten of het is gelukt 😉

    veel succes!

15 reacties aan het bekijken - 1 tot 15 (van in totaal 22)
  • Het onderwerp ‘Grote van de letters in Headers en post aanpassen..’ is gesloten voor nieuwe reacties.