Responsive osCommerce - Bootstrap

[♥Tsimi]

Agree! IMO it ooks better that way.

[douglaswalker]

@@NimaP@@Tsimi@@piernas

 

When the asterix is a glyphicon it is centred when it is fontawesome it is up the top

 

hmm why would that be?

[micdee]

@@burt,

 

What I came across with the responive version when I open the website on my laptop with full screen (over 1200px) the website shows with the panels/boxes somewhat like a 6th of the whole page on either side.

When I start the narrow the browser at a certain point, I think this somewhere set in one of the stylesheets the panels/boxes are moved below the main page. At that moment the panels are as wide as the main page.. Would it be possible to keep them as wide as they were when it was a full page?  In that case you could also have two panels/boxes next to each other. Which saves srolling..

[burt]

@@micdee yes that is possible. I am not going to give the answer and I do not want anyone else to either.

I want you to go away and have a think about how and where the columns are made/displayed, then experiment.

 

When you have found a way to do it, post back.

[micdee]

uhm...   :blush: oke. At least I know now it is already possible... :D

[micdee]

Thus far I came up with this in my user.css

 

@@media (min-width: 375px) and (max-width: 579px) {
.col-md-2 {
  float: left;
  width: 33.3333333%;
  }
.col-sm-6 {
  float: left;
  width: 50%;
  }
}
@@media (min-width: 580px) and (max-width: 991px) {
.col-md-push-2 {
  left: 20%;
  }
.col-md-pull-8 {
    right: 75%;
  }
.col-md-2 {
  float: left;
  width: 20%;
  }
.col-sm-6 {
  float: left;
  width: 50%;
  }
}

This way I do not have to alter "core code" to change the col-**-* classes, but I still run into a challenge which I do not seem to find.

I want to have the left column shown longer until a smaller width at this moment 580px.. (but this might have to change to keep it all readable) What happens at this moment the content is "floating"  25% from the left side, but I do not see the left column. Next to this the content is now partly outside the browser window on the right.

[burt]

Good for you for having a go :thumbsup:

 

What I *might* have done for testing the concept:

 

open up /includes/template_bottom.php

 

Find:

      <div id="columnLeft" class="col-md-<?php echo $oscTemplate->getGridColumnWidth(); ?>  col-md-pull-<?php echo $oscTemplate->getGridContentWidth(); ?>">

Change to:

      <div id="columnLeft" class="col-sm-6 col-md-<?php echo $oscTemplate->getGridColumnWidth(); ?>  col-md-pull-<?php echo $oscTemplate->getGridContentWidth(); ?>">

And do the same for the columnRight.

 

Then had a think about how to do it without changing core code at all, which may be possible or may be not possible.

[micdee]

@@burt,

 

Thank you for your suggestion. A pointer in the right direction is what I need and with that advise I will continue "my quest" to get it as I want.

 

Now I also understand the different php files a little better aswell.

[micdee]

@@burt:

 

Well been a few days and with your suggestion I have come up with a new approach to change the look of the website.

For this I had to alter the template_top.php and template_bottom.php

 

Coding in the template_bottom.php you suggested, I extended with more options:

 

<div id="columnLeft" class="col-lg-2 col-sm-3 col-xs-4 col-md-<?php echo $oscTemplate->getGridColumnWidth(); ?> col-lg-pull-8 col-sm-pull-9 col-xs-pull-8 col-md-pull-<?php echo $oscTemplate->getGridContentWidth(); ?>">

and

<div id="columnRight" class="col-lg-2 col-sm-6 col-xs-6 col-md-<?php echo $oscTemplate->getGridColumnWidth(); ?>">

 

To make sure the left column is shown left of the content all the time, I coded the following in he template_top.php

 

<div id="bodyContent" class="col-lg-8 col-sm-9 col-xs-8 col-md-<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'col-lg-push-2 col-sm-push-3 col-xs-push-4 col-md-push-' . $oscTemplate->getGridColumnWidth() : ''); ?>">

It is not yet 100%, but it is getting there... I would like to see if I can get the right column underneath the left column when screen width is below 768px.

[burt]

More help is needed from the Community.  

 

I do the bulk of the coding alone.

I and one shopowner (thank you Steve @@altoid) do the bulk of the testing.

 

Where are you all ?

[♥bruyndoncx]

@@burt I just setup a server directory to sync up with the latest bootstrap.

I am looking to see if I can get bootstrap looking the way I want it with a touch enabled megamenu,

and then I am on board and ready to use and give feedback on more regular basis.

[♥14steve14]

Gary

 

Once I have uploaded the new version of my store I will have the correct environment to be able to help with any testing. Current old store is on old php version so not much help to you. Bootstrap store is also currently on that old php version. Will be glad to give you any help that you need then.

[micdee]

More help is needed from the Community.

 

I do the bulk of the coding alone.

I and one shopowner (thank you Steve @@altoid) do the bulk of the testing.

 

Where are you all ?

I'm no coder, but

I sure want to help you with feedback, but I'm not sure what kind of feedback you are looking for.

Are you looking for error's or for tune-ups, improvements?

 

Michael

[♥kymation]

@@burt  Still here. Still testing whenever I see you asking for help. Still offering free code whenever I can. Still don't see the point.

 

Regards

Jim

[Guest]

@@burt

 

Hi Burt,

 

Thank you soo much for the time and effort you put into developing BS.

 

I wish I could help, but I really dont know how.

I know you need "testers".Perhaps you could list a few parameters of how to test so as any of us bunnies looking to help would have guidelines, and any help may be of value.

 

Hope this makes sense.

 

Kind regards

Grandpa

[SpicyGirl]

@@burt Still here. Enjoying your great contribution, I have seen that in many file theyre no ?> at the END, while the most developpers, compilers, experts has'n seeing it. If you need a coffe, sandwich, cold beer or tequila, I'm here. Don't understand why your sad. 

 

 

saludos

Camella

[ArtcoInc]

@@burt Still here, doing what (little) I can too ...

 

Malcolm

[BrockleyJohn]

More help is needed from the Community.

 

I do the bulk of the coding alone.

I and one shopowner (thank you Steve @@altoid) do the bulk of the testing.

 

Where are you all ?

 

@@burt I think what's lacking is a mechanism or process for picking up bits of work and doing them (or if it exists it needs publishing)...

- a list of things that you think are worth doing now

- that people can put a name against and do

- when it's done a pull request will let people know a change needs testing

 

I don't suppose you have the time to run this on top of all else that you do, but it's going to need your input to prioritise things and own the general design concept. Someone else can do the change management.

 

If this were run through github, it doesn't seem a good idea to do the detail of it direct in the main repo (too much noise for folks not following change at this level), so I suppose set up a fork for the purpose and then drive completed changes back via pull requests.

 

Cats need a bit of herding or they'll all wander off doing their own thing!

[burt]

Thanks Chaps.  I will make a new post detailing what help can be given.

[burt]

jQuery 2.2.2 is now Core

 

Thank you @@altoid, @@Tsimi, @@piernas for testing and commenting.

[burt]

Searching by Product Model is now Core.

Searching by GTIN is now Core.

 

Thank you @@Tsimi for the code and push.

Thank you to the testers for testing and commenting.

[douglaswalker]

Happy to help, test etc when I can 

Doug

[♥bruyndoncx]

just looking at template_top and i was wondering if you want to tweak something css wise that has been added via the header_tags, wouldn't it be most logical to have the user.css just before the ending head tag ?

[MrPhil]

Have you found a situation where user.css ends up being linked before other CSS (linked files or in-line style tags)? If so, your suggestion might be good for preventing that. It doesn't seem to happen in a vanilla store, but add-ons might do something to insert links or in-line code after user.css in the head area. That brings up the question of whether user.css should be last word in the CSS definitions, or if certain add-ons should be allowed to override it. If the latter, and multiple add-ons are making conflicting CSS definitions, who should prevail?

[BrockleyJohn]

Have you found a situation where user.css ends up being linked before other CSS (linked files or in-line style tags)? If so, your suggestion might be good for preventing that. It doesn't seem to happen in a vanilla store, but add-ons might do something to insert links or in-line code after user.css in the head area. That brings up the question of whether user.css should be last word in the CSS definitions, or if certain add-ons should be allowed to override it. If the latter, and multiple add-ons are making conflicting CSS definitions, who should prevail?

 

Presumably the one with the highest sort order...

 

I'm struggling to imagine why an addon would need to add site-wide styles without allowing the siteowner to change them easily. If it's a module, then scoped styles can be used in the module template.