Why my layout doesn't work properly in welcome.blade - html

i'm working on a laravel project and i prepared a layout for welcome.blade but css and html don't work properly . somehow the project can't read them .
i make you sure that my paths is correct
even i change folders and paths in public but it didn't work
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="description" content="MealOrder">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="HiBootstrap">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Fafo - قالب رستوران و فست فود</title>
<link rel="icon" src="/assets/images/tab.png" type="image/png" sizes="16x16">
<link rel="stylesheet" src="/assets/css/bootstrap-reboot.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/bootstrap.rtl.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/animate.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.carousel.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.theme.default.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/responsive.css" type="text/css" media="all" />
#livewireStyles
</head>
<body>
.
.
.
.
<script src="/assets/js/jquery-3.5.1.min.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/jquery-ui.js"></script>
#livewireScripts
</body>
</html>

I assume you use Laravel 9 because Laravel now is using vite instead of webpack/laravel-mix as we used to see, and the way vite injects styles & scripts in layouts pages are not the same as it was.
you will need to add the following blade directive into your layout file:
#vite(['resources/css/app.css', 'resources/js/app.js'])
and then re-run npm run build or npm run dev to re-bundle your assets.
more about Bundling Assets (Vite)

its better change all src to asset() for example:
instead of
write
<link rel="stylesheet" src="{{asset('assets/css/animate.min.css')}}" type="text/css" media="all" />
and for scripts do same

Related

ASP.NET Core CSS

New to ASP.net Core
Where is the appropriate place to modify CSS to have the intended effect on the page? I'm not sure the hierarchy here in how the CSS is read in the templates.
I've tried linking my own .css, modifying the wwwroot>>css>>site.css file, modifying the wwwroot>>lib>>bootstrap>>dist>>css>>bootstrap.css file, and using in-line styles. The only one that works is in-line, and this is against our coding standards.
Edit:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - AppName</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
#Html.Raw(JavaScriptSnippet.FullScript)
</head>

Laravel Asset Links not working

I want to install the "Metronic" Admin Theme in Laravel and therefore adjust the links in the header to the correct paths.
The current header looks like this:
<head>
<meta charset="utf-8" />
<title>Metronic Admin Theme #1 | Blank Page Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Preview page of Metronic Admin Theme #1 for blank page layout" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<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/bootstrap/css/bootstrap.min.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 GLOBAL STYLES -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<!-- END HEAD -->
I copied all the folders needed into the resources/assets/ folder, but still it is not found when loading the page and no matter how I change the path it is not found. How would I need to adjust this correctly?
you can use {{asset}} which allows you to link to an asset within
your public directory
try
<link href="{{ asset('/global/css/components.min.css') }}"" rel="stylesheet" type="text/css" />
https://laravel.com/docs/5.4/helpers#method-asset
Copy assets folder of Metronic theme and past to your application's public folder. Add your resource link by following line:
<link href="/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
By Metronic you maybe forgot to call
npm run dev
or
npm run prod
according to docs
Metronic Laravel

Bootstrap and Stylesheet not loading Locally

I have the following head section,
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.

My stylesheet isn't linking to my HTML

Really new to HTML & CSS but have created sites in the past and linked the CSS to the HTML quite easily. I can't understand where I'm going wrong (although I am sure it's massively obvious!) Any help would be great, thank you in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Katgrog</title>
<meta name="description" content="My first try at my own website">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
Copy and paste it in your html, it will work. It seems you are forgetted to add slash(/) at the end before >.
you need to specify the type, so do something along these lines: (The type is not required)
<link rel="stylesheet" type="text/css" href="theme.css">

How to Avoid conflict between jquery UI and Bootstrap

I am creating jquery collapsible set with sidebar and a search button. I need to apply bootstrap for this. If i include the bootsrap css file the collapsible is not visible.
Please help me to solve this problem.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/demo_collapsible.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<link href="css/jqueryscripttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
<!--<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />-->
</head>
<body>
</body>
</html>
This might help you jquery-ui-bootstrap
Also look at jQuery.noConflict().
You can customize your bootstrap to omit some features in order to prevent confliction: http://getbootstrap.com/customize/