Hikshop Bootsrap settings and Rockettheme

-- url of the page with the problem -- : xcelxray.chicagohosts.com/ ( sorry this will be live by end of week. Ha dot hide it for few days)
-- HikaShop version -- : 2.4
-- Joomla version -- : 3.4
-- PHP version -- : 5

I have multiple sites being built on older responsive joomla 3.4 Rockettheme templates.
They don't seem to support your bootstrap setting for responsive design. Every time I ennable it the divs break and I see them as stacked li content instead of columns.
Is there a way to globally add the required boostrap javacsript support? I have been override the static layouts with RT grids but that is very time intensive. being that they are one of the biggest template builders and you are one of the biggest ecommerce solutions has anyone else had this issue and what have you suggested to them. i don't see anything from search. I love your product and RTbutt it seems I am doing custom css or rebuilding the html on a regular basis now and feel I must be missing something.

Hi,

I'm not sure I understand all in your message.

They don't seem to support your bootstrap setting for responsive design. Every time I ennable it the divs break and I see them as stacked li content instead of columns.

HikaShop is currently just compatible with Bootstrap 2 ; like Joomla 3.4.
Joomla 3 provide CSS and Javascript from Bootstrap 2, the default backend and default template are using bootstrap 2 for the grid system.
Bootstrap 2 is the official and default grid system in Joomla 3 ; there are an hundred of grid system over the Internet.
But you might see in the different HikaShop views that we are using PHP constants for the grid system, like "HK_GRID_ROW" or "HK_GRID_COL_3" : if you take a look at the HikaShop helper, you will see the base of a dynamic grid 12 system that is still under development but which will be great once finished.

Is there a way to globally add the required boostrap javacsript support?

I'm sorry but I don't understand.

Regards,

I was told it was easy to install full blown bootstrap pretty easily via maxcdn... just add the link code(s) in my template's index.php file... before the closing </head>

getbootstrap.com/getting-started/#download-cdn

I will let you know what happens...LOL

Hi,

Be careful with the bootstrap version ; "getbootstrap" is for Bootstrap 3, HikaShop and Joomla are using Bootstrap 2.
(but the implémentation of Boostrap 3 is in progress)

Regards,

Just so all RT people know. Its best to get layouts all done and then swap the divs classes to RTs responsive classes in the overrrides.

Either....
<div class="rt-demo-width-50">
or newer is this.
<div class="gantry-width-block gantry-width-50">

Just be sure your set on your columns. As the percentage is based on how many columns. 50 is 2 column
3 column is 33 four column is 25..etc.
Takes a little time but then it is fully integrated and smooth as butter.

Hi Mate, this thread really interests me as I use rockettheme templates to build all my sites and struggle with making my hika shop product pages responsive. I typically want 3-4 columns on product pages, but using bootstrap setting breaks divs. Can you please explain in more detail how I'm going to achieve this, bearing in mind, I'm a graphic/web designer, not a coder. Any help would be greatly appreciated as I'm not going to stop using rockettheme templates, I do like hikashop and I need 100% responsive designs.

An alternative is to add custom CSS to your template using the @media CSS query:
www.hikashop.com/support/forum/2-general...g-media-queries.html
It doesn't require any PHP coding and if you're a web designer, you must be familiar with CSS so that shouldn't be a problem.

Hi, OK, yes I have a custom css file that I use for my template, so what should I add to my templates custom css file?

Hi,

As Nicolas said you have to add media queries to apply specific css properties on specific screen size.
To use these media queries, the divs must have classes like "span4" etc.

Here is more documentation about layout customizations:
www.hikashop.com/support/support/documen...ize-the-display.html

I use media queries on page page to break the 4 column grid at certain widths from the element 25% —> to 50%— 100% at the skinniest. That way all your overrides are in one place.
This is a call we make to break 4 columns into 2 at a specific width. Then down to 1.
You will need to know how to add a custom css file which they can help you with on the RT forum.

@media only screen and (max-width: 1025px){
.hikashop_product_column_1,.hikashop_product_column_2,.hikashop_product_column_3,.hikashop_product_column_4 {
width:50%!important;}
}

@media only screen and (max-width: 767px) {
.hikashop_product_column_1,.hikashop_product_column_2,.hikashop_product_column_3,.hikashop_product_column_4 {width:100%!important;}

.sprocket-strips-content {min-height: 200px;}

.hikashop_product_characteristics{ display:block; clear:both;}
.hikashop_product_main_image_subdiv{ float: left; width: 30%!important;}
.hikashop_checkout_login{width:100%;}

select{max-width:100%;}

h4.iconstext{ font-size: 15px; display:block; clear:both;}
.margins{ margin: -10px -10px -10px -20px;}
.bullethide{display:none;}
.mobileBreak{display:block; clear:both; line-height:0.3em;}

}