How to Add External CSS in Laravel 5.4 - php

I am new in Laravel...
web.php
<?php
Route::get('/', function () {
return view('method1.home');
});
home.blade.php
#extends('dashboard')
dashboard.blade.php
<!DOCTYPE html>
<html class="no-js">
<head>
#include('includes.head')
</head>
<body>
do something...
</body>
head.blade.php
<link rel="stylesheet" href="{{ URL::asset('front_view/css/main.css') }}">
<link rel="stylesheet" href="{{ URL::asset('front_view/css/shop.css') }}">
<script src="{{ asset('front_view/js/vendor/modernizr-2.6.2.min.js') }}"></script>
The path and folder name is correct.
But the CSS is not working.

open or create file if not exist constants.php inside config folder and then add this line inside that file
define('SITE_PATH', 'http://localhost:8000/'); // write here you site url
and then use like this in view
<link rel="stylesheet" type="text/css" href="<?php echo SITE_PATH; ?>css/custom.css">
it will search for custom.css inside public/css folder so create css folder inside public folder and the create your custom.css or create directly inside you public folder

Related

Laravel CSS and Bootstrap doesn't working

I created a new Laravel project and downloaded the bootstrap CSS and JS files and put the CSS file in resources/css and the JS files of bootstrap and popper and jQuery in resources/js and in the welcome.blade.php I linked the CSS file and the JS files like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Osama The Coder</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<section class="text-danger">
Hello World
</section>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>
when I opened the project it was just the text without any styles or Bootstrap font-family
even when I linked the app.css and applied color red to the section element I doesn't see any changes
Please follow the following steps
Put all your static assets in public directory
Organize your assets in different folders e.g public/js for js related files and public/css for css related files
Then access your files using the helper method like below
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
/* or js files */
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>

Why does my laravel project display #extends, #yield and #section as plain text?

I created a new laravel project and it displays #extends, #yield and #section as plain text, I have php installed on laragon and everything works fine.
This is my main layout file master.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ URL::to('src/css/app.css') }}">
#yield('styles')
</head>
<body>
#include('partials.header')
<div class="container">
#yield('content')
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
#yield('scripts')
</body>
</html>
And this is the index.blade.php which is the main part of the project
#extends ('layouts.master')
#section('title')
Laravel Shopping Cart
#endsection
And it just displays like this
I dont understand why they dont work alsou my api.php
has this code added for it to work
Route::get('/', function () {
return view('shop.index');
});
Remove the space in #extends ('layouts.master').
you mistake a few line,
remove space on this code
#extends('layouts.master')
and make sure your folder position resource->view->shop->index.blade.php
I hadnt run the php artisan serve on my project folder, that was causing the issue, thank you to everyone though!!

Integrate Bootstrap on CodeIgniter

I'm trying to use bootstrap on a codeigniter web but it looks like the bootstrap files are not found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="<?php echo base_url('application/bootstrap/css/bootstrap.min.css');?>" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url('application/bootstrap/js/bootstrap.min.js');?>"></script>
I've checked the paths generated by base_url() and it are correct.
move bootstrap folder on root location, because CI is understanding application folder as controller although application folder is restricted from client request by /application/.htaccess file
|-
|-application
|-bootstrap
//and use path as
<?php echo base_url('bootstrap/css/bootstrap.min.css');?>
Here's the best guide I've found so far:
How to include bootstrap in CI
In short:
Download bootstrap
Put it in an assets folder on same level as application folder
Also put jquery
Include css in header and jquery in footer of your templates:
<html>
<head>
<title>CodeIgniter Tutorial</title>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>" />
</head>
<body>
<h1>H_E_A_D_E_R</h1>
and :
<hr/>
<em>© 2016</em>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-3.1.1.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</body>
</html>
Don't forget to include the CodeIgniter URL helper in your controller
$this->load->helper('url');
Just sharing over here so that you no need to combine folders manually. I used this package offered from github regularly to commit new projects. Of course you will have to modify the application/config/config.php to get things work !
https://github.com/sjlu/CodeIgniter-Bootstrap
Cheers !
Create a folder(assets) in Codeigniter root directly (Same level to application folder)
Paste your bootstrap files into that folder
add link code in your view file
<link type="text/css" href="<?= base_url(); ?>assets/bootstrap.min.css" rel="stylesheet">
add this line in your controller file application/cotrollers/test.php
<?php
class Test extends CI_Controller {
public function index()
{
$this->load->helper('url'); // Load url links
$this->load->view('index'); //Load view page
}
}
?>
Now you can use bootstrap classes in your view
Download the Bootstrap file from the internet if you want to work offline
Unzip and rename and copy to root folder. If you put it in application folder, .htaccess will not allow it to be accessed.
Add the link like the following line of code:
<link href="<?php echo base_url('assets/css/bootstrap.min.css');?> rel="stylesheet">
If you use the Ci4 , add the folder 'bootstrap' in the default folder 'public'.
Thanks

Adding Css file

laravel 4.2: my demo project in ytform when i try to add css file (style.css) from public folder having another folder, css folder. try to get any class its not working .
in View: i have an other folder, name layouts and i am accessing here css file but not working?
where in master.blade.php
<head>
#section('head')
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
#show
</head>
i try with given both ways but in vain, css file not supporting in any view folder files how add css files
<link rel="stylesheet" type="text/css" href="/css/style.css">
{{HTML::style('css/style.css')}}
any solution or mistake ?
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
You can try this
or
{{ HTML::style(asset('css/site.css'), array('rel' => 'stylesheet', 'type' => 'text/css')) }}
and the css files needs to be in the public folder for this to work
Just include some lines in Blade template
{{ HTML::style('css/main.css') }}
See here as a reference

How to apply the css pages and javascript pages into /views pages properly in phalcon

This is my phalcon project folder hierarchy.
custom
/app
/controllers
UserController.php
/models
/views
/user
register.volt
/public
/js
jquery.min.js
/css
style.css
I have added these style.css file and jquery.min.js file into /views/user/register.volt page, when I view source, those files have been linked as below
<link rel="stylesheet" type="text/css" href="/custom/css/style.css" />
<script type="text/javascript" src="/custom/js/jquery.min.js"></script>
So styles and scripts were not added properly. How can I correct above two links as below.
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
The controller and action I used is below
class UserController extends \Phalcon\Mvc\Controller
{
public function indexAction() {
}
public function registerAction() {
$this->assets
->addCss('css/style.css')
$this->assets
->addJs('js/jquery.min.js')
}
}
The register.volt page is below
<!DOCTYPE html>
<html>
<head>
<title>Phalcon PHP Framework</title>
{{ assets.outputCss() }}
{{ assets.outputJs() }}
</head>
<body>
{{ content() }}
</body>
</html>
check your index.php or services.php or any other place, where your services are. You assets are using prefix. Read more about them in docs: http://docs.phalconphp.com/en/latest/reference/assets.html#prefixes
Try searching your project files for this line:
->setPrefix('

Categories