WooCommerce & Lambda-theme-storing
Zie ook CSS - Inleiding.
Het probleem
Zo snel ik content plaats op de WooCommerce shop-pagina, raakt de vormgeving in de war: De content neemt nog maar 50% van de ruimte in beslag, en vaak is de tekst ook nog eens rechts-uitgelijnd (zoals in RTL-talen)
Vermoedelijke oorzaak
Hoe voeg je eigen css-code toe?
In Drupal stop je je eigen css-code in een apart bestand fresh.css. Ongetwijfeld heeft WordPress ook zo'n oplossing:
wp_enqueue_styleinfunctions.phpschijnt de functie te zijn om eigen css-bestanden toe te voegen [1]- Naam:
custom.css[2] - Locatie: De hoofdmap van een theme lijkt de standaardlocatie te zijn voor custom.css [3]
Oplossing
Ik wil dit aanpassen:
.col-md-6 {
width: 50%
}
maar alleen op de shop-pagina. Het moet dus alleen werken in een pad waarin eerst
<body class="woocommerce-page">
voorkomt, en waar een paar statements verderop
<div class="col-md-6 text-right">
voorkomt. Dat zijn dus twee klasses die niet direct op elkaar aansluiten. Da's niet zo moeilijk:
.woocommerce-page .col-md-6
{
width: 100%
}
En klaar! De truuk is, dat bij een ascend selector van klasses, je een punt gebruikt, en een spatie tussen de namen van de twee klasses. Zonder spatie wordt het een ander soort selector.
Bronnen
Het probleem
- http://www.kriesi.at/support/topic/shop-page-layout-messed-up/
- http://www.kimwoodbridge.com/how-to-fix-the-woocommerce-template-or-layout-problem/ ← Hoopvol
Eigen css-code