Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Over-riding Bootsrap classes


Recommended Posts

I have just installed the Phoenix edition of OS. All looks good, an amazing job by the team. Thank you - I aim to donate some beer tokens in due course.

My challenge now is to try and modify the bootsrap to replicate the previous responsive template which I was using. I have two questions:

1. Where do I over-ride bootstrap styling - I see that there is a user.css in the root of the project. Is it intended for this purpose

2. My second question is perhaps more of a Bootsrap question. For the large desktop breakpoint I want to use container width of 85%. Within the admin I have switched the class from 'container-fluid' => 'container'. I have then added the following inthe aforementioned user.css

@media (min-width: 1200px) {
    .container {
        max-width: 85%;
    }
}

Is this good practice?

Thanks,

Bob.

Link to comment
Share on other sites

10 hours ago, spacebiscuit75 said:

Where do I over-ride bootstrap styling

It's up to you. If iy's site wide change then user.css, if it's a change to just one specific section then you can make the change in the relavent template file.

If you intend to override boostrap base classes then you may have to add !important to you css for it to take affect.

If you just need to change the colors and look of the site try using

10 hours ago, spacebiscuit75 said:

For the large desktop breakpoint I want to use container width of 85%

It's probably better to stick with the default brake points but yes you can make changes. Just remember that many new hd screens and wide screens may look odd if you shrink the large brake point.

https://getbootstrap.com/docs/4.0/layout/overview/

 

Link to comment
Share on other sites

11 hours ago, spacebiscuit75 said:

switched the class from 'container-fluid' => 'container'.

You should note that as bootstrap advises.

.container has a max width pixel value, whereas .container-fluid is max-width 100%

.container resizes in chunks at several certain widths, controlled by media queries (technically we can say it’s “fixed width” because pixels values are specified, but if you stop there, people may get the impression that it can’t change size – i.e. not responsive.)

When using .container-fluid because the witdh is related to the viewport width the display is dynamic

Use .container-fluid when you want your page to shapeshift with every little difference in its viewport size.

Use .container when you want your page to shapeshift to only 5 kinds of sizes, which are also known as "breakpoints".

 

Link to comment
Share on other sites

Bob,,

1) Yes

2) Don't modify container-fluid in container, you can use this :

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 85%; /* or what you want in px like 1020px for example*/
}

margin-right and margin-left are to centered your layout with the max-width defined.

with OsC 2.2 since 2006 ...

Link to comment
Share on other sites

I am not sure that setting a % on container-fluid is the way to go, the bootstrap docs say: "Use .container-fluid for a full width container, spanning the entire width of your viewport." So by definition the container should fill whichever viewpoint the user is on. I think adding the width % to the container class is a cleaner approach?

I understand that using "!important" is bad practise since it forces styles to be inherited and these cannot be over-ridden, at least that was the thinking some time in the recent past I believe.

 

 

Link to comment
Share on other sites

Yes and No 😂

Yes if using container-fluid  then dont bugger about with it, as you say it's designed for 100% width to offer full responsive view to any size device. If your need to limit size then use .container  and add the custom media brake you need to use.

No "!important"  is a must if you plan to overide some core Boostrap classes in your user.css ( even boostrap uses them in it's themes). As I said if the changes are to be permanent then you may be better of using the theme change add-on, then you can make the changes in the custom theme css file.

 

Link to comment
Share on other sites

18 hours ago, spacebiscuit75 said:

I have just installed the Phoenix edition of OS. All looks good, an amazing job by the team. Thank you - I aim to donate some beer tokens in due course.

My challenge now is to try and modify the bootsrap to replicate the previous responsive template which I was using. I have two questions:

1. Where do I over-ride bootstrap styling - I see that there is a user.css in the root of the project. Is it intended for this purpose

2. My second question is perhaps more of a Bootsrap question. For the large desktop breakpoint I want to use container width of 85%. Within the admin I have switched the class from 'container-fluid' => 'container'. I have then added the following inthe aforementioned user.css


@media (min-width: 1200px) {
    .container {
        max-width: 85%;
    }
}

Is this good practice?

Thanks,

Bob.

You answered your own question here, and that's all you need to do. Apart from that you need to make sure that user.css is then called after the bootstrap css.

Link to comment
Share on other sites

3 hours ago, Hotclutch said:

You answered your own question here, and that's all you need to do. Apart from that you need to make sure that user.css is then called after the bootstrap css.

Thanks just wanted to confirm that i wasn't doing anything that might be considered a hack. 

I appreciate the feedback and inpit above...

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...