Toon posts:

[CSS] Tekst vergroten

Pagina: 1
Acties:

Vraag


  • Frozen
  • Registratie: Oktober 2010
  • Laatst online: 27-01 14:58

Frozen

2e Reviewer van het Jaar

Topicstarter
Ik probeer via custom CSS tekst te vergroten op mijn website. De tekst staat in een plugin en ik kan via de Chrome browser wat dingen aanpassen waardoor de tekst groter wordt. Echter lukt het mij niet om dit vervolgens bij het Custom CSS gedeelte van mijn website werkend te krijgen.



Wat ik wil:
Ik wil de tekst "Recent Posts" vergroten.

Hoe is mij dat al eerder gelukt:
Ik vulde in de chromebrowser onderaan tussen
element.style {
en
}
het volgende in:
font-size: 40px;
waardoor de text inderdaad groter werd.

Nu moet ik echter dit stuk code aan de plugin geven zodat hij er dan voor kan zorgen dat dit voortaan altijd gedaan wordt en niet alleen als ik bovenstaande stappen herhaal.

Hoe doe ik dat?
code:
1
2
3
element.style {
font-size: 40px;
}

Bovenstaande code doet namelijk helemaal niets wanneer ik dat kopieer en in de custom css plugin plak. 7(8)7 Ook de website https://www.w3schools.com/cssref/sel_class.asp kon mij helaas niet verder helpen.

Voeg me gewoon toe op LinkedIn, iedereen is welkom!

Beste antwoord (via Frozen op 10-10-2018 00:47)


  • CH4OS
  • Registratie: April 2002
  • Niet online

CH4OS

It's a kind of magic

Probeer het eens met
Cascading Stylesheet:
1
2
3
.elementor-widget-container h5 {
    font-size: 40px;
}
in het CSS-bestand. Hiermee worden wel alle overeenkomsten vergroot, terwijl je misschien enkel de Recent Posts wilt, dan moet je die gewoon een eigen class meegeven zodat het door de CSS te selecteren is.

Overigens is element.style iets van de browser in de inspector. Dat geeft aan dat de styling toegapast is middels het style-attribuut van de tag en dat werkt dus alleen lokaal als je via de inspector het aanpast. ;) Je zult dus iets anders moeten hebben om het mee te selecteren, o.a. met bovenstaand kan dat. CSS werkt namelijk met classes en ID's, de classes worden aangeduid met een . in de CSS en de ID's met een #.

Wellicht is het dus ook een idee, als je het interessant vind, om een cursusje HTML en CSS te pakken?
Zodat eea duidelijker wordt en je niet als kip zonder kop aan de slag gaat? ;) Genoeg cursussen voor te vinden. Ik denk dat codecadamy.com dan wel een mooi begin is.
vikterr schreef op woensdag 10 oktober 2018 @ 00:31:
Probeer eens met !important erachter
De selector is niet goed, dus !important gebruiken gaat niet helpen. Important gebruiken is overigens ook het laatste wat ik altijd doe, important lijkt makkelijk, maar kan later voor kopzorgen zorgen, dat wil je echt zoveel mogelijk voorkomen tenzij het echt niet anders kan.

[Voor 74% gewijzigd door CH4OS op 10-10-2018 00:43]

Alle reacties


  • vikterr
  • Registratie: Februari 2017
  • Laatst online: 26-01 22:16
Probeer eens met !important erachter

[Voor 13% gewijzigd door vikterr op 10-10-2018 00:31]


Acties:
  • Beste antwoord
  • +1Henk 'm!

  • CH4OS
  • Registratie: April 2002
  • Niet online

CH4OS

It's a kind of magic

Probeer het eens met
Cascading Stylesheet:
1
2
3
.elementor-widget-container h5 {
    font-size: 40px;
}
in het CSS-bestand. Hiermee worden wel alle overeenkomsten vergroot, terwijl je misschien enkel de Recent Posts wilt, dan moet je die gewoon een eigen class meegeven zodat het door de CSS te selecteren is.

Overigens is element.style iets van de browser in de inspector. Dat geeft aan dat de styling toegapast is middels het style-attribuut van de tag en dat werkt dus alleen lokaal als je via de inspector het aanpast. ;) Je zult dus iets anders moeten hebben om het mee te selecteren, o.a. met bovenstaand kan dat. CSS werkt namelijk met classes en ID's, de classes worden aangeduid met een . in de CSS en de ID's met een #.

Wellicht is het dus ook een idee, als je het interessant vind, om een cursusje HTML en CSS te pakken?
Zodat eea duidelijker wordt en je niet als kip zonder kop aan de slag gaat? ;) Genoeg cursussen voor te vinden. Ik denk dat codecadamy.com dan wel een mooi begin is.
vikterr schreef op woensdag 10 oktober 2018 @ 00:31:
Probeer eens met !important erachter
De selector is niet goed, dus !important gebruiken gaat niet helpen. Important gebruiken is overigens ook het laatste wat ik altijd doe, important lijkt makkelijk, maar kan later voor kopzorgen zorgen, dat wil je echt zoveel mogelijk voorkomen tenzij het echt niet anders kan.

[Voor 74% gewijzigd door CH4OS op 10-10-2018 00:43]


  • Frozen
  • Registratie: Oktober 2010
  • Laatst online: 27-01 14:58

Frozen

2e Reviewer van het Jaar

Topicstarter
vikterr schreef op woensdag 10 oktober 2018 @ 00:31:
Probeer eens met !important erachter
Bedankt, maar helaas werkte het niet! :P
CH4OS schreef op woensdag 10 oktober 2018 @ 00:31:
Probeer het eens met
Cascading Stylesheet:
1
2
3
.elementor-widget-container h5 {
    font-size: 40px;
}
in het CSS-bestand. Hiermee worden wel alle overeenkomsten vergroot, terwijl je misschien enkel de Recent Posts wilt, dan moet je die gewoon een eigen class meegeven zodat het door de CSS te selecteren is.

Overigens is element.style iets van de browser in de inspector. Dat geeft aan dat de styling toegapast is middels het style-attribuut van de tag en dat werkt dus alleen lokaal. ;) Je zult dus iets anders moeten hebben om het mee te selecteren, o.a. met bovenstaand kan dat. CSS werkt namelijk met classes en ID's, de classes worden aangeduid met een . in de CSS en de ID's met een #.

Wellicht is het dus ook een idee, als je het interessant vind, om een cursusje HTML en CSS te pakken? Zodat eea duidelijker wordt en je niet als kip zonder kop aan de slag gaat? ;)


[...]
Important gebruiken is het laatste wat ik altijd doe, important lijkt makkelijk, maar kan later voor kopzorgen zorgen, dat wil je echt zoveel mogelijk voorkomen tenzij het echt niet anders kan.
Dankjewel, dat werkte inderdaad. Het enige probleem is dus nu, omdat eigenlijk alles in verschillende .elementor-widget-containers zit, dat alle "<h5>"-tags daardoor aangepast zullen worden. Hoe ik dat ga oplossen moet ik inderdaad dan nog even opzoeken, maar voorlopig is de makkelijkste oplossing die tag niet meer te gebruiken. Nu gebruikte ik die tag toch eigenlijk nooit maarja. :P

Een cursusje HTML en CSS is inderdaad handig, momenteel gebruik ik vooral guides wanneer ik problemen heb of ik zoek voorbeelden die ik dan aanpas en overtype. Echter was dit wel een vrij lastige aangezien dit meer een "grammatica"-issue is dan een woordenschat-issue.

Zo is het na 4 weken vragen op de Wordpress forums nog steeds niet gelukt om de websitenaam naast het websitelogo te krijgen, maar we zijn onderweg in ieder geval. :)

Bedankt voor de uitleg met betrekking tot de style-attribuut. d:)b

Voeg me gewoon toe op LinkedIn, iedereen is welkom!


  • CH4OS
  • Registratie: April 2002
  • Niet online

CH4OS

It's a kind of magic

Frozen schreef op woensdag 10 oktober 2018 @ 00:43:
Dankjewel, dat werkte inderdaad. Het enige probleem is dus nu, omdat eigenlijk alles in verschillende .elementor-widget-containers zit dat alle "<h5>"-tags daardoor aangepast zullen worden. Hoe ik dat ga oplossen moet ik inderdaad dan nog even opzoeken, maar voorlopig is de makkelijkste oplossing die tag niet meer te gebruiken. Nu gebruikte ik die tag toch eigenlijk nooit maar toch. :P
De betreffende tag een eigen class meegeven (of een id als het toch uniek is) en daar naar verwijzen in de CSS, dan wordt dus alleen die h5 gestyled. ;) Of anders het style-attribuut gebruiken, maar dan worden de properties in dat attribuut altijd gebruikt / overschreven. Dat krijgt een hogere prio voor CSS-begrippen.
Zo is het na 4 weken vragen op de Wordpress forums nog steeds niet gelukt om de websitenaam naast het websitelogo te krijgen, maar we zijn onderweg in ieder geval. :)
Dat is in de templates, heb ik zo 1 2 3 ook niet meer voor de geest, is lang geleden dat ik met WordPress templates bezig was. :+

EDIT:
Voor wat ik zo een twee drie kan vinden is wp_title(); de functie in PHP die je kan aanroepen in het WordPress thema om de titel van de site weer te geven. Al heeft deze functie wel ooit op de schietstoel gezeten, dus wellicht gaat dat in de toekomst weer gebeuren. ;)

[Voor 13% gewijzigd door CH4OS op 10-10-2018 00:53]


  • Frozen
  • Registratie: Oktober 2010
  • Laatst online: 27-01 14:58

Frozen

2e Reviewer van het Jaar

Topicstarter
CH4OS schreef op woensdag 10 oktober 2018 @ 00:46:
[...]
De betreffende tag een eigen class meegeven (of een id als het toch uniek is) en daar naar verwijzen in de CSS, dan wordt dus alleen die h5 gestyled. ;) Of anders het style-attribuut gebruiken, maar dan worden de properties in dat attribuut altijd gebruikt / overschreven. Dat krijgt een hogere prio voor CSS-begrippen.


[...]
Dat is in de templates, heb ik zo 1 2 3 ook niet meer voor de geest, is lang geleden dat ik met WordPress templates bezig was. :+

EDIT:
Voor wat ik zo een twee drie kan vinden is wp_title(); de functie in PHP die je kan aanroepen in het WordPress thema om de titel van de site weer te geven. Al heeft deze functie wel ooit op de schietstoel gezeten, dus wellicht gaat dat in de toekomst weer gebeuren. ;)
offtopic:
Ook dat is uiteindelijk gelukt. Mijn vorige post stond al een maand op de WP forums, maar zonder reactie. Gisteravond nogmaals gepost en nu wel een reactie! For future reference: https://wordpress.org/sup...t-to-title/#post-10767294 :)

Voeg me gewoon toe op LinkedIn, iedereen is welkom!


  • prakka
  • Registratie: Oktober 2009
  • Laatst online: 20:58
Frozen schreef op woensdag 10 oktober 2018 @ 00:43:
[...]

Bedankt, maar helaas werkte het niet! :P


[...]

Dankjewel, dat werkte inderdaad. Het enige probleem is dus nu, omdat eigenlijk alles in verschillende .elementor-widget-containers zit, dat alle "<h5>"-tags daardoor aangepast zullen worden. Hoe ik dat ga oplossen moet ik inderdaad dan nog even opzoeken, maar voorlopig is de makkelijkste oplossing die tag niet meer te gebruiken. Nu gebruikte ik die tag toch eigenlijk nooit maarja. :P

Een cursusje HTML en CSS is inderdaad handig, momenteel gebruik ik vooral guides wanneer ik problemen heb of ik zoek voorbeelden die ik dan aanpas en overtype. Echter was dit wel een vrij lastige aangezien dit meer een "grammatica"-issue is dan een woordenschat-issue.

Zo is het na 4 weken vragen op de Wordpress forums nog steeds niet gelukt om de websitenaam naast het websitelogo te krijgen, maar we zijn onderweg in ieder geval. :)

Bedankt voor de uitleg met betrekking tot de style-attribuut. d:)b
Als je nog hulp nodig hebt met de titel, kan je mij altijd een pm sturen.

  • Frozen
  • Registratie: Oktober 2010
  • Laatst online: 27-01 14:58

Frozen

2e Reviewer van het Jaar

Topicstarter
prakka schreef op woensdag 10 oktober 2018 @ 15:29:
[...]


Als je nog hulp nodig hebt met de titel, kan je mij altijd een pm sturen.
Dankjewel, maar het is opgelost. Zie ook:
Frozen schreef op woensdag 10 oktober 2018 @ 14:39:
[...]

offtopic:
Ook dat is uiteindelijk gelukt. Mijn vorige post stond al een maand op de WP forums, maar zonder reactie. Gisteravond nogmaals gepost en nu wel een reactie! For future reference: https://wordpress.org/sup...t-to-title/#post-10767294 :)

Voeg me gewoon toe op LinkedIn, iedereen is welkom!

Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee