X-Cart - reBOOT - Responsive Template

PhilJ · #**871** 03-06-2015, 02:13 PM

Product Configurator module compatibility added for reBOOT v3 - if you need it, get in touch for updated files.

(You'll need the Product Configurator / Wizard module installed, which is part of X-Cart Platinum).

DEMO

Pitak · #**872** 03-09-2015, 01:48 AM

Phil, I've requested a feature to help make images in product descriptions to be responsive earlier in this thread. I've come across this page:

http://www.rockettheme.com/docs/joomla/basic/creating_responsive_content.md

It has something like a custom class which you can wrap your image in. Is there something like this available in reBOOT?

PhilJ · #**873** 03-09-2015, 01:54 AM

Quote:

It has something like a custom class which you can wrap your image in. Is there something like this available in reBOOT?

You can add class="img-responsive" to your description images, or class="img-responsive img-center" to center them also.

http://getbootstrap.com/css/#images

Or, set a global CSS rule for images in the product description containers, eg. add to skin/reboot/css/reboot.css

Code:

.descr_block img, .product-description img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

Then in...
skin/reboot/custom/product_details_standard.tpl
skin/reboot/custom/product_details_tabs_accordions.tpl
skin/reboot/custom/product_details_tabs_accordions_on_top.tpl
skin/reboot/customer/main/product.tpl

Replace...

Code:

<span itemprop="description">

With...

Code:

<span itemprop="description" class="product-description">

Demo here.

PhilJ · #**874** 03-13-2015, 09:13 AM

Add a trendy 'sticky' header in 2 quick steps (v3)...

Demo (header style #3, boxed header - for other styles you'll need to tweak the CSS below).

1) In skin/reboot/js/reboot.js

At the end insert...

Code:

// STICKY HEADER
//-----------------------

$(window).scroll(function() {
  if ($(document).scrollTop() > 150 && window.innerWidth >= 992) {
    $('.container_header').addClass('shrink');
  } else {
    $('.container_header').removeClass('shrink');
  }
});

2) In skin/reboot/css/reboot.css

At the end insert...

Code:

/* STICKY HEADER
-----------------------------*/

.container_header { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; position: relative; }
.container_header.shrink { width: 1170px !important; position: fixed; top: 0; padding: 0px; background: rgba(0,0,0,0.7); z-index: 9999; }
.container_header.shrink img.header_logo { height: 65px; width: auto; }
.container_header.shrink .header_padding_top_search { padding: 10px !important; }
.container_header.shrink .header_padding_top_buttons { padding: 15px !important; }
@media only screen and (max-width: 1199px) {
    .container_header.shrink { width: 970px !important; }
}
@media only screen and (max-width: 991px) {
    .container_header.shrink { width: auto; position: relative; padding: auto; background: inherit; }
}

Note, appears in 992px wide and up only.
Looks better if you have a transparent PNG logo image.

elmirage001 · #**875** 03-13-2015, 07:45 PM

Quote:

Originally Posted by PhilJ

Add a trendy 'sticky' header in 2 quick steps (v3).

Very Cool Phil! I was going to relax my brain but now after seeing this it's in hyper-drive thinking of cool things I can do!

Thank you! Paul

Pitak · #**876** 03-14-2015, 06:19 AM

Phil, the responsive images code above blows up all small images to 100% width too. Is it possible to only apply the code only to images that has more than 650px width?

PhilJ · #**877** 03-15-2015, 05:07 AM

Maybe try...

Code:

.descr_block img, .product-description img {
       width: 100%;
       max-width: 100%;
       height: auto;
}
@media only screen and (max-width: 650px) {
       .descr_block img, .product-description img {
             width: auto;
       }
}

Pitak · #**878** 03-15-2015, 05:34 AM

Thanks, Phil. However all small images are still enlarged to 100% width.

PhilJ · #**879** 03-15-2015, 05:48 AM

Try...

Quote:

width: auto;
max-width: Xpx;

Pitak · #**880** 03-15-2015, 08:09 PM

Phil, still not working.