X-Cart forums - X-Cart - reBOOT - Responsive Template

X-Cart forums (https://forum.x-cart.com/index.php)

- Third Party Add-Ons for X-Cart 4 (https://forum.x-cart.com/forumdisplay.php?f=45)

- - X-Cart - reBOOT - Responsive Template (https://forum.x-cart.com/showthread.php?t=66570)

Re: X-Cart - reBOOT - Responsive Template

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

Re: X-Cart - reBOOT - Responsive Template

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?

Re: X-Cart - reBOOT - Responsive Template

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.

Re: X-Cart - reBOOT - Responsive Template

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.

Re: X-Cart - reBOOT - Responsive Template

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

Re: X-Cart - reBOOT - Responsive Template

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?

Re: X-Cart - reBOOT - Responsive Template

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;

       }

}

Re: X-Cart - reBOOT - Responsive Template

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

Re: X-Cart - reBOOT - Responsive Template

Try...

Quote:

width: auto;
max-width: Xpx;

Re: X-Cart - reBOOT - Responsive Template

Phil, still not working. :(