Code: Select all
<script>
$(function () {
$('.col-lg-3.col-md-3.col-sm-6.col-xs-12').removeClass('col-lg-3 col-md-3').addClass('col-lg-4 col-md-4');
});
</script>http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
First: mark your product div with some class in my case this is "myClass". Here is the code:
Code: Select all
<script type="text/javascript">
$(document).ready(
function() {
$('.myClass').each(
function(index) {
var divclass = 'col-lg-12 col-md-12';
if (!(this.closest('#column-right')) && !(this.closest('#column-left'))) { // if we are in content area check the layout
cols = $('#column-right, #column-left').length; // how many columns we have
// 2 columns - left, right and content - smallest content area - 2 boxes on row
if (cols==2)
divclass = 'col-lg-6 col-md-6 col-sm-12 col-xs-12';
// 1 column - left or right and content - 3 boxes on row
if (cols==1)
divclass = 'col-lg-4 col-md-4 col-sm-8 col-xs-12';
// only content - largest content area - 4 boxes on row
if (cols==0)
divclass = 'col-lg-3 col-md-3 col-sm-2 col-xs-12';
}
$(this).addClass(divclass);
}
)
}
);
</script>
AnyList extension (free) - Stop clone "featured", now you can display product selections anywhere
Send Cart - Let's visitors (incl.anonymous) to send your cart by email and restore it for later use
Cross Sell - Sell more on each visitor with automatic suggestion of more products
Advanced Search - Adaptive search by everything (attributes, sku, ean, jpc, isbn etc.)
I've opened up the "/catalog/view/theme/default/stylesheet/stylesheet.css"
I thought it was somewhere here
#column-left + #content .product-layout .col-md-3 {
width: 23%;
But changing that % does nothing at least not on my site...
Any help would be appreciated.
palex wrote:I've just developed a short script which you could use in your template.
First: mark your product div with some class in my case this is "myClass". Here is the code:Code: Select all
<script type="text/javascript"> $(document).ready( function() { $('.myClass').each( function(index) { var divclass = 'col-lg-12 col-md-12'; if (!(this.closest('#column-right')) && !(this.closest('#column-left'))) { // if we are in content area check the layout cols = $('#column-right, #column-left').length; // how many columns we have // 2 columns - left, right and content - smallest content area - 2 boxes on row if (cols==2) divclass = 'col-lg-6 col-md-6 col-sm-12 col-xs-12'; // 1 column - left or right and content - 3 boxes on row if (cols==1) divclass = 'col-lg-4 col-md-4 col-sm-8 col-xs-12'; // only content - largest content area - 4 boxes on row if (cols==0) divclass = 'col-lg-3 col-md-3 col-sm-2 col-xs-12'; } $(this).addClass(divclass); } ) } ); </script>
Users browsing this forum: No registered users and 14 guests
