I'm working on a Symfony 2.8 app n the Dev env and everything loads except it is not styled. The Javascript & CSS files don't seem to load.
This is my base.html.twig file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block meta_title %}Welcome!{% endblock %}</title>
<link href="{{ asset('public/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('public/bootstrap-table/dist/bootstrap-table.min.css') }}" rel="stylesheet">
<link href="{{ asset('public/components-font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ asset('public/select2/select2.css') }}" rel="stylesheet">
<link href="{{ asset('bundles/admin/css/select2-bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('bundles/admin/css/styles.css') }}" rel="stylesheet">
<link href="{{ asset('public/multiselect/css/multi-select.css') }}" rel="stylesheet">
{% block stylesheets %}
{% endblock %}
<script src="{{ asset('public/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('public/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('public/bootstrap-table/dist/bootstrap-table.min.js') }}"></script>
<script src="{{ asset('public/bootstrap-table/dist/extensions/cookie/bootstrap-table-cookie.min.js') }}"></script>
<script src="{{ asset('public/jquery.maskedinput/src/jquery.maskedinput.js') }}"></script>
<script src="{{ asset('public/select2/select2.min.js') }}"></script>
<script src="{{ asset('public/moment/min/moment.min.js') }}"></script>
<script src="{{ asset('public/multiselect/js/jquery.multi-select.js') }}"></script>
{% block top_javascripts %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body class='skin-blue sidebar-mini'>
<noscript>
<div class="global-site-notice noscript">
<div class="notice-inner">
<p>
<strong>JavaScript is disabled in your browser.</strong><br>
Please enable JavaScript settings in your browser to allow this website work correctly.
</p>
</div>
</div>
</noscript>
<div class='wrapper'>
{% block body %}{% endblock %}
<footer class="navbar-fixed-bottom footer text-muted main-footer">
© {{ "now"|date("Y") }} TCX - All rights reserved • Version-
1.1.133
</footer>
</div>
{% block bottom_javascripts %}
<script src="{{ asset('public/jquery-slimscroll/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script src="{{ asset('bundles/admin/js/scripts.js') }}"></script>
{% endblock %}
<!-- form focus -->
<script type="text/javascript">
if($('form:first .has-error').length == 0) {
$('form:first *:input[type!=hidden]:enabled:first').focus();
}
</script>
<--------------------------------------------> This is my Bower.JSON:
</body>
</html>
{
"name": "NULL",
"authors": [
"NULL"
],
"description": "",
"main": "",
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.7",
"components-font-awesome": "^4.6.3",
"jquery-slimscroll": "^1.3.8",
"bootstrap-table": "^1.0.0",
"bootstrap-fileinput": "^4.3.5",
"jquery-timepicker-jt": "^1.11.0",
"datepair.js": "^0.4.0",
"jquery.maskedinput": "^1.4.*",
"select2": "3.2",
"moment": "2.17.1",
"fullcalendar": "3.1.0",
"fullcalendar-scheduler": "1.5.0",
"multiselect": "0.9.12"
}
}
The Javascript and CSS files needed are in this Bower.JSON file. So I ran Bower Install and all the packages installed into public/
However when I go to run the app php app/console server:run everything runs, with missing style.
Already tried clearing cache php app/console cache:clear & php app/console assets:install web. All help is much apprecaited!
Picture of Error Log from Safari
The solution was having the bower components installed under web/public. Before they was installed under public/.
Important to note that if you are deploying an app with Symfony make sure that the requried packages are under the web folder.
Related
I'm trying to add a custom UI to my Laravel 9 app. So I'm adding extra CSS and JS files to my app.blade.php But looks like its not loading properly.
As you can see http://127.0.0.1:8000/css/tailwind.output.css and http://127.0.0.1:8000/js/init-alpine.js files not loaded. But when i check default http://127.0.0.1:8000/css/app.css file. Its working. But both of these files resides in the same location, which is resources/css/ and resources/js/ folders. Why those custom css and js files not loaded.
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/tailwind.output.css') }}">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"defer></script>
<script src="{{ asset('js/init-alpine.js') }}" defer></script>
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
I'm using tailwind CSS, livewire, jetstream and Laravel 9
From main parent template I tried calling:
<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >
So all views that extends parent can use these styles but it doesn't work.
However if I put it in the child view, works perfectly.
Already tried using the {{ }} format, and adding type="text/css".
Also checked Including a css file in a blade template?
What is missing??
EDIT: more details...
I have this is the AdminLTE page template (page.blade.php):
#extends('adminlte::master')
#inject('layoutHelper', 'JeroenNoten\LaravelAdminLte\Helpers\LayoutHelper')
#if($layoutHelper->isLayoutTopnavEnabled())
#php( $def_container_class = 'container' )
#else
#php( $def_container_class = 'container-fluid' )
#endif
#section('includes')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css"/>
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
#stop
#section('adminlte_css')
#stack('css')
#yield('css')
#stop
#section('classes_body', $layoutHelper->makeBodyClasses())
#section('body_data', $layoutHelper->makeBodyData())
#section('body')
<div class="wrapper">
{{-- Top Navbar --}}
#if($layoutHelper->isLayoutTopnavEnabled())
#include('adminlte::partials.navbar.navbar-layout-topnav')
#else
#include('adminlte::partials.navbar.navbar')
#endif
{{-- Left Main Sidebar --}}
#if(!$layoutHelper->isLayoutTopnavEnabled())
#include('adminlte::partials.sidebar.left-sidebar')
#endif
{{-- Content Wrapper --}}
<div class="content-wrapper {{ config('adminlte.classes_content_wrapper') ?? '' }}">
{{-- Content Header --}}
<div class="content-header">
<div class="{{ config('adminlte.classes_content_header') ?: $def_container_class }}">
#yield('content_header')
</div>
</div>
{{-- Main Content --}}
<div class="content">
<div class="{{ config('adminlte.classes_content') ?: $def_container_class }}">
#yield('content')
</div>
</div>
</div>
{{-- Footer --}}
#hasSection('footer')
#include('adminlte::partials.footer.footer')
#endif
{{-- Right Control Sidebar --}}
#if(config('adminlte.right_sidebar'))
#include('adminlte::partials.sidebar.right-sidebar')
#endif
</div>
#stop
#section('adminlte_js')
#stack('js')
#yield('js')
#stop
Then In the view I have #extends('adminlte::page')
And the bootstrap and datatables, etc. are working just fine, but my local styles file is not.
UPDATE: I paste here the HTML produced by the page. As I wrote if I put the in the 'css' section in view it produces this url, that works in the browser: http://localhost:5555/css/admin_custom.css
If I inspect the page I can see:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle</title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="stylesheet" href="http://localhost:5555/css/admin_custom.css">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>
Then, If I put it in the template it does not produces the same:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle </title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>
The styles for adminLTE templates wont work if written in page.blade.php, as previoulsly did:
EDIT: more details... I have this is the AdminLTE page template
(page.blade.php)
The styles have to be called in the master.blade.php so to be available for all pages. page.blade.php also extends from master, So: go to master.blade.php search for the {-- Base Stylesheets --}} section and put your code there like this:
{{-- Base Stylesheets --}}
#if(!config('adminlte.enabled_laravel_mix'))
<link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >
{{-- Configured Stylesheets --}}
#include('adminlte::plugins', ['type' => 'css'])
<link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
#else
<link rel="stylesheet" href="{{ mix(config('adminlte.laravel_mix_css_path', 'css/app.css')) }}">
#endif
Note: This fix is for case you have not compile all your styles in app.css and AdminLTE main pages have been published as in this question.
As porloscerros Ψ wrote, you have to write it this way (in between <head> tags)
<link rel="stylesheet" href="{{ mix('css/admin_custom.css') }}">
And if it does not work, try:
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
I added manually the Admin LTE and put it on my theme-asset folder and I imported it like this on my app.blade.php
The stacktrace is showing the end of line of the code. I don't know what's wrong with it. I'm just trying to make it to work and view the admin lte dashboard. Can someone please help me out . I just new to laravel. Hope someone can help me
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="apple-touch-icon" href="https://ielev8net.com/theme-assets/images/logo/ielev8net_logo.png">
<link rel="shortcut icon" type="image/x-icon" href="https://ielev8net.com/theme-assets/images/logo/ielev8net_logo.png">
<link rel="stylesheet" href="{{ asset('theme-assets/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('theme-assets/bower_components/font-awesome/css/font-awesome.min.css') }}">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('theme-assets/bower_components/Ionicons/css/ionicons.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('theme-assets/dist/css/AdminLTE.min.css') }}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{{ asset('theme-assets/dist/css/skins/_all-skins.min.css') }}">
<!-- Morris chart -->
<link rel="stylesheet" href="{{ asset('theme-assets/bower_components/morris.js/morris.css')}}">
<!-- jvectormap -->
<link rel="stylesheet" href="{{ asset('theme-assets/bower_components/jvectormap/jquery-jvectormap.css') }}">
<!-- Date Picker -->
<link rel="stylesheet" href="{{ asset('theme-assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
<!-- Daterange picker -->
<link rel="stylesheet" href="{{ asset('theme-assets/bower_components/bootstrap-daterangepicker/daterangepicker.css') }}">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="{{ asset('theme-assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') }}">
<!-- END Page Level CSS-->
<!-- jQuery 3 -->
<script src="{{ asset('theme-assets/bower_components/jquery/dist/jquery.min.js') }}" type="text/javascript"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('theme-assets/bower_components/jquery-ui/jquery-ui.min.js') }}" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="{{ asset('theme-assets/bower_components/bootstrap/dist/js/bootstrap.min.js') }}" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="{{ asset('theme-assets/bower_components/raphael/raphael.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('theme-assets/bower_components/morris.js/morris.min.js') }}" type="text/javascript"></script>
<!-- Sparkline -->
<script src="{{ asset('theme-assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js') }}" type="text/javascript"></script>
<!-- jvectormap -->
<script src="{{ asset('theme-assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('theme-assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js') }}" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="{{ asset('theme-assets/bower_components/jquery-knob/dist/jquery.knob.min.js') }}" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="{{ asset('theme-assets/bower_components/moment/min/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('theme-assets/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}" type="text/javascript"></script>
<!-- datepicker -->
<script src="{{ asset('theme-assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="{{ asset('theme-assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') }}" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="{{ asset('theme-assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js') }}" type="text/javascript"></script>
<!-- FastClick -->
<script src="{{ asset('theme-assets/bower_components/fastclick/lib/fastclick.js') }}" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="{{ asset('theme-assets/dist/js/adminlte.min.js') }}" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{{ asset('theme-assets/dist/js/pages/dashboard.js') }} " type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{ asset('theme-assets/dist/js/demo.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL JS-->
I'm trying to get the datetimepicker working that can be found here
I installed this package using bower and linked all the stylesheets / js files.
When I visit the page I can only see some parts of the the actual datepicker.
Here are some pictures to have a better look:
My links:
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ asset('js/jquery.min.js') }}" defer></script>
<script src="{{ asset('tether/dist/js/tether.min.js') }}" defer></script>
<script src="{{ asset('js/moment.min.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}" defer></script>
<script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
My HTML:
#extends ('layouts.app')
#section ('content')
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
#endsection
What am I missing here?
Try specifying the format:
$('#datetimepicker1').datetimepicker({
format: 'MM/dd/YYYY'
});
According to the documentation, the format specified in the options defines what components are shown.
Issue Facing - I do have the Base Template with some CSS and JS links, I have created a view page for which I want to add some CSS links which are only specific to this view page and no others view pages, this view page extends from this Base Template. When I add the some CSS links to the view page its Overriding the Base Template CSS and JS files.
Any solution will be appriciated. Thanks in advance.
The following is the snippet of my BaseTemplate -
<!DOCTYPE html>
<html>
<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>{% block title %}Login Page{% endblock %}</title>
<!-- Bootstrap -->
{% block stylesheets %}
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/bootstrap-theme.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
<link href="{{ asset('css/signin.css') }}" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% endblock %}
</head>
...
And following is my view page where I am extending from that Base Template -
{% extends '::base.html.twig' %}
{% block stylesheets %}
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
{% endblock %}
<div class="container">
<form class="form-signin" role="form" action="{{ path("user_auth_homepage") }}" method="POST">
<h2 class="form-signin-heading">Login</h2>
<input class="form-control" name="email" placeholder="Email address" required="" autofocus="" type="email">
<input class="form-control" name="password" placeholder="Password" required="" type="password">
<label class="checkbox">
<input value="remember-me" type="checkbox" name="remember_me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
If you want to inherit and extend a block from parent template you should use {{ parent() }} function like this :
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
{% endblock %}
You can read more detail's in Twig documentation
In your page template do as following:
{% block stylesheets %}
{{ parent() }}
<link href="your_new_css" type="text/css" rel="stylesheet"/>
{% endblock %}
It will print parent content of the stylesheets block and apply your new styles
If you need to add a specific CSS Links and also inherit CSS Links from Base layout
Just use parent() method in your view page
EX:
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('') }}" rel="stylesheet" />
{% endblock %}
Without parent() method into View Page will override all your CSS Links into Base Layout
In the base template move the css links outside of the twig block
<head>
<title>{% block title %}Login Page{% endblock %}</title>
<!-- Bootstrap -->
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/bootstrap-theme.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
<link href="{{ asset('css/signin.css') }}" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% block stylesheets %}
{% endblock %}
</head>
These stylesheets will be available in all pages and your view template can add additional stylesheets.