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

Quote:

In my product detail page next previous option is not showing.How to bring that?

Ensure the feature is enabled in general settings > appearance
The feature had a bug when first introduced - see here
Maybe check your logs in var/log

Quote:

how to to display uniform display for large monitor,extra large monitor and normal monitor same in reboot v2?

You can tweak the media queries for specific screen widths in skin/reboot/css/reboot_media_queries.css

Re: X-Cart - reBOOT - Responsive Template

Quote:

Originally Posted by PhilJ

You can tweak the media queries for specific screen widths in skin/reboot/css/reboot_media_queries.css

Hi Phil,

I have tried to set container width to: .container { width: 960px; } .

This does make the column width 960. However on a smaller device, it still removes the side category links (makes them responsive - and shows them at the bottom of the page).

I think what some people want (me included), is the site to show up as a desktop site on smaller screens, with the side menu intact.

Would this involve generating css from the bootstrap site? Will the auto-generated css (leaving out the responsive aspects), work with reboot Version 2?

By the way, I have reboot V1 live right now and am loving it. Version 1 is a little less responsive and does show up with categories on the left - on a 800 width tablet for example. (On V2, this same site is responsive and the menu moves to the bottom).

Version 1 is also less responsive on a desktop - Using Version 2 on a 1024 width moniter, if you shrink the browser width at all - it makes the site responsive and moves the side menu to the bottom.

Re: X-Cart - reBOOT - Responsive Template

Hi Phil,
Thanks now next previous is working.Thank you very much.

Can you please let me know if mega menu addons will be released for version 2?

How can I add manufacturer in mega menu?

How to display 4 products or 5 products always irrespective of small or large monitors?

How Can I add two different tabs similar like feedback in the left hand side or righ hand side sidebar?

Thanks for a nice template.

Re: X-Cart - reBOOT - Responsive Template

Quote:

Would this involve generating css from the bootstrap site? Will the auto-generated css (leaving out the responsive aspects), work with reboot Version 2?

Constanza, have you thought about upgrading to v2? It's free and fairly easy, but requires v4.6.1.

Obviously these days, there's a huge variety of devices with differing screen sizes.

reBOOT v2 behaves like this with the most common widths... (as per Bootstrap 3's default responsiveness)

http://www.xcartmods.co.uk/reboot/461/reboot_testing_tool.html

Mobile Portrait - W320px (responsive)
Mobile Landscape - W480px (responsive)
Small Tablet - W768px (responsive)
Tablet / Small Desktop - W1024px (normal)
Medium Desktop Upwards - W1280px and above (normal)

To change the .container class width, depending on screen widths, use this example code...

Code:

@media (min-width: 1024px) {

.container { width: 960px; }

}

Quote:

Can you please let me know if mega menu addons will be released for version 2?

In v2, mega menus are built in. Just enable them in the reBOOT settings.

Quote:

How can I add manufacturer in mega menu?

I have added a new option to display manufacturers in the mega menu...

Post a support ticket for instructions.

Quote:

How to display 4 products or 5 products always irrespective of small or large monitors?

You need to edit skin/reboot/css/reboot_media_queries.css

Set the # of columns according to the media queries...

Code:

ul.grid_view li { width: 25%; }

1 column = 100%
2 columns = 50%
3 columns = 33.33%
4 columns = 25%
5 columns = 20%
6 columns = 16.66%

I wouldn't advise it for smaller widths, as the product listing layout may appear squished for some devices.

Quote:

How Can I add two different tabs similar like feedback in the left hand side or righ hand side sidebar?

Possible with the inbuilt code, like the theme switcher widget, but would need to be custom coded. Contact for quote.

Re: X-Cart - reBOOT - Responsive Template

Quote:

Originally Posted by PhilJ

Hi Phil,

I have V2 ready on a development domain, but don't like that it is more responsive than V1. I want to make the switch to V2, mostly for the "add to cart" fix, but also a couple other fixes.

My customers are older and many will have screens 1024 width or less. A customer with a 1024 screen open anything less than maximum, or with a 'bookmarks' tool bar open, the category menu 'turns responsive' and moves to the bottom. (I can view reboot V1 on a 1024 width monitor, with a 'bookmarks toolbar' open, and the categories will be on the left as I want.)

The same is true on tablets with portrait view. It goes responsive on a 10" samsung on portrait or an Ipad mini. With version 1, it does show fine on the portrait view of a tablet (with categories in a left hand column). I can live with the level of responsiveness of reboot V1.

Sorry, I realize I bought a responsive template. I actually would have preferred not responsive, but chose your template because I like it better than anything else available.

Re: X-Cart - reBOOT - Responsive Template

ok, understood.

You can tweak the .container widths for specific screen widths in a variety of ways like this...

Code:

@media only screen and (min-width: 1024px) {

    .container { width: 960px; }

}



@media only screen and (max-width: 1024px) {

    .container { width: 960px; }

}



@media only screen and (min-width: 1024px) and (max-width: 1280px) {

    .container { width: 960px; }

}

Etc.

In v1, you can add the code to the bottom of skin/reboot/css/reboot.css

In v2, media queries are in a separate CSS file.

Screenfly is a useful tool for testing various screen widths / devices.

Re: X-Cart - reBOOT - Responsive Template

Quote:

Originally Posted by PhilJ

ok, understood.

You can tweak the .container widths for specific screen widths in a variety of ways like this...

Code:

@media only screen and (min-width: 1024px) {

    .container { width: 960px; }

}



@media only screen and (max-width: 1024px) {

    .container { width: 960px; }

}



@media only screen and (min-width: 1024px) and (max-width: 1280px) {

    .container { width: 960px; }

}

Those changes do make the width 960, but the site is still responsive. The side menu goes to the bottom and the header centers everything.

Re: X-Cart - reBOOT - Responsive Template

The code is an example, you tweak it how you want it.

Re: X-Cart - reBOOT - Responsive Template

I have been trying to tweak the code, but the site is still responsive. I can set the container widths to a specific size, but this does not stop the menus from all going responsive.

- I can not stop the header from going to 1 column on a screen smaller than 1000.
- I can not stop the side menu from moving to the bottom on a screen smaller than 1000.
- I can not stop the footer menu from going to 1 column on a screen smaller than 1000.

Am I missing something?

Re: X-Cart - reBOOT - Responsive Template

You're not going to be able to stop the header / footer going responsive with v1. This is because v1 uses Bootstrap 2.

Provision is given in Bootstrap 3 to disable responsiveness as you wish...

http://getbootstrap.com/getting-started/#disable-responsive
http://getbootstrap.com/examples/non-responsive/

In addition to setting .container widths, you would need to modify the header / main content / footer columns...

For example, replacing...

Code:

<div class="col-md-6">

With...

Code:

<div class="col-xs-6 col-md-6">

v2 was made largely because of the better flexibility of Bootstrap 3.