Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

@@micdee

 

A fundamental principle of CSS is that you can define something, than override it later, than override it again even later.

 

Bootstrap has it's own 'default' CSS files. The bootstrap version of osC has it's own CSS files (some of which overrides the default bootstrap CSS). Lastly, there is a User.css file in the /catalog directory of your bootstrap osC installation. This is the last CSS file osC calls, so anything you put in here will override ALL of the other CSS statements. *This* is where you put all of *your* CSS info. You do *not* want to change any of the other CSS files.

 

AFAIK, there is no Scaffolding.less file in the bootstrap osC installation.

 

Malcolm

Link to comment
Share on other sites

  • Replies 2.2k
  • Created
  • Last Reply

@@micdee

 

I'm not sure that even used in the responsive version.....I don't recall seeing it reference anywhere?   Are you using a template of some kind?

 

Dan

 

PS: You should probably start your own thread for issues of this nature.

 

Dan, Oke. I will start my own thread..

Link to comment
Share on other sites

When using Firefox Inspect Elements it happens that IE refers to inexistent files like Scaffolding.less.css.

You have to use Inspect Elements with Firebug.

 

 

Should be easier to have ALL the css rules in user.css

Link to comment
Share on other sites

@

 

If you had all the css in user.css it would make future updating harder. The whole point is to leave core code files alone, so any updates are kept simple. Bootstrap regularly changes and is updated, as is other things like colorbox and jquery. Now its currently only a case of updating those files, and a bit of code in one other file, and not a case of searching through files and changing just little bits of them.

 

I wish some people would get it into their heads that changing core files is bad, and causes problems further along. I can see why particular members of this forum feel they are banging their head against a brick wall.(No names mentioned but you know who you are.)

 

Your other post refers to oscommerce being hard to build and design. The bootstrap version is the easiest that I have ever come across, and I know nothing about php code and the like. I have had few problems with it, but you have to take the time to search online for a bit of help and guidence. There are now modular addons that are really simple to install. You just upload the files and turn them on in your admin area. How is that hard. If people built other modules the same way, then the whole project would be simple to build and change to users requirements. If you want a particular addon that is not modular, get it made modular either by yourself, or pay someone to do it, and release it as a modular addon, thus benefiting the whole community. Other coders are getting on board now, so there are more addons becoming available.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

@

 

The Scaffolding.less.css is because of css source maps - https://developer.chrome.com/devtools/docs/css-preprocessors for a brief on it.

 

Loading all css in one file is also not recommended. While lots of information out there talks of minimizing and combining stylesheets, it only is helpful up to a certain size. Once your file gets too large, then load time becomes longer. Loading separate stylesheets offsets the load.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

Most of the colors are set by the Bootstrap theme, so you may just want to change or replace that. The theme is set by the /ext/bootstrap/css/bootstrap.min.css file. You can edit that file or (better) just replace it with a new theme.

 

You can find lots of Bootstrap themes online, and there are theme generators that will let you build your own. Then you just replace the above file with your new theme. You can also use the Bootstrap version of Theme Switcher (see below) which comes with a set of free themes.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

You can edit that file or (better) just replace it with a new theme.

 

Try to avoid editing system-supplied CSS files. It just complicates matters at the next upgrade. It's better to add your changes (overrides) to user.css.

Link to comment
Share on other sites

Try to avoid editing system-supplied CSS files. It just complicates matters at the next upgrade. It's better to add your changes (overrides) to user.css.

Is there somewhere any good examples of overrides in users.css ?

 

thanks for help

Link to comment
Share on other sites

Is there somewhere any good examples of overrides in users.css ?

 

For example, in bootstrap.css there are settings for the <body>:

body {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 14px;

  line-height: 1.42857143;

  color: #333;

  background-color: #fff;

}

Say you want to override the foreground color to black (#000) and the background-color to sky blue (#ccf). You could add the following to user.css:

body {
  color: black;
  background-color: #ccf;
}

Since this is processed last, these colors will override any other color settings for the "body" tag. Leaving the original bootstrap.css alone decreases the chance that you'll lose your new settings on the next upgrade to Bootstrap. You still have to remember to save your modified user.css if you install a new copy of osC, but at least all your CSS changes are in that one file.

Link to comment
Share on other sites

For example, in bootstrap.css there are settings for the <body>:

body {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 14px;

  line-height: 1.42857143;

  color: #333;

  background-color: #fff;

}

Say you want to override the foreground color to black (#000) and the background-color to sky blue (#ccf). You could add the following to user.css:

body {
  color: black;
  background-color: #ccf;
}

Since this is processed last, these colors will override any other color settings for the "body" tag. Leaving the original bootstrap.css alone decreases the chance that you'll lose your new settings on the next upgrade to Bootstrap. You still have to remember to save your modified user.css if you install a new copy of osC, but at least all your CSS changes are in that one file.

Hola,

 

I am newbie with oscommerce & bootstrap.

If I understand it well, I dont have to carry in which file the css code is written, when I write it into the user.css this one takes over (overrule) from all other css files.

Link to comment
Share on other sites

Hola,

 

I am newbie with oscommerce & bootstrap.

If I understand it well, I dont have to carry in which file the css code is written, when I write it into the user.css this one takes over (overrule) from all other css files.

Yes, that is correct - easy isn't it ?

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Are there plans to support template switching in bootstrap.

I was hoping for a flexible way to change the template for the different holidays, and/or major promotional events, by just an admin change without having to ftp files across or edit files.

 

If you are not at home or at work, there are often limits on what you can do.

Instructing someone to make a change in admin is a lot easier and safer than explaining a noob how to upload or update from the unix command prompt.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

You can change the theme easily using Theme Switcher. More intensive changes, as to a true template, will never happen (As @@burt said when I asked.) So unless you want to pay for a commercial template manager, no.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Gary himself makes templates without changing any core code, so why cant others do it. Its only a user.css file change to change the look and feel of a store, and not that hard for anyone to do, even I can change that file. Surely having a template system would make this more complicated, especially as oscommerce is to become even more modular, hopefully.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

Gary himself makes templates without changing any core code, so why cant others do it. Its only a user.css file change to change the look and feel of a store, and not that hard for anyone to do, even I can change that file. Surely having a template system would make this more complicated, especially as oscommerce is to become even more modular, hopefully.

 

Thanks @@14steve14,

 

probably Gary is a pro, then is easy, i'm just a secretary.

I changed my shop only with changing theme.css, theme.min.css, custom.css, css, min.css, colorbox.css, min.js and so on.

Only 2 times i changed something in core to get what i want.

I try to avoid that, but i not always listening.

 

That way I make my own theme & that looks & works well.

 

I tried to change margins of searchbox, there in customs.css, i wrote in users.css

 

.searchbox-margin {

  margin-top: 5px;
  margin-bottom: 5px;

change? 0

 

then ; 

 

.searchbox-margin {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
result? 0
 
and tried others, always nothing.
 
I know i do wrong but 4 me is results that counts.
Is not 4 sell
 
Thanks if somebody let me know what i do wrong with users.css
Link to comment
Share on other sites

Hello,

 

You can use firebug (firefox extension) to see what class need to write in user.css and if you don't know about css you can read here: www.librosweb.es there you can find two css books which helped me

 

-------

 

Hola,

 

Puedes usar firebug (es una extension de firefox) para ver que clases tienes que modificar en user.css, y si no tienes muchos conocimientos en css, pasate por www.librosweb.es ahí tienes un par de libros de css a mi me ayudaron :)

Link to comment
Share on other sites

Not a big deal, but why doesn't the required atrick appear center to the input field instead of so close to the top?

 

.form-horizontal .has-feedback .form-control-feedback {

   right: 15px;

   top: 10px;

}

 

That's the change I added. I suppose it's just preference. but it seemed odd. anyone else?

Link to comment
Share on other sites

  • burt locked this topic
  • burt unlocked and locked this topic

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...