So I just finished the layout for a website, which uses bootstrap, however I have my own CSS as well. Im getting a couple of modal issues which through the help of another coder have deduced its from calling bootstrap.min.css and my custom .css file. How can I include them both with no issues with the index.html?
<title>Kameechi</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/Rae.css" rel="stylesheet">
<style type="text/css">
That is right. The order implies that your styles would override bootstrap sometimes.
<head>
<title>Kameechi</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/Rae.css" rel="stylesheet">
</head>
Related
I have my website which consists of two pages, plus my own style.css that works perfectly on my local. But when I FTP it onto the server of my hosting service, the index.html is unable to read from my style.css. I've checked the path. I've checked the order of declaration. I've maintained the same file structure and the same order of CSS declaration (global to local)on my local, and its working fine. Does anyone have suggestions?
Here is how the head section looks:
I had to declare a CSS style for a script I'm using in the document. Since it won't read my style.css I did an internal declaration.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Google Font: Source Code Pro-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.min.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fancybox jQuery -->
<script src="fancybox/jquery.fancybox.min.js"></script>
<style type="text/css">
.menuActive {
background-color: #ffffff;
}
</style>
</head>
A relevant portion of my file structure on the server is as follows (tried including a screenshot but apparently I can't do that on Stackoverflow just yet):
Folders & files:
css
fancybox
files
img
wp_admin
wp-content
wp-includes
.ftpquota
.htaccess
default.htm
index.html
The img folder is on the same level as the css folder and the images are loading properly.
It's probally because on your server you are using https://
change your style links to something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> and remove http part
I'm new to this HTML CSS stuff and I like it. A few days ago I stumbled upon Bootstrap, and I liked it. How can I use it with dreamweaver ?
you can add the bootstrap files to your source (if you want to edit the bootstrap docs this is recomended) or just use the online-versions and apply the tags in the head part of your html document.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
and with this it should run no matter what IDE you use.
/S
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">
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">
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.