I want to apply margin-bottom on #createNewBook, I added a CSS file in laravel by using <link rel="stylesheet" href="/assets/css/style.css">. But it's not working. Can anyone tell me how to add a CSS file to my laravel project?
This is my HTML code in laravel:
This is CSS code:
This is my directory format:
And this is the output:
Put the assets folder in public then in the blade file use this syntax to load css
{{asset('assets/css/style.css')}}
You have to put your assets folder into the public folder because only the things in the public folder are accessible publicly.
And then in the blade.php file use the following syntax to load CSS.
<link rel="stylesheet" href="{{asset('assets/css/style.css')}}">
Related
I tried to link a css to html in laravel and link an image (both css and image are in public folder) but it does not work. I tried using asset and url but it does not work either. I don't understand what is wrong. This is how I wrote the link:
<link rel="stylesheet" href="/css/styles.css">
<img src="/img/logo-kitsune-dojo.jpg" alt="logo kitsune dojo">
I have already tried asset and url. They don't work. I want mi css and my imagen to link.
use asset() function generates a URL
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">
<img src="{{ asset('img/logo-kitsune-dojo.jpg') }}" alt="logo kitsune dojo">
In Laravel, you can use asset() helper function to link assets like CSS and images:
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
<img src="{{ asset('img/logo-kitsune-dojo.jpg') }}" alt="logo kitsune dojo">
Make sure that the assets path is correct and that the files are in the public directory of the project.
You may solve this problem by using asset() helper function
For css link: If your css exist in public folder folowing this directory you may use this
For Image: If your image exist in public folder folowing this directory you may use this
**To link a CSS page in Laravel, you can follow these steps:
1Create a CSS file in the public folder of your Laravel project. For example, you can create a file named style.css in the public/css folder.
2In your HTML file, add a link to the CSS file in the head section. You can use the asset function provided by Laravel to generate the URL to your CSS file.**
<head>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
**3.Make sure that the URL generated by the asset function is correct. The URL should start with the base URL of your Laravel application, which is usually the root directory of your project.
That's it! Your CSS file should now be linked to your HTML file, and the styles defined in your CSS file should be applied to your HTML content.**
**To add an image to a web page in Laravel, you can follow these steps:
1 Place the image file in the public folder of your Laravel project. For example, you can create a folder named images in the public folder and place your image file in it.
2 In your HTML file, use the img tag to display the image. You can use the asset function provided by Laravel to generate the URL to your image file.**
<img src="{{ asset('images/image_name.jpg') }}" alt="Image description">
**4 Replace image_name.jpg with the name of your image file.
5 Make sure that the URL generated by the asset function is correct. The URL should start with the base URL of your Laravel application, which is usually the root directory of your project.
That's it! Your image should now be displayed on your web page.**
In my project that is developed in laravel, i am trying to use a style.css file using blade engine. but it's not working for me anybody have better idea let me know.
Here is my code sample
<link href="{{ asset('/css/style.css')}}" rel="stylesheet" type="text/css">
it's tag is not working but when i'm us following it's working.
<link href="{{ asset('public/css/style.css')}}" rel="stylesheet" type="text/css">
now i want to now best practices of adding css files and how to include other files. like i've file header.blade.php it hold all css file link now i want to include header.blade.php in home.blade.php file both file in view directory.
Placed your css file inside laravel_project/public/css folder and use the link it into your view like:
<link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css"/>
I think this will help you Thanks.
I think your style.css is stored in public/css directory thats why it allow second you have provided.
And now your header.blade.php holds all your css files so you have to follow laravel's structure in layout if u have app.blade.php or any layout then its perfect otherwise you have to make it own
Sample app.blade.php (stored at views/layout/)
<!DOCTYPE html>
<html>
#include('layouts.partials.header') // path to your header.blade.php
#yield('content')
#include('layouts.partials.footer') // path to your footer.blade.php
</html>
Now this is your layout and you can use your layout and your header as well as footer in your view file like i am creating one blog_list.blade.php which is stored at views directory
blog_list.blade.php
#extends('layouts.app') // we are extending app.blade.php
#section('content')
// here whatever your content
#endsection
You can find more details on laravel's official site laravel-5.4
I hope it helps you. thank you.
I would like to know whether there's an easy common way to include a css file, which is in a folder, from a html/php file inside another folder?
The structure looks like this:
index.php
about
index.php
css
style.css
What I want is to know how to get the correct path to the style.css file inside the css folder from the index.php hidden in that about directory.
This is going in about/index.php?
<link rel="stylesheet" href="../css/style.css" />
.. basically says, "Go up one level from where this script is located."
when i add my css file to laravel project it does not work
why this file make laravel project does not work
and when i remove it form the project it work correctly
I put the css ,images ,and js into public folder
and html into resources folder and use this to require the files
<link rel="stylesheet" href="{{Request::root()}}/webSite/style.css"/>
when i inspect element in browser there is no error
is that correct in css file ?
background-image: url(images/Overlay/1.jpg);
Use this instead
<link rel="stylesheet" href="{{asset('webSite/style.css')}}"/>
asset function returns the path of the public folder with parameter path appended
I have the php file and in that I am linking a HTML file.
include 'practice.html';
In the HTML file I have a few CSS files linked.
<link href="practice1.css" rel="stylesheet" />
<link href="practice2.css" rel="stylesheet" />
Now, what is happening is the Page Template is displaying only the HTML part and not able to access the CSS files.
How can I possibly use CSS files?
PS : ALL my PHP, HTML, and CSS files are under the same folder (wordpress\wp-content\themes\*).
On your PHP template page, use:
<?php require(TEMPLATEPATH.'\practice.html'); ?>
And on your HTML page, use:
<link href="\wordpress\wp-content\themes\YourThemeName\practice1.css" rel="stylesheet">
<link href="\wordpress\wp-content\themes\YourThemeName\practice2.css" rel="stylesheet">
Make sure to replace YourThemeName with, your theme's name. And also to provide the correct path of where your CSS files are located.
If your wondering about what TEMPLATEPATH does, it provides the path to the template in use by WordPress so you do not have to type out the full path ex. \wordpress\wp-content\themes\YourThemeName\
Are you working on a local server or a live website? Depending on which one it is, you will have to change up the paths.
Example:
For a live website use:
/wordpress/wp-content/themes/YourThemeName/
or
For a local server use:
\wordpress\wp-content\themes\YourThemeName\
try using Include PHP function for including HTML file and for the CSS you can simply use echo
<?php
echo '<link href="practice1.css" rel="stylesheet">';
include('practice.html');
?>