I'm working in a project which already uses a stylesheet
, but I would like to improve the website using Foundation.
I tried to put the new stylesheet
in the project but something that was like this:
Became this:
So I just stop using Foundation
, but I really would like to use it, but how ?
What did you guys do to apply a new CSS
in a project that already has ?
update
<!-- CSS Ganglia -->
<link type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.liveSearch.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.multiselect.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.flot.events.css" rel="stylesheet" />
<link type="text/css" href="./styles.css" rel="stylesheet" />
<!-- /CSS Ganglia -->
<!-- CSS Integra -->
<link type="text/css" href="css/integra/style.css" rel="stylesheet" />
<!-- /CSS Integra -->
<!-- CSS Foundation -->
<!-- <link rel="stylesheet" href="css/foundation/normalize.css" /> -->
<!-- <link rel="stylesheet" href="css/foundation/foundation.css" /> -->
This is a very complicated process that you are going about performing here... 99.99% of the time you can not just "plug and play" so to speak with new style sheets. For example it is likely that your two inputs up there have float: left
defined in the old stylesheet. The new stylesheet overwrote those styles and made them essentially float: none
which broke the layout.
So, what should you do.
Duplicate the current site out to a development directory (just make a folder in the root directory called dev and duplicate the entire site inside that directory. You'll use this directory to develop from without modifying a site that is currently live.
Include your foundation stylesheet/s below the current one. Then slowly go through the old stylesheet and figure out whats being over-written and merge it to a new stylesheet.