I have a .loading css class defined, which only appears to work if I add it to the the page as internal css. It fails to generate the loading circle when I move it to my external style.css file.
Here's what I do know:
style.css is being loaded because the page is styled and I have also double checked via firebug.
I have tried adding .loading to a .css file of its own and loaded it and it still fails.
I don't have another .loading class defined in my style.css file
I have tried renaming .loading to .loadingCircle with no change (did this incase it conflicts with JQuery)
My header files:
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='includes/js/jquery.js'></script>
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type='text/javascript' src='includes/js/createDialog.js'></script>
<script type="text/javascript" src="includes/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="includes/js/jquery.tablesorter.pager.js"></script>
<script type='text/javascript' src='includes/js/script.js'></script>
Move your css file after the jqueryui css import. Last one wins if they have the same specificity...
Thanks all. While having another look at my css I discovered that it was an issue with the path to the loading image. I guess had I added it someone would have spotted it for me
My folder structure was such that:
/css
/images
searchForm.php
index.php
edit.php
My .loading css inside searchForm.php had:
.loading {
background:url('images/ajax-loader_thick.gif') no-repeat center center;
I missed doing this when I added it to my style.css file inside the css folder:
.loading {
background:url('../images/ajax-loader_thick.gif') no-repeat center center;
Related
I have a custom CSS file site.css (which is returning 200 when running the project) I started with a blank ASP.NET Core 5 web application and added MVC functionality in, so I added Bootstrap js/css files and jQuery manually.
When I try to run the project, none of the site.css styles show up but there are styles from a file called scaffolding.less, which Chrome Dev Tools says is located in lib/bootstrap/css/less/. I can't find any less file in the bootstrap/css folder, so I'm not sure where that is coming from, unless it's added at runtime. I've included the head element code of the _Layout.cshtml. Any ideas as to why the site.css styles aren't being added?
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<link href="~/content/site.css" rel="stylesheet" />
</head>
Here's part of the site.css file (bootstrap is making the background white, but it should be the picture from the url() repeating (I put the !important in after to try if it would override anything):
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
background-image: url('/images/pattern.png') !important;
background-repeat: repeat;
font-family: 'Source Sans Pro', sans-serif;
}
Here's a brief view of the wwwroot hierarchy:
I'm not sure how to link CSS to the HTML. Here's how I link currently:
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
But when I do so and save it, I don't see any changes, so I've resorted to using the <style> tag. I'm also using Sublime Text if that has anything to do with the issue:
<style type="text/css">
body {
background: green;
color: black;
background-color: red;
}
</style>`
Try an absolute path.
Change:
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
to
<link href="http://yourwebsite.com/styles/main.css" rel="stylesheet" type="text/css"/>
If that doesn't work please edit your question to include the contents of your main.css file as this may be a simple misunderstanding on how to write a stylesheet.
Happy coding.
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
As written, your main.css file has to be in a subfolder called "styles", relative to your html document.
Here is the structure visualised:
If you had the main.css file in the same folder, you could change the link tag to be:
<link href="main.css" rel="stylesheet" type="text/css"/>
As others have stated it's likely that the path is wrong. Try appending that path to the url of the html page, minus the html file.
eg: http://www.mysite.me/index.html becomes http://www.mysite.me/styles/main.css
If the css file doesn't come up then your path is incorrect.
If your css file includes the <script> and </script> that is your issue. The CSS file should only include the style sheet text, and those tags are for entering a style sheet inside the HTML and not using a link as you seem to want to do (props to you ;))
The content of your main.css file should look exactly like:
body {
color: black;
background-color: red;
}
If you are using Chrome, press CTRL + U and right click the main.css and open it in a new tab. If the file can't be displayed, the path is probably wrong
How do you override a BootStrap CSS file? I have created another file called site.css and linked it to the index.html file; however, this still does not allow me to override. Is this not a correct action?
If you want to override the bootstrap CSS so you can try this trick.
put your bootstrap css and site.css in head section like below example
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="site.css">
now site.css will be override to bootstrap.css :)
Proper way to override bootstrap is to create your own style class.
<div class="bootstrapclass yourownoverrideclass"></div>
in your css
.bootstrapclass.yourownoverrideclass {
margin: 5px; //override content
}
I'm trying to use one of the styles from http://bootswatch.com/. I would like to apply the .less version of their styles to bootstrap.css. To do so I'm doing the following as described in http://lesscss.org/#usage:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="variables.less" rel="stylesheet/less">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But it doesn't work, i.e. I still have the default bootstrap theme.
To simplify I've merged variables.less into bootswatch.less, so the code now looks like this:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But still I get the default bootstrap theme.
I've checked with the debugger and all files are properly linked, so I guess I'm doing something wrong in the usage.
If you use the less files from bootswatch, I think you also need to use the less files from bootstrap. The variables.less file will overwrite the values from the original file.
What I did to make it work is download the bootstrap less files, copy the bootswatch.less and variables.less to the same folder (I renamed to variables-bootswatch.less for forward-compatibility, if bootswatch is not up to date).
Then I modified the bootstrap.less file to include those aforementioned files :
// Header and everything before variables.less
#import "variables.less"; // Modify this for custom colors, font-sizes, etc
#import "variables-bootswatch.less";
// everything else, then at the end
#import "bootswatch.less";
Lastly, you just need to import this file (no CSS)
<link href="bootstrap.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
It appears that there is one project on github that is meant to build you swatch themes : swatchmaker on github. It should produce the appropriate CSS files.
I think you need to change the order of script file as follows
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<script src="less.js" type="text/javascript"></script>
<link href="bootswatch.less" rel="stylesheet/less">
I am using twitter bootstrap css framework. I have installed a local copy in /js folder of my application.
I have a piece of code in my home.php file:
<link href="../css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
Basically, it loads the css well, the span5 division works. But the nav bar does not seem to be appeared.
I think you need to also include the basic bootstrap.css file on the page as well as the bootstrap-responsive.css file.
See this example:
http://twitter.github.com/bootstrap/examples/fluid.html