I'm experiencing something (that i think is) very weird.
I'm running an ASP.net application, and I have no problems on the development build, but on the production build when minifying, the files are not found. When inspection the application in the browser, the two files not found, site.min.css and bootstrap.min.css, are residing in the Images- and the Fonts-folder respectively.
Please see screenshot below
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/lib/bootstrap/dist/css/bootstrap.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/dist/css/bootstrap.css"
]
},
]
And when included in the _Layout.cshtml:
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="~/css/site.css" asp-append-version="true" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="~/css/site.min.css" asp-append-version="true" />
</environment>
And folder structure:
Any help is appreciated.
Related
We are using WordPress Twenty Fourteen theme. The page header code generated for mobile devices shows file sources from both http and https. Later Newer Apple devices are blocking these files from loading.
<link rel='stylesheet' id='twentyfourteen-lato-css'
href='https://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%2C900%2C300italic%2C400italic%2C700italic&subset=latin%2Clatin-ext&display=fallback'
media='all' />
<link rel='stylesheet' id='genericons-css'
href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.3'
media='all' />
<link rel='stylesheet' id='twentyfourteen-style-css'
href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/style.css?ver=20190507' media='all' />
<link rel='stylesheet' id='twentyfourteen-block-style-css'
href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/css/blocks.css?ver=20190102' media='all' />
<!--[if lt IE 9]> <link rel='stylesheet' id='twentyfourteen-ie-css' href='http://wordpress.wwfry.org/wp-content/themes/twentyfourteen/css/ie.css?ver=20140701' media='all' /> <![endif]-->
<link rel='stylesheet' id='fh-buttons-css' href='https://fh-kit.com/buttons/v2/?green=26890d' media='all' />
<link rel='stylesheet' id='tablepress-default-css'
href='http://wordpress.wwfry.org/wp-content/plugins/tablepress/css/default.min.css?ver=1.14' media='all' />
<script src='http://wordpress.wwfry.org/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
<script src='http://wordpress.wwfry.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2'
id='jquery-migrate-js'></script>
<link rel="https://api.w.org/" href="https://www.wwfry.org/index.php?rest_route=/" />
<link rel="alternate" type="application/json" href="https://www.wwfry.org/index.php?rest_route=/wp/v2/pages/8" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://wordpress.wwfry.org/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml"
href="http://wordpress.wwfry.org/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.8.1" />
<link rel='shortlink' href='https://www.wwfry.org/?p=8' />
<link rel="alternate" type="application/json+oembed"
href="https://www.wwfry.org/index.php?rest_route=%2Foembed%2F1.0%2Fembed&url=https%3A%2F%2Fwww.wwfry.org%2F%3Fpage_id%3D8" />
<link rel="alternate" type="text/xml+oembed"
href="https://www.wwfry.org/index.php?rest_route=%2Foembed%2F1.0%2Fembed&url=https%3A%2F%2Fwww.wwfry.org%2F%3Fpage_id%3D8&format=xml" />
<style type="text/css" id="twentyfourteen-header-css">
.site-title a {
color: #ffffff;
}
Header code generated for desktop / PC devices requests all files using https.
To fix the problem I checked the following:
In WP general settings I verified that the WordPress Address and Site Address both used https.
I check the header.php, functions.php and theme.php files for any custom coding and found none.
See the website at wwfry.org. Any help debugging this issue would be appreciated.
This is the code in my _document.js:
import Document, { Head, Main, NextScript } from 'next/document';
<html lang="id">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="icon" type="image/x-icon" href="../static/favicon.ico" />
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</html>
I have confirmed that the favicon is in my static folder in my root directory:
I've tried putting the head in index.js, moving the favicon in the public folder, and using a different icon. In my other Next.js projects, favicons also don't load. I've tried in Firefox, Edge, and Chrome. What's going on here?
Next.js serves static files from the public folder (it can't be changed). Files inside it can be referenced by your code starting from the base URL (/).
In your case you'll need to rename your static folder to public and then reference the favicon from your _document as:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
I am using latest bits of Blazor WebAssembly Hosted Project.
I found a strange behaviour in that when i pass a non-exisitng route to api, the return status is 200 success becuase it return default html blazore page(index.html).
HttpResponseMessage response = await _Http.GetAsync($"api/Account/OTPVerification?userName={loggidInUser.Email}&OTP={_OTP}");
if (response.IsSuccessStatusCode)
{
}
The actual response returned is, which turns out to be(index.html) 200, success, whereas it is no where what i expect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorWebAssembly</title>
<base href="/" />
<script src="https://kit.fontawesome.com/xxxxxxxxxxf.js" crossorigin="anonymous"></script>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
In your Startup.cs you can try removing:
endpoints.MapFallbackToFile("index.html");
So in your ApiController, if it's not in the route, it will return a 404 instead of index.
I have an ASP.NET MVC application that uses the Metronic template from keenthemes.
When i use bundles in my layout for my css , it doesnt work well. Most of the icons do not appear
If i switch to direct links then everything is ok.
Javascript is ok.
Bundles config and layout use:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
"~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/layout.css",
"~/assets/admin/layout2/css/themes/default.css",
"~/assets/admin/layout2/css/custom.css"));
#Styles.Render("~/bundles/metronic-app")
Direct links:
<link href="~/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/assets/global/css/components.css" rel="stylesheet" type="text/css" />
<link href="~/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css" />
Here are the errors from chrome console:
I should have been using the CssrewriteUrlTransform class in my bundle configuration in order to make the asset's paths absolute.
What worked is this:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/custom.css")
.Include("~/assets/admin/layout2/css/layout.css", new CssRewriteUrlTransform())
.Include("~/assets/admin/layout2/css/themes/default.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",new CssRewriteUrlTransform()));
Hint from this SO Question
I am writing a webpage with CI.I use the latest version. I need to learn how to imply CSS and Javascript files. I use nivoslider , jquery and many css files. I use application directory as
+application
+views
+pages
-home.php
+templates
-header.php
-footer.php
+system
+user_guide.
Can you explain how to enable js and Css files. I made a research but my mind is blown away with the versions of codeigniter.
this is my header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kırmızı Eğitim Merkezi</title>
<meta name="description" content="Empire - XHTML Template" />
<!-- CSS -->
<link href='./fonts/sansation.css' rel="stylesheet" type="text/css" />
<!-- Get any font from here easily: http://www.google.com/webfonts -->
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet"
type="text/css" />
<link href="./css/nivo-slider.css" rel="stylesheet" type="text/css" />
<!-- UPDATE BROWSER WARNING IF IE 7 OR LOWER -->
<!--[if lt IE 8]><link href="css/stop_ie.css" rel="stylesheet"
type="text/css" /><![endif]--><!-- JAVASCRIPTS -->
<script type="text/javascript" src="./js/jquery.min.js">
</script><script type="text/javascript"
src="./js/jquery-ui-1.8.17.custom.min.js">
</script><script type="text/javascript"
src="./fancybox/jquery.fancybox-1.3.4.pack.js">
</script><script type="text/javascript" src="./js/jquery.nivo.slider.js">
</script><script type="text/javascript" src="./js/jquery.bgslider.js">
</script><script type="text/javascript" src="./js/preloader.js">
</script><script type="text/javascript" src="./js/farbtastic.js">
</script><script type="text/javascript" src="./js/basic.js">
</script>
Can you advice me a way to use them ?
First, you need to place JS and CSS files somewhere like:
+ assets
+ js
+ css
Then you need to call them:
<link href='<?php echo base_url(); ?>assets/css/cssfile.css' rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.min.js">