WooCommerce & Lambda-theme-storing: verschil tussen versies
k (Jeroen Strompf heeft pagina Vormgeving WooCommerce Shop Page hernoemd naar Vormgeving-fout WooCommerce Shop Page) |
k (Jeroen Strompf heeft pagina Vormgeving-fout WooCommerce Shop Page hernoemd naar WooCommerce & Lambda-theme-storing) |
||
(7 tussenliggende versies door dezelfde gebruiker niet weergegeven) | |||
Regel 1: | Regel 1: | ||
+ | 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) | 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) | ||
Regel 4: | Regel 8: | ||
| | | | ||
|[[file:20170411-1622.png|thumb|'''Shop & Product Page:''' Instellingen WooCommerce ''Shop & Product Page''. Verder weinig spannends over te melden]] | |[[file:20170411-1622.png|thumb|'''Shop & Product Page:''' Instellingen WooCommerce ''Shop & Product Page''. Verder weinig spannends over te melden]] | ||
− | |[[file:20170411-1623.png|thumb|'''Het probleem:''' Content | + | |[[file:20170411-1623.png|thumb|'''Het probleem:''' Content op de shop-pagina beslaat slechts de helft van de breedte]] |
+ | |} | ||
+ | |||
+ | == Vermoedelijke oorzaak == | ||
+ | |||
+ | {| | ||
+ | | | ||
|[[file:20170411-1624.png|thumb|'''Vermoedelijke oorzaak:''' Deze CSS-code voor product layout wordt toegepast op de content]] | |[[file:20170411-1624.png|thumb|'''Vermoedelijke oorzaak:''' Deze CSS-code voor product layout wordt toegepast op de content]] | ||
|} | |} | ||
+ | == 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: | ||
+ | |||
+ | * <code>wp_enqueue_style</code> in <code>functions.php</code> schijnt de functie te zijn om eigen css-bestanden toe te voegen [https://developer.wordpress.org/reference/functions/wp_enqueue_style/] | ||
+ | * '''Naam:''' <code>custom.css</code> [http://wordpress.stackexchange.com/questions/87681/how-do-i-register-enqueue-a-custom-css-file] | ||
+ | * '''Locatie:''' De hoofdmap van een theme lijkt de standaardlocatie te zijn voor custom.css [http://wordpress.stackexchange.com/questions/87681/how-do-i-register-enqueue-a-custom-css-file] | ||
+ | |||
+ | == Oplossing == | ||
+ | |||
+ | Ik wil dit aanpassen: | ||
+ | |||
+ | <pre> | ||
+ | .col-md-6 { | ||
+ | width: 50% | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | maar alleen op de shop-pagina. Het moet dus alleen werken in een pad waarin eerst | ||
+ | |||
+ | <pre> | ||
+ | <body class="woocommerce-page"> | ||
+ | </pre> | ||
+ | |||
+ | voorkomt, en waar een paar statements verderop | ||
+ | |||
+ | <pre> | ||
+ | <div class="col-md-6 text-right"> | ||
+ | </pre> | ||
+ | |||
+ | voorkomt. Dat zijn dus twee ''klasses'' die niet direct op elkaar aansluiten. Da's niet zo moeilijk: | ||
+ | |||
+ | <pre> | ||
+ | .woocommerce-page .col-md-6 | ||
+ | { | ||
+ | width: 100% | ||
+ | } | ||
+ | </pre> | ||
+ | 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 == | == Bronnen == | ||
+ | |||
+ | ''' Het probleem ''' | ||
* http://www.kriesi.at/support/topic/shop-page-layout-messed-up/ | * 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 | * http://www.kimwoodbridge.com/how-to-fix-the-woocommerce-template-or-layout-problem/ ← Hoopvol | ||
+ | |||
+ | ''' Eigen css-code ''' | ||
+ | |||
+ | * http://wordpress.stackexchange.com/questions/58351/how-to-add-custom-css-file-in-theme | ||
+ | * https://developer.wordpress.org/reference/functions/wp_enqueue_style/ |
Huidige versie van 11 okt 2017 om 05:21
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_style
infunctions.php
schijnt 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