why the css style did not working ? ( Laravel )
I want to ask something because I don't quite understand the file.
I want to create a Login/Register for a User and I found a tutorial to create the login and register I want.
Here tutorial website link: https://medium.com/geekculture/customize-the-login-and-register-page-for-user-admin-in-laravel-v8-9e42127d0185
and also GitHub complete file: https://github.com/sgwebfreelancer/laravel_auth_tutorial
The tutorial has provided a complete file with the login/register for the User and also the Admin Panel.
But there are some problems where the CSS file does not seem to work and the login and register design becomes empty. It should have like a picture. Below me as well as how login and register should be:
in this tutorial it should be like this :
So how to solve this problem? Do you have any problem with css or app.blade.php file?
login.blade.php
@extends('layouts.app')
@section('content')
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one">
<div class="row w-100">
<div class="col-lg-4 mx-auto">
<div class="auto-form-wrapper">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group">
<label class="label">Email</label>
<div class="input-group">
<input id="email" type="email"
class="form-control @error('email') is-invalid @enderror" name="email"
value="{{ old('email') }}" required autocomplete="email" autofocus>
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline"></i>
</span>
</div>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label class="label">Password</label>
<div class="input-group">
<input id="password" type="password"
class="form-control @error('password') is-invalid @enderror" name="password"
required autocomplete="current-password">
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline"></i>
</span>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary submit-btn btn-block">
{{ __('Login') }}
</button>
</div>
<div class="form-group d-flex justify-content-between">
<div class="form-check form-check-flat mt-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" id="remember"
{{ old('remember') ? 'checked' : '' }}> Keep me signed in
</label>
</div>
@if (Route::has('password.request'))
<a class="text-small forgot-password text-black"
href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
<div class="text-block text-center my-3">
<span class="text-small font-weight-semibold">Not a member ?</span>
<a href="register.html" class="text-black text-small">Create new account</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
@endsection
register.blade.php
@extends('layouts.app')
@section('content')
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-center auth register-bg-1 theme-one">
<div class="row w-100">
<div class="col-lg-4 mx-auto">
<h2 class="text-center mb-4">{{ __('Register') }}</h2>
<div class="auto-form-wrapper">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="form-group">
<div class="input-group">
<input id="name" type="text"
class="form-control @error('name') is-invalid @enderror" name="name"
value="{{ old('name') }}" required autocomplete="name" autofocus
placeholder="Name">
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline"></i>
</span>
</div>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="email" type="email"
class="form-control @error('email') is-invalid @enderror" name="email"
value="{{ old('email') }}" required autocomplete="email" placeholder="Email">
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline"></i>
</span>
</div>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="password" type="password"
class="form-control @error('password') is-invalid @enderror" name="password"
required autocomplete="new-password" placeholder="**********">
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline"></i>
</span>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="password-confirm" type="password" class="form-control"
name="password_confirmation" required autocomplete="new-password"
placeholder="**********">
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline"></i>
</span>
</div>
</div>
</div>
<div class="form-group d-flex justify-content-center">
<div class="form-check form-check-flat mt-0">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" checked> I agree to the terms
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary submit-btn btn-block">
{{ __('Register') }}
</button>
</div>
<div class="text-block text-center my-3">
<span class="text-small font-weight-semibold">Already have and account ?</span>
<a href="{{ route('login') }}" class="text-black text-small">{{ __('Login') }}</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
@endsection
css file asset/css/demo_1/style.css you guys see from here
layouts/app.blade.php file you guys can see from here
in my console, I saw my CSS not load it.
Solution
In layouts.app, line 15, you have to change :
href="{{ asset('public/assets/css/shared/style.css')
to
href="{{ asset('/assets/css/shared/style.css')
- Merge two different array
- Merge two indexed arrays without overwriting elements in first array
- Merge items from two multidimensional arrays related by first level indexes
- Laravel PHPUnit mock Request
- Webservice connecting do database with IOS, PHP, REST API, JSON
- Group rows of a 2d array by a column and push rows as subarrays of each group
- How to move Laravel 11 public folder?
- How to return an array from a non-native function call?
- Group 2d array rows by one column and sum another column within each group
- How to get the ID of a payment method in Woocommerce?
- SSL - Access non secure API from secure page
- Some characters in CSV file are not read during PHP fgetcsv()
- Differentiate between a browser GUI request and an AJAX request
- Generate JavaScript with Twig on Symfony 3.0 without interfering with {} in JavaScript code
- Overwrite row data in a 2d array when related data is found in another 2d array
- Merge two flat arrays in an alternating fashion
- combine php array, with matching values
- Missing php_apcu.dll for PHP 8.2 / APCu 5.1.22?
- Array Match & Add Values to First array
- PDOException “could not find driver”
- Merge multple 2d associative arrays into one consolidated 2d associative array
- MySQL query to get column names?
- Bitfinex API V2 BUG apikey: invalid code 10100
- How to check whether a mysql select statement result has a value or not in php?
- SetEnv with php.ini
- Php mb_ereg_match faulty match
- Laravel 8+, pass request into route manually, is it possible?
- How to change Monolog's default date timezone globally in Symfony 2?
- How to add a class alias in Laravel
- How to check and delete existing profile image before updating with a new one?