Jump to content

Archived

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

burt

Responsive osCommerce - Bootstrap

Recommended Posts

When installing Category New Products Carousel (bootstrap) http://addons.oscommerce.com/info/9445 it did'n show up in the home page :(  :(  :(  

Then I installed the front page new products carrousel of Jim and that works, but the New Products Carousel also shows up in categories  :)  :)  :)   

@

 

You can see my response to this here: http://forums.oscommerce.com/topic/409086-addon-category-new-products-carousel-for-osc-234-bootstrap/#entry1739971


My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Share this post


Link to post
Share on other sites

@@burt I have a suggestion about default install: I think it would be less confusing for new users to have some modules like logo, breadcrumb, search box or navigation bar enabled by default, like on the demo site, so newbie oscommerce shopowners would receive a more visual first touch.

 

Edit: same for the basic nabvar options recently added.

 

As I've said before, demo installations are the #1 sales tool for osC. They should show off many of the great features and modules. If these are not to be shipped built-in and turned on, then at least provide very clear and very easy instructions for how to obtain and enable these features, so that a new installation can match the demo. Consider turning on by default the requested modules (code shipped installed, anyway), with simple instructions for turning them off. Also consider shipping a number of add-ons with osC, ready to install (or at the very least, links to the add-on library entries and instructions).

 

Would a car manufacturer dream of featuring a stripped-down base model in their advertising (smallest engine, 3 speed stick, AM radio, no AC, no hubcaps,...) or do they always show the "loaded" version (with a disclaimer that optional packages are shown)? If you want to "sell" your software, that's the path you have to take.

Share this post


Link to post
Share on other sites

Let  me start with I am a noob and no-no in scripting, programming etc. With the "old" oscommerce website I learned how to use the stylesheet to alter my website.

Now I needed to change the website and thought I better use the bootstrap version; easier to alter according many..

I guess it is the complete lack of knowledge about the bootstrap philosophy, because I have a hard time to find the files I need to use to copy the specific style I want to  change. I read about the tip to use the developer tool in firefox. 

This made it already a lot easier, but now I have a challenge (not a problem) which I was not able to overcome:

 

I know I have to make my personal adjustments in the user.css file.. But ofcourse you need to know what to use, so I use the developer tools in firefox to see what I need to copy to the user.css file...

 

I changed the panel header and font colors in the user.css and this works, but it does not work for the panel titles that are a link e.g:  REVIEWS or SHOPPING CART.

 

According to the developer tool the color of the link text (<a ref=...>) is done by the scaffolding.less file on line 58, but I have not yet found the scaffolding.less file ( the link which is shown is /catalog/ext/bootstrap/css/less/scaffolding.less .. well there is no map LESS in the CSS map.. and even copy/ paste the style element to the user.css file does not work in my case at least.

 

First of all I hope I posted this in the correct thread, second I hope someone can help me with this and point me in the right direction.

 

 

Below I copied the result of the developer tool when use 'inspect element' the panel title REVIEW

 

element {                                                      (inline meaning this defined on the page itself)
}

a:focus {                                                        (bootstrap.css:1101  meaning on line 1101 in the bootstrap.css file this is defined)
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
a:focus, a:hover {                                          (scaffolding.less:58)                      
    color: #23527c;                               (this is the colour which is used)                                        
    text-decoration: underline;
}
a {
    color: #337ab7;
    text-decoration: none;
}
a {
    background-color: transparent;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-default > .panel-heading {
    color: #fff;
}
.panel-default > .panel-heading {
    color: #333;
}
body {
    color: #000;
    font-size: 11px;
    font-family: Calibri, Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
html {
    font-size: 10px;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;

Share this post


Link to post
Share on other sites
to be popular, it should be at least easily, sufficiently extensive and hassle free.

OSC is an excellent FREE E-Commerce tool which is ideal for programmers, who with their knowledge can make the necessary adjustments and can earn thus a lot of money with a FREE Tool.

For the average trader is too COMPLEX to build an E-Shop itself.

An OSC with turnkey, sufficient enhancements and easy adjustments in the admin site, a variety of themes, SEO, protections, backups, instructions, and so on will turn of OSCommerce a very popular program.

 

I, as manager of banquet halls, antique car restorer and importer, distributor of fashion find websites and webshops important, but I build them with passion itself.

It takes a lot of time and effort to build the perfect shop, but find satisfaction in the fact that my clients loves my sites and find them sublime.

 


Without IT training, I have accumulated a lot of knowledge, through my passion for websites and many tips from programmers.

Webshops construction with OSCommerce became a hobby.

I thank everyone for the help and the free tools.

Share this post


Link to post
Share on other sites

I do not exactly know, see how this helps me..

Like I said I also did a lot of reading for the previous version of the Oscommerce webshop.

Now I am trying to comprehend the bootstrap version, especially the numerous different stylesheets and their functions. I do not need to build them for others, I want to build it for myself and learn how to adjust the website to my needs.

 

So if anyone can tell me where to find the scaffolding.less file or otherwise how I should read it, since it seems to be the leading stylesheet in this matter.

 

Thank you.

Share this post


Link to post
Share on other sites

@@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.

Share this post


Link to post
Share on other sites

@@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


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@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..

Share this post


Link to post
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

Share this post


Link to post
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

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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!

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Thanks Phil for clarifying this for me.

Whish you a nice weekend

 

kind regards

Kozak

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

A *very* big THANK YOU to @@altoid for testing all the wacky and not-so-wacky code changes and providing me loads of feedback whilst also running his stores.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×