I have an ASP.NET MVC project using Boostrap 4 and jQuery DataTables. For both tools, the CSS files load but none of the CSS rules are applied. Looking at the network tab of Chrome dev tools, content type is coming over as text/css. Here's the code within the head tag of the main layout page:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
#*<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />*#
<link href="#Url.Content("~/Content/Site.css")"rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/pushy.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/MyStyle.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/DataTables/css/jquery.dataTables.min.css")" rel="stylesheet" type="text/css" />
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap.min.css")" />*#
<link href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap4.min.css")" rel="stylesheet" type="text/css" />
I've tried using runat="server" in both the link and head tags, using #Styles.Render instead of a link tag, swapping out the minified file with the full one, href with and without #Url.Content(), and using a file directly from Bootstrap, all with no success (haven't been able to find any other solutions on SO either).
MyStyle.css loads and applies properly, but not the Bootstrap or DataTables CSS. This is driving me nuts trying to figure out the issue - what am I missing?
I'm running .NET 4.6.1 on Visual Studio 2017.
Actually another css file from _Layout.cshtml overwrites the view page css file.removed main.css from Viewpage.cshtml
Related
I have used these lines inside head tag
<link href="~/Content/site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
Bootstrap seems to work, but site.css is not loading..I even tried
<link href='#Url.Content("~/Content/site.css")' rel="stylesheet" type="text/css" />
I couldn't find any solution. Where am I going wrong?
I'm new to web development and am using Laravel. For this, I purchased a HTML admin page template which already included Laravel (so basically Laravel plus the theme in HTML already set up). Now I'm using some elements from everywhere inside the template and I ended up having heavily long reference lists. I don't think this is necessary or even considered good code (rather HTML markup), and I even tried to remove some of the references, but then for some reason some elements of the page do not properly work anymore.
For example, I choose a certain button element from a HTML page included in the template, I copy the code and paste it inside where I need it. I also copy the references, but not necessarily all the references (because there were not only buttons on the page). However, not having -all- the references ended in a messed-up page with few things working. I wonder if there is like any tool which automatically removes these statements since I feel that the following is ridiculous compared to the actual size/content of the page (which is merely a form to enter your personal data):
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css')}}"/>
<!--page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/wizards.css')}}"/>
<!--End of page styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jquery-tagsinput/css/jquery.tagsinput.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datetimepicker/css/DateTimePicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/j_timepicker/css/jquery.timepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/clockpicker/css/jquery-clockpicker.css')}}" />
<!-- end of plugin styles -->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/colorpicker_hack.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/switchery/css/switchery.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/chosen/css/chosen.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/fileinput/css/fileinput.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/multiselect/css/multi-select.css')}}"/>
<!--End of plugin styles-->
<!--Page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/form_elements.css')}}"/>
(Not to forget all the JS at the bottom!)
Just simply go to Google's developer by clicking Short cut (control + shift+ I) and then go to Audit tab, you will find all the details and performance audit report. From there you can find the used and unused css and JavaScript codes.
You can inspect the particular webpage. During inspecting, you can find out the error/unused portion of css/js files in console. They basically name the unused file with line number.
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
If I use this .css file in my code, it will overlap the previous .css files which I wrote myself, how can i load my .css files first, if I can not find the css then turn to the bootstrap .css file?
i would guess that your css declaration looks like this
<link rel="stylesheet" type="text/css" href="yourcss.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
you should change them upside-down
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="yourcss.css" />
the reason is that any css that is closer to the body tag, will be considered the first priority. if items in yourcss.css has the SAME NAME with the items your bootstrap.css, the bootstrap.css's items will be OVERRIDDEN. if you didn't want to override these, make sure the item/class/id name is different for each in the yourcss.css. Make the best practice of giving each tag a different class name for your css.
You write your css files like this:
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/your-style.css" />
try this
<link rel="stylesheet" href="assets/css/bootstrap.css">
after your own css
<link rel="stylesheet" href="assets/css/YOURCSS.css">
You could load your own CSS with
<link rel="stylesheet" type="text/css" href="css/style.css" />
and then import bootstrap inside your own CSS file, that way your CSS will be on top of bootstrap and you will be able to override it.
#import url("bootstrap.css");
I'm sure there is something ridiculously simple here that I am missing but I just cant see it. I have a number of template pages which are currently in the root folder of my project, as are 2 of my CSS sheets. I have more contained in a "CSS" folder. I want to take the the template pages (call them home.aspx and dashboard.aspx) and put them in a folder called "Template_Design_Pages". I am happy to keep the CSS pages in the root directory, or move them. When I move my template pages to the folder the CSS is lost. I have tried updating the href's on the pages I have moved to no effect. Say the href is href="css/Reset.css" - i have tried changing to:
href="/css/Reset.css"
href="~/css/Reset.css"
href="Orion_Admin/css/Reset.css" NB Orion_Admin is root.
I have seen this mentioned
href="<%=ResolveUrl("~/css/reset.css.css") %>"
but it does not work either and I am not sure what it does. I'm pretty new to all this. The project is ASP.VB btw. The following is the code which seems to be causing the trouble, although none of my images are showing up either. I presume that it is all tied into the one issue though:
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="nav.css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
<!-- BEGIN: load jquery -->
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
<script src="js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
If I were you, I would use an absolute path instead of a relative one.
<link rel="..." type="..." href="http://www.your.site/whatever/folder/reset.css" media="..:">
Also, instead of ~, try using ../ when moving up a folder.
I'm quite new to the Spring|Hibernate|Eclipse setup. For some reason, My index.jsp files are not picking on the css files (css & css01).
Any clue why?
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css">
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css">
You have not provided the end tag of the link tag. Provide it like this.
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css" />
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css" />
OR
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css"></link>
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css"></link>