0

So im working on a blog website and i added a layout file. So i made it such that when i click on a blog it shows more info about it in another page (shows.blade.php). the shows page extends the layout page but doesn't show the css or js.It doesn't show the images either so i assume that its either i have referenced it wrongly or i havent created the right sections. When i open the layouts file everything's working correctly! However when i click on a blog to take me to the other page none of the css/js is working. Here's the shows.blade.php

    
    @extends('layouts.layout')
@section('content')
    @parent
<div class="card">
<h1>{{$post->title}}</h1>
<small>{{$post->created_at}}</small>
<small>{{$post->category}}</small>
<small>{{$post->body}}</small>
<small>{{$post->tags}}</small>
</div>


@endsection

and here's the layouts file where i included some code from a template. when i open this the styles are working just well

    <!DOCTYPE html>
<html>
<head>

@section('head')
    <meta charset="utf-8">
    <title>Bloger</title>
    <!-- Description, Keywords and Author -->
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your,Keywords">
    <meta name="author" content="ResponsiveWebInc">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Styles -->
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font awesome CSS -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="shortcut icon" href="#">
    @show
</head>

<body>

<div class="wrapper">

    <!-- header -->
    <header>
        <!-- navigation -->
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img class="img-responsive" src="images/logo.png" alt="Logo" /></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="login.html">New Blog</a></li>
                        <li><a href="registration.html">Signup</a></li>
                        <li><a href="login.html">Login</a></li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">

                                <li><a href="#blog">Create a blog</a></li>
                                <li><a href="#subscribe">Subscribe</a></li>
                                <li><a href="#team">Executive Team</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>


    <div class="event" id="event">
        <div class="container">
            <div class="default-heading">
                <!-- heading -->
                <h2>Upcoming events</h2>
                @yield('content')

            </div>


        </div>
    </div>
    <!-- events end -->


    <footer>
        <div class="container">
            <p><a href="#">Home</a> | <a href="#work">works</a> | <a href="#team">Team</a> | <a href="#contact">Contact</a></p>
            <div class="social">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-dribbble"></i></a>
                <a href="#"><i class="fa fa-linkedin"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>
            </div>
            <!-- copy right -->
            <!-- This theme comes under Creative Commons Attribution 4.0 Unported. So don't remove below link back -->
            <p class="copy-right">Copyright &copy; 2014 <a href="#">Your Site</a> | Designed By : <a href="http://www.indioweb.in/portfolio">IndioWeb</a>, All rights reserved. </p>
        </div>
    </footer>

</div>


<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
</body>
</html>
Improve this question

2 Answers 2

Reset to default
1

Give a / (slash) begin of your css, js and image path, Like :

href="css/bootstrap.min.css"

Change to :

href="/css/bootstrap.min.css"

Because / will return the root of the site.

It's done in order to root the path (making it an absolute path).

It ensures that the path is not relative but read from the root of the site.

This allows one to move a file around and not have to change the links to the different resources.

You need to change all the path, like :

<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">

Even also change the image path :

src="/images/logo.png"
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Didn't solve it. It works without the slash but not on the shows.blade.php. Maybe its something to do with the blade sections
It will work without slash (/) only on root, ex : domain.com, when you go domain.com/blog or any other sub directory it won't work.
Oh actually i tried it again and it worked! Thank you so much. Sorry Im just starting out laravel. And learning bit by bit
@Brian, I know that's why I added more on this answer. Btw, It not laravel related issue, its about html external css path issue. Keep coding up. Good Luck
1

You are loading assets like:

<link href="css/font-awesome.min.css" rel="stylesheet">

So for exmaple if you are on website.com everything may load fine.

Files will be loaded from https://website.com/css/font-awesome.min.css etc.

BUT if you visit website.com/post files will be loaded from https://website.com/**post**/css/font-awesome.min.css that may result in 404 error.

So you can either add a forward slash:

<link href="/css/font-awesome.min.css" rel="stylesheet">

so all files will be loaded from the root folder.

Or a way that I prefer using the asset method

The asset function generates a URL for an asset using the current scheme of the request (HTTP or HTTPS):

<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">
Improve this answer

1 Comment

Thank you so much! I'll use the assets method. But isn't it supposed to be {{asset('css/font-awesome.min.css')}}. But thanks im just starting out in laravel. so i don't know much

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.