Oscommerce Question posted in
The official documentation can be found here

Overriding Bootstrap Styles Issue – Oscommerce

I am in the process of setting up an online shop using the osCommerce Bootstrap package, integrating it into an already-built website design – this is proving difficult. The current website isn’t built using bootstrap, so merging the two together has brought about some expected difficulties.

I have two included files for the website’s header and footer, and these have strange display issues when on the online-shop, bootstraped side of the website such as increased margins, semi-transparaent dropdown menus and other wrongly coloured elements. Having disabled the bootstrap.css reference in the header, the two include files display correctly so I know the issue is with the css and not statement positioning in the main PHP files themselves.

So far I have tried:

  • Referencing my css files below the bootstrap reference (it was always like this)
  • Using !important on my css styles for the elements being overlapped
  • /* out sections in the bootstrap css */ – this actually works but then screws up the rest of the shop which I need to be bootstrap

I figure that if I find a solution to just one of the issues, then I can replicate the fix for the rest of them so I’ll focus on the hr tag in my footer.

My css:

#footer_hr {
width: 75%;
color: #CCC;
margin: 0px auto;
}

The bootstrap sections I could find on hr’s:

hr {
height: 0;
-webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
        box-sizing: content-box;
}

-and-

hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}

What the hr should and shouldn’t look like:

You can see here what im talking about visually

So, has anyone got any idea how I’m gonna override this bootstrap style but keep it there for everything else other than my footer? Any help to this matter will be very much so appreciated 🙂

Thanks,

Will

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to solve this issue by over-styling the effected points, even when not 'necessary'. For instance with the Bootstrap hr:

    hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}

    my #footer_hr became:

    #footer_hr {
    width: 75%;
    margin: 10px auto;
    border-top: 1px solid #666;
}

    Additionally, just in case anyone else had this Bootstrap issue, I had a drop-down sub-ul menu that was half-appearing behind some of the Bootstrap elements - I managed to fix this issue with z-indexes.


  2. 0

    could you please provide links to actual site or at least a live example?

    I would try a couple of things:

    1)

    #footer_hr {
    border-top-color: #ccc; /* or better use "red" for trials */
}

    2)

    #footer_hr {
    border-color: #ccc; /* or better use "red" for trials */
}
    Login or Signup to reply.
  3. 0

    Ok, so the biggest issue you have is that css always applies to your entire page. One approach would be indeed to go tweaking inside bootstraps css but this is not advised.

    If only your footer and header should not contain bootstrap maybe you can use this ugly hack. I’m quite sure this is not the best or cleanest solution but it’s a quick workaround:

    Place your footer and header inside an iframe tag. http://www.w3schools.com/html/html_iframe.asp

    This will load them inside the webpage as seperate pages, and thus the css from your footer/header will not be applied to the main webpage (which has bootstrap).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search