css van een grid pagina
Ik heb een klein probleempje waar ik zelf niet uitkom.
De producten op mijn webshop worden op categorie pagina mooi getoond maar op artikel pagina minder!!! deze staan namelijk niet aan de rechte klant van het scherm. Alle pagina's zijn met Grid gemaakt.
kan ik iemand door privé massage de link naar de pagina geven zodat via inspecteren kun zien wat en waar aangepast moet worden?
Alvast bedankt voor de moeite.
Eh, gooi het in de groep! Als iedereen via privé bericht gaat antwoorden heb je geen overzicht.
alle product pagina's worden aan de rechte klant getoond.
https://www.kitchenetteonline.nl/Kitchenette-180cm-incl-inbouw-koelkast-en-vaatwasser-RAI-2020
Haal de 'col-md-9' eens weg?
Edit:
Onnodig bericht verwijderd. We mogen hier ook gewoon advies geven.
Gewijzigd op 16/10/2019 13:56:55 door - Ariën -
Als ik deze weghaal:
"col-xs-12 col-md-9"
Dan staat precies goed zoals ik het wil maar ik kan niet bij HTML code zou u een css code kunnen doorgeven waarmee het waarmee ik de class-naam kan wijzigen!!!
het staat in de HTML code als volgd:
<div class="col-xs-12 col-md-9">
Alvast dank voor de moeite.
Dit is wel de enige juiste weg.
Is er geen ander oplossing voor? ik wil namelijk op product pagina net onder de prijs nog een Button (ontwerp je eigen keunen) plaatsen maar dat kan ook niet !!!!
Hoop dat hier een oplossing voor is.
Uit een eerdere ervaring met hun zijn ze hier erg behulpzaam in, hoor. :-)
Ja dat is ook zo maar dat valt onder betaalde diensten van ccvshop ik zou hem zelf op een ander manier willen oplossen maar dat kan dus niet! kan ik het niet met css omzeilen!!!???
Volgens mij kan je bij CCV toch ook een eigen template toevoegen (via hun klantenservice), die je in eigen beheer hebt? Of werk je nu vanuit een standaard template die ze aanbieden?
nee ik werk nu inderdaad met een soort eigen template en kan bij ProTom (hoe die ook heet) maar zoals ik al zie je kan toch niet bij product pagina, ik het het nagevraagd en dat kan zeker niet dat laten zij niet toe oid, waarom? weet ik ook niet, ik heb in de Header die gele button zelf aan toegevoegd en zodoende kom ik in de wereld van Grid binnen!!! helemaal nieuw maar erg leuk om te leren en te werken....
Misschien moet je dan toch wel akkoord gaan dat ze de ondersteuning alleen bieden als je ervoor betaalt.
Maar voor de vrije mogelijkheden die je dan hebt, dan lijkt het mij wel waard.
Gewijzigd op 16/10/2019 23:00:27 door - Ariën -
Bedankt voor de moeite tot zover wellicht kom ik hierop terug om te laten weten hoe het opgelost is.
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$(function(){
if(!$('#sidebar').text().trim()) $('#sidebar').hide();
});
</script>
$(function(){
if(!$('#sidebar').text().trim()) $('#sidebar').hide();
});
</script>
Ik vind het niet eens zo'n hele ranzige hack (als ie niet werkt, zit je hooguit weer met die lege vlek links, maar er gaat niks stuk - denk/hoop/vermoed ik).
Gewijzigd op 17/10/2019 00:03:38 door Rob Doemaarwat
Dank voor uw tip, hij werkt perfect maar mag ik een opmerking maken dat de artikel lijnt u links uit (zoals ik het graag wou) maar aan de rechte kant is nog ruimte, kan ik het 100% breed maken? ik ben sowieso erg blij met uw oplossing hoor maar dit is een extraatje.
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$(function(){
if(!$('#sidebar').text().trim()) $('#sidebar').hide().next().css('width','100%');
});
</script>
$(function(){
if(!$('#sidebar').text().trim()) $('#sidebar').hide().next().css('width','100%');
});
</script>
Hiermee wordt het wel wat tricky-er, omdat een wijziging in de template er voor kan zorgen dat de volgorde van de <div>'s wijzigt, en dan werkt die next() dus niet meer zoals bedoeld.
Toevoeging op 17/10/2019 23:37:00:
o mag ik nog wat vragen:
op de product pagina wil ik onder de bestel knop ook zo'n gele knop (ontwerp zelf je keuken) plaatsen! is dat ook mogelijk?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script>
$(function(){
//hide sidebar
if(!$('#sidebar').text().trim()) $('#sidebar').hide().next().css('width','100%');
//add extra button
$('#OrderButton1').after('<input onclick="window.location.href=\'https://www.kitchenetteonline.nl/Keuken-Configurator\'" style="width: 100%; padding: 3px; cursor: pointer; box-shadow: 6px 6px 5px; #999; -webkit-box-shadow: 6px 6px 5px #999; -moz-box-shadow: 6px 6px 5px #999; font-weight: bold; background: #ffff00; color: #000; border-radius: 10px; border: 1px solid #999; font-size: 150%; margin-top: 10px" type="button" value="Ontwerp zelf je keuken" />');
});
</script>
$(function(){
//hide sidebar
if(!$('#sidebar').text().trim()) $('#sidebar').hide().next().css('width','100%');
//add extra button
$('#OrderButton1').after('<input onclick="window.location.href=\'https://www.kitchenetteonline.nl/Keuken-Configurator\'" style="width: 100%; padding: 3px; cursor: pointer; box-shadow: 6px 6px 5px; #999; -webkit-box-shadow: 6px 6px 5px #999; -moz-box-shadow: 6px 6px 5px #999; font-weight: bold; background: #ffff00; color: #000; border-radius: 10px; border: 1px solid #999; font-size: 150%; margin-top: 10px" type="button" value="Ontwerp zelf je keuken" />');
});
</script>
Als je overigens ook de CSS aan kunt passen/invoegen, dan zou het netter zijn om die hele style="..." riedel in een CSS blok te zetten, en dan beide buttons enkel nog een class="ontwerp-zelf-je-keuken" mee te geven:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
input.ontwerp-zelf-je-keuken{
width: 100%;
padding: 3px;
cursor: pointer;
box-shadow: 6px 6px 5px; #999;
-webkit-box-shadow: 6px 6px 5px #999;
-moz-box-shadow: 6px 6px 5px #999;
font-weight: bold;
background: #ffff00;
color: #000;
border-radius: 10px;
border: 1px solid #999;
font-size: 150%;
}
#OrderButton1 + input.ontwerp-zelf-je-keuken{
margin-top: 10px
}
</style>
<script>
$(function(){
//hide sidebar
if(!$('#sidebar').text().trim()) $('#sidebar').hide().next().css('width','100%');
//add extra button
$('#OrderButton1').after('<input onclick="window.location.href=\'https://www.kitchenetteonline.nl/Keuken-Configurator\'" class="ontwerp-zelf-je-keuken" type="button" value="Ontwerp zelf je keuken" />');
});
</script>
input.ontwerp-zelf-je-keuken{
width: 100%;
padding: 3px;
cursor: pointer;
box-shadow: 6px 6px 5px; #999;
-webkit-box-shadow: 6px 6px 5px #999;
-moz-box-shadow: 6px 6px 5px #999;
font-weight: bold;
background: #ffff00;
color: #000;
border-radius: 10px;
border: 1px solid #999;
font-size: 150%;
}
#OrderButton1 + input.ontwerp-zelf-je-keuken{
margin-top: 10px
}
</style>
<script>
$(function(){
//hide sidebar
if(!$('#sidebar').text().trim()) $('#sidebar').hide().next().css('width','100%');
//add extra button
$('#OrderButton1').after('<input onclick="window.location.href=\'https://www.kitchenetteonline.nl/Keuken-Configurator\'" class="ontwerp-zelf-je-keuken" type="button" value="Ontwerp zelf je keuken" />');
});
</script>
Gewijzigd op 18/10/2019 01:43:00 door Rob Doemaarwat
Ik kan ook inderdaad bij op css pagina. Heb uw code daar op neer gezet maar zie de gele knop niet op product pagina wellicht heb ik wat fout gedaan.
Graag hoor ik wat u hiervan vindt.
Sowieso staat elke snippet van hierboven er nu in. Alleen de laatste volstaat (de sidebar wordt nu 3x verborgen ...). Daarnaast moet de "add extra button" code ook in de $(function(){...}), anders wordt ie te vroeg uitgevoerd (ik zag dat ook pas later, heb dat om 01:43 dus nog even aangepast ;-) ).
Ik heb de code in css geplaatst maar zie helaas nog steeds de gele button niet! wellicht heb ik wat fout gedaan!!!