I would like to add google web font using asset-pipeline. I know how to add fonts via files, but I don't know how to add something like this
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
via asset-pipeline. I have only found tutorials for adding static fonts via files.
Does anyone know what should I do?
Typically you would want to add this to a master.blade.php (something all blade templates will extend)
Asset::add('google-font', 'http://fonts.googleapis.com/css?family=Lato:300,400,700');
Reference Laravel Forum
there is the simple way to do it
{{ HTML::style('http://fonts.googleapis.com/css?family=Playfair+Display') }}
Related
I am doing a laravel project using adminlte, is there a way to use this:
<title>Domínios - Iniciar Sessão</title> <link rel="icon" href="../domain.png">
globally, so I don´t have to put it in everypage?
The name and the icon of tab.
Create a global layout that wraps all your views and includes this line. I suggest reading laravel's blade template page. This is a common problem that this feature is made for.
https://laravel.com/docs/9.x/blade#extending-a-layout
I'm trying to use the default bootstrap css (app.css) that ships with Laravel to style a section of my page - specifically, the form section of my registration page.
I don't want to include app.css in my html header as it gives me undesired effect on other parts of the page. So I want it to style only my html forms within the page.
Currently, I've used either the asset() or HTML::style() methods like this within my form section:
#section('form')
<style> #import "{{ asset('css/app.css') }}"; </style>
<form>...</form>
#endsection
OR
#section('form')
{{ HTML::style('css/app.css') }}
<form>...</form>
#endsection
Both method loads the style correctly, but affects the entire page instead of only the form elements.
I tried using the ViewComposer class to solve this problem by setting a variable in ViewComposer to my desired style - returning it only when I request the required view:
class ViewComposer
{
public function compose(View $view)
{
$data = [];
switch($view->getName())
{
...
case 'sections.register':
$this->data = ['style'=>"<style> #import \"". asset('css/app.css') . "\"; </style>"];
break;
}
return $view->with($this->data);
}
}
However, when I render the sections.register sub-view, I get the style variable like this:
#section('form')
{{ $style ?? '' }}
<form>...</form>
#endsection
the output on the browser is not parsed as css but displayed as-is:
<style> #import "{{ asset('css/app.css') }}"; </style>
So, is there a way I can parse external css for only a given view section within the html page and can it be achieved using the ViewComposer class?
UPDATE:
I was trying a few things and used this:
#section('form')
{!! $style ?? '' !!}
<form>...</form>
#endsection
The css is parsed but still applied to the entire page. I still need it applied to only the form section.
1. One option is to copy only the css you need and paste it into custom css and make a different layout for that view. But that can be tedious work as you said.
2. Another option is to prefix you app.css file. There is a software that can do that here is the tutorial. So if you prefix whole css file with for example: .laravel-app then you can wrap anything that you would like to be styled by app.css like this:
<div class="laravel-app">
<!-- Everything in here will be styled by app.css -->
</div>
This will help you in the long run with your project.
First of all, importing or loading css per-view will be bad for the performance of the application. So, using View Composer to load in css is not advisable. I took a cue from Denis Ćerić's answer, though it wasn't clear at first glance.
Also, the accepted answer on this post made things a little clearer.
The right way to achieve this is to use a css preprocessor. Popular ones are less and sass. I used sass because it is currently adopted by Laravel.
I installed sass on my windows machine following the instructions here.
Create a new scss file: app-custom.scss in the same folder as app.css.
Modify app-custom.scss using nested imports:
.app-form
{
#import 'app';
}
Generate app-custom.css using the sass command on Windows command line:
sass app-custom.scss app-custom.css
Change the class of your form to app-form:
#section('form')
<form class='app-form'>...</form>
#endsection
Include app-custom.css in your header using link tag:
<head>
<link href="{{ asset('css/app-custom.css') }}" rel="stylesheet">
</head>
and you are done.
HINT: if you want to use the style in app.css for multiple separate sections of your page, you can still achieve this from a single scss file. Just include the classes of each section in your scss file like this:
.section-1, .section-2, .section-3
{
#import 'app';
}
I have a sub-view that extend my master-view, and for some reasons all my css doesn't seem to load only on that page. I extend them as usual like I normally do.
view show.blade.php
#extends('layouts.internal.master')
#section('content')
TESTING ...
#stop
I notice, it only break on that route : /account/112
Any hints / suggestion on this will be much appreciated !
Without seeing your file paths or how you are loading your CSS, it's very difficult for us to say but it sounds like your file paths are wrong.
There is a difference between these two:
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="/css/app.css">
Note the forward slash.
The first one is relative to your current path. So, for example, if you're currently at http://localhost:8000/account/112, the first one is like saying http://localhost:8000/account/css/app.css, which is most likely unwanted behavior. The second one is relative to the root directory so it will always be http://localhost:8000/css/app.css, which is probably what you want to do.
Laravel also comes with helpers function like asset so if you decide to use that and do something like this:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
It will generate an absolute URL / full path from your root URL. So, it'll generate something like this:
<link rel="stylesheet" href="http://localhost:8000/css/app.css">
/account and /account/112 can not access same path in same way. Like if /account access a image like 'images/img/img.jpg' , /account/112 need to access it like '../images/img/img.jpg'. Its all about folder structure. Now for your problem you need to use asset like below (laravel 5 specific)
// if you have save css file at as root/public/css/main.css
{!! HTML::style('css/app.css') !!}
remember to add to composer.json
"illuminate/html": "5.*"
And to aliases
'Form' => Illuminate\Html\FormFacade::class,
'HTML' => Illuminate\Html\HtmlFacade::class
Point to be noted:
{{asset('css/some.css')}}
this is for laravel4. you wont get it working in laravel 5.
I need a simple help with cakephp. It may be a problem regarding routes but I couldn't figure out how to solve this problem.
I've put all my css files in webroot/css in my app. In my default layout, I just put a html link <link href="css/bootstrap.min.css" rel="stylesheet"> . It works with my url localhost/items (index function), but it doesn't work when I do localhost/items/view/2 (view function). How can I solve this problem?
Use the HtmlHelper to generate links to assets in webroot as shown in manual.
Why don't you use the HTML Helper like :
echo $this->Html->css('bootstrap.min');
echo $this->Html->css('/assets/css/bootstrap.min');
site example: http://ec2-107-22-119-73.compute-1.amazonaws.com/index.php/info/databases
Working Example: http://jscrollpane.kelvinluck.com/mwheel_intent.html
I cant get scrollwheel to work.
If you cant tell from the URL, my site is an expressionengine site. Using coldfusion and junk like that to build the pages.
anyone? (I tried searching for this issue, but no one seems to simply not be able to make scroll work.)
Ensure the paths to your JavaScript/CSS files are named appropriately and aren't throwing 404 errors.
The easiest way to ensure valid links to your assets is to use the {site_url} single global variable when linking assets in your templates:
<script src="{site_url}/script/jquery.mousewheel.js"></script>
<script src="{site_url}/script/jquery.jscrollpane.min.js"></script>
Which would result in the following:
<script src="http://example.com/script/jquery.mousewheel.js"></script>
<script src="http://example.com/script/jquery.jscrollpane.min.js"></script>
Since you're using ExpressionEngine's templates for your CSS — as opposed to flat files — you may want to give those template names a .css file extension.
So instead of:
<link rel="stylesheet" href="/index.php?css=site/master.v.1324329515" />
You'd have:
<link rel="stylesheet" href="/index.php?css=site/master.css.v.1324329515" />
This isn't absolutely necessary since EE will set the proper text/css MIME type based on the template type. However, it does make reading and debugging the source code easier, and is more of a standard practice.
Understandably, many beginners reference and borrow code from the Agile Records ExpressionEngine Theme that's available during new EE installations, so it's easy to recognize EllisLab's approach to markup and architecture — be it for the better or worse.
Bonus: remove the cache-busting timestamp (v.1324329515) in ExpressionEngine from CSS URLs, use the {path} variable instead of the {stylesheet} variable:
// With Cache-Busting String Appended
// http://example.com/index.php?css=site/master.css.v.1324329515"
<link rel="stylesheet" href="{stylesheet=site/master}" />
// Without Cache-Busting String
// http://example.com/index.php/site/master.css
<link rel="stylesheet" href="{path=site/master}" />