Margins textwidget in custom header widget area

jma_christenhusz
(@jma_christenhusz)

5 jaren, 6 maanden geleden

Hi there,

Recently I added a custom header widget area on my website (Minnow child theme). To the area I appointed a textwidget which, in combination with the Content Views plugin, shows my ‘featured’ posts.

As I am not too happy with the standard margins of the textwidget, I tried to customize these through the google chrome ‘inspect element’ function. I.e.:
1) right click on the textwidget area
2) select the right widget class in the inspector (which corresponds to ‘textwidget’)
3) use the + button in the ‘styles’ pane to enter a few lines of code for the desired margins:

.textwidget {
margin-top: 30px;
margin-bottom: 80px;
}

So far, so good… after these steps the page shows the desired margins.
However, I can’t seem to ‘save’ my changes. When I refresh the page my changes are lost.

I also tried to enter and save the css-code in my child-theme style.css, but this seems to have no effect at all.

Any advice on to how to make this work?

Best!

JC

De blog waarbij ik hulp nodig heb is http://www.joepchristenhusz.com.

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

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

Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

5 jaren, 6 maanden geleden
Hallo,

Dit is het Nederlandstalige forum dus graag je vraag in het Nederlands stellen.

Groet,
Jeroen
- Deze reactie is gewijzigd 5 jaren, 6 maanden geleden door Jeroen Rotty.
- Deze reactie is gewijzigd 5 jaren, 6 maanden geleden door Jeroen Rotty.
Thread starter jma_christenhusz
(@jma_christenhusz)

5 jaren, 6 maanden geleden

Hallo daar,

Onlangs heb ik een custom header widget area op mijn website toegevoegd (Minnow child-thema). In de area heb ik een textwidget geplaatst die, in combinatie met de plug-in Content Views, mijn ‘uitgelichte’ berichten toont.

Omdat ik niet zo blij ben met de standaardmarges van de textwidget, heb ik geprobeerd deze aan te passen via de functie ‘inspecteer element’ van google chrome. D.w.z.:
1) ik klik met de rechtermuisknop op het tekstwidget-gebied en selecteer de inspector
2) selecteer de juiste widgetklasse in de inspector (wat overeenkomt met ’textwidget’)
3) gebruik de knop ‘+’ in het deelvenster ‘Stykes’ om enkele regels code in te voeren voor de gewenste marges:

.textwidget {
margin-top: 30px;
margin-bottom: 80px;
}

Tot zover geen problemen … na deze stappen toont de pagina de gewenste marges.
Ik kan mijn wijzigingen echter niet ‘opslaan’. Wanneer ik de pagina vernieuw, gaan mijn wijzigingen verloren.

Ik probeerde ook bovenstaande CSS-code in mijn child-theme style.css in te voeren en op te slaan, maar dit lijkt helemaal geen effect te hebben op de weergave van de pagina.

Iemand tips?

Dank en groet,
JC

Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

5 jaren, 6 maanden geleden

Hallo,

Ik zie nergens een textwidget op je site? Heb je een rechtstreekse link waar zo’n widget staat?

Als het stukje CSS ook niet werkt in je style.css van het childtheme, dan moet je misschien !important invoegen op de 2 regels net voor de ;

Hou ook rekening mee dat er cache kan zijn die je eventueel moet legen.

Groet,
Jeroen

Thread starter jma_christenhusz
(@jma_christenhusz)

5 jaren, 6 maanden geleden

Dag Jeroen,

Ik had de nieuwe versie van mijn site (die met de textwidget onder de header) nog niet online gezet. Nu wel.

!important in de child-style.css invoegen heeft niet het gewenste effect.

Wat ik wil bereiken:
– tussen ‘UITGELICHT’ en de widget een margin-top van 30px
– tussen de widget en de posts daaronder ene margin-bottom van 80px

Als je tips hebt hoor ik het graag!

Groet,

Joep
Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

5 jaren, 6 maanden geleden
Hallo Joep,

Je hebt in je CSS ook fouten, zoals
.chw-title {font-size: 25px font-size: 2.5rem;}

Dat staat in style.css regel 134.

Ik zie op de div.textwidget sowieso al 30px top en 70px bottom actief. Zie screenshot.

Dus dat lijkt al zo te zijn (als je 70 in 80 vervangt uiteraard).

Groet,
Jeroen
- Deze reactie is gewijzigd 5 jaren, 6 maanden geleden door Jeroen Rotty.
- Deze reactie is gewijzigd 5 jaren, 6 maanden geleden door Jeroen Rotty.
Thread starter jma_christenhusz
(@jma_christenhusz)

5 jaren, 6 maanden geleden

Dag Jeroen,

Veel dank voor je bericht!

Na wat proberen (en een reboot van m’n laptop) bleken de margins ineens te werken inderdaad.

Die CSS-fout is een poging om de titel van de textwidget (‘Uitgelicht’) even groot te krijgen als de ondertitel in de header (‘over muziek’). Kun je me zeggen wat ik fout doe?

Groet!

Joep

Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

5 jaren, 6 maanden geleden

Hallo Joep,

Als je die bottom aanpast naar een lagere waarde, pak weg 35px op .textwidget heb je bovenaan en onderaan een gelijke witruimte.

Groet,
Jeroen

Thread starter jma_christenhusz
(@jma_christenhusz)

5 jaren, 6 maanden geleden

Thnx! Maar ik bedoelde eigenlijk de letter-grootte. De header-subtitle is 25px, de textwidget-title lijkt groter. Is er een manier om die grootte gelijk te krijgen?

HG,

Joep

Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

5 jaren, 6 maanden geleden

Er staat op die site description inderdaad een andere waarde (2.5rem, na de 25px)

Voeg dit toe aan je extra CSS:
`.site-description {
font-size: 25px;
}

Dan is dat de laatste waarde die ingeladen moet worden dus zou dat moeten lukken, lukt dat niet dan kan je er !important na zetten (net voor de 😉

Groet,
Jeroen

Thread starter jma_christenhusz
(@jma_christenhusz)

5 jaren, 6 maanden geleden

Maar die site description is wel ok! Ik zou echter de titel van de textwidget in dezelfde grootte willen hebben. Ik zoek dus een CSS-code die de lettergrootte van de textwidget-titel aanpast naar 25 px.

(vandaar mijn foutieve poging die je eerder opmerkte: .chw-title {font-size: 25px font-size: 2.5rem;})
Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

5 jaren, 6 maanden geleden
Dan had je het bijna juist, maar er moet een ; tussen de 2 waardes.
```
.chw-title{
font-size: 25px;
font-size: 2.5rem;
}
```
Je kan het gewoon kopieren van de andere CSS klasse hé…

Excuses om het omgekeerd te interpreteren.

Groet,
Jeroen
- Deze reactie is gewijzigd 5 jaren, 6 maanden geleden door Jeroen Rotty.
- Deze reactie is gewijzigd 5 jaren, 6 maanden geleden door Jeroen Rotty.
Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

5 jaren, 6 maanden geleden

Hoi,

Is dit dan opgelost? Graag dit topic dan op opgelost plaatsen.

Groet,
Jeroen

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

Het onderwerp ‘Margins textwidget in custom header widget area’ is gesloten voor nieuwe reacties.

Weergaven