How apply new CSS in an project that already has? - html

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.

Related

Which file-path to use with localhost after moving site from static environment

I have a static website that is locally stored in the C drive: C:\site
I've now created a new site within IIS and pointed it to that location.
When I type 'localhost' in the browser, it pulls up the sites index.html
The issue is I've lost all CSS / JS / etc. and I assume this is because my paths aren't pointing to the right source. I have the same issue for links (hrefs).
Before connecting to IIS, my paths were as follows:
<link rel="stylesheet" type="text/css" href="C:/Site/css/MyFontsWebfontsKit.css" />
<link rel="stylesheet" type="text/css" href="C:/Site/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="C:/Site/css/style.css" />
<script type="text/javascript" src="C:/Site/scripts/jquery-1.12.3.min.js" ></script>
<script type="text/javascript" src="C:/Site/scripts/bootstrap.min.js" ></script>
I've tried looking around for answers, as well as trying some things such as:
<link rel="stylesheet" type="text/css" href="localhost/Site/css/style.css" />
OR:
<link rel="stylesheet" type="text/css" href="http://localhost/Site/css/style.css" />
But still no luck in seeing my CSS, JS, etc.
As for the links, they were working before IIS and looked like this:
About Us
I assume once I can achieve the correct paths for my CSS & JS I'll be able to figure out the links. Any help would be appreciated. Thanks!
If your folder structure is this:
css
style.css
index.html
Then the path css/style.css will always work from index.html, regardless of where it's hosted. You're hard-coding root paths in the references, so when the root path changes in any way it's going to break all the references.
Try:
<link rel="stylesheet" type="text/css" href="css/style.css" />
(With the same change applied to other references.)
You can always reference files relative to each other, but referencing them relative to the root requires a consistent root.

Bootstrap CSS not working on Github Pages, but works in localhost

I'm working on a portfolio and it looks great in localhost, but when I try to commit it to Github (https://gabrielbrickle.github.io/) the CSS does't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-lightbox.css" rel="stylesheet" />
<link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" />
<link href="css/animations.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
<link href="color/default.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
try changing this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
to this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
If you open the developer console(right click inspect element), It says youre trying to load from http in a https
Use https:// for bootstrap css Link.If you right click , Inspect and look at the Console in Chrome you'd find the errors.
Github is loaded over HTTPS. Referencing external stylesheets will require the same protocol.
You can see the errors in DevTools.
You can either save Bootstrap locally and reference it, or load it with HyperText Transfer Protocol Secure (HTTPS).
I had a similar issue. I messed around and figured out that I had referred to one of the sources incorrectly. I used the wrong case for the first letter of a folder of a source. I had used ./Assets/css (incorrect one) instead of ./assets/css (correct one). Fixing the error fixed the CSS on the Github site as well!

How many bootstrap links do I need to use at the top of my index.html file to use a template

I am trying to use a bootswatch Bootstrap template that you can find here: http://www.bootstrapcdn.com/#bootswatch_tab (The template is Amelia).
Do I only add this to my index.html document:
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">
or do I need to add these two as well to make it work:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
I figured I just needed the first piece of code but I need it to connect to my style.css document.
For Bootstrap, you need only these by default :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Depending on the theme, which you want to use, you will have to go through the source code to check what other external files have been used for layout(css) and visible effects(.js) for it
go through src and you'll find a url for amelia :
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">

Is it important to include bootstrap CDN link?

Ive been designing a custom bootstrap theme by making
My own styles main.css and menu.css
by over-riding some bootstrap default styles in the pre-made bootstrap.css
I have a link for the CDN
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
and was wondering if it was important to include this link and what exactly is it doing ?
When the page loads the link it overwrites my styles... Was just curious thanks.
Reviewed the comments and did away with CDN link, only kept local version
<link href="css/bootstrap.css" rel="stylesheet">
<!-- menu styles-->
<link href="css/menu.css" rel="stylesheet">
<!-- overall styles -->
<link href="css/main.css" rel="stylesheet">

Print/Save as PDF (keeping the CSS layout)

When I simply print (like on paper), or save as PDF a page (using the browser built-in tool), the css is completely ignored and I just get ugly lines after lines of the content!!
Is there a way to do this (without having to convert the HTML 2 PDF/image)?
Thanks!
That's probably cause you've got the media option specified.
<!-- will ignore css on print -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- will only use css when printing -->
<link href="style.css" rel="stylesheet" type="text/css" media="print" />
<!-- will use both -->
<link href="style.css" rel="stylesheet" type="text/css" />
You should look up Media Types in CSS... set one up for printing and you should be good to go. I've found that this page is really helpful.