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
Related
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 work on a Symfony 3 app which uses Twig for rendering. To make the code more readable and reusable, I need to split a screen in small parts, parts which could be used in other screens (for example a clock widget). At first it seems easy, I could use the include Twig method to include that part of code. The problem is that my clock uses some specific CSS and JS scripts to work.
What would be the best way to create a reusable components composed of HTML, CSS and JS ? Thx in advance !
There is no "Component" concept or approach in Twig, but still you can encapsulate CSS + HTML + JS code in one file and include it as an isolate piece of code:
<style>...</style> {# or use <link href="..."> #}
<div>...</div>
<script>...<script> {# or use <script src="..."> #}
However, probably Twig is not the correct tool to achieve it and you should look at some frontend framework (e.g. VueJS https://v2.vuejs.org/v2/guide/index.html) by passing the data through HTML attributes.
Probably you can use include passing your data to a specific partial component and render it dinamically.
Check it : https://twig.symfony.com/doc/3.x/tags/include.html
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') }}
I have a page called index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
...
<body>
<div class="my_class"></div>
...
</body>
</html>
In mystyle.css there is no declaration for .my_class
I have another file called external_style.css where there is no declaration for .my_class either but there is a class called .new_class
Can not import or append external_style.css - cause it will overwrite other elements.
My question is:
How can I get the properties of .new_class from external_style.css into .my_class without importing the file.
Is there a way to read that file using php?
Is there another better solution?
If .my_class doesn't exist within mystyles.css can you not just take your code from .new_class within external_style.css and create a .my_class in mystyles.css? or have i missed the point?
You may want to look into using a PHP file with a CSS header. This article should get you started: http://sperling.com/examples/pcss/
There are a couple things you can do to achieve what you are trying to accomplish
Move custom layout data to database: Rather than creating custom files for each user store the users custom css information in a database record for the user.
You could easily identify the user and use javascript to update the CSS.
More scalabe style sheets: If importing the the external_style.css is affecting the global layout you should revisit the way you are identifying elements on the page so that does not happen. Then you could simply import the users custom style sheet.
Try using IDs in addition to Classes as well as wrapping sections of content in Divs. Use those identifiers to make sure importing external_style.css does not overwrite everything.
I'm working out a process to save actions that occur from jquery in my view in cakephp.. I figure an easy way to load the saved values, such as the width and height for a DIV, would be to have cakephp echo a variable as their width / height in the css file, much the same way it would do this in the view file.. I guess I'm not sure exactly where to look for info on this, if its in the cakephp cookbook I guess I'm missing it as I don't see how to do it in there.. any advice is appreciated.
This is actually pretty easy (and powerful), and can be done without the aid of CakePHP.
First, make a new file in your webroot called css.php. At the top of that file put the following:
<?php header("Content-Type: text/css"); ?>
Now, link to this file in the head of your layout, just as you would a normal CSS file.
<link rel="stylesheet" href="/path/css.php" type="text/css" />
And there you have it, a dynamic CSS file. You can pass information to it like so:
<link rel="stylesheet" href="/path/css.php?c=red&fw=700" type="text/css" />
CLARIFICATION: To access the variables mentioned above, you would use the $_GET variable in the CSS file. Take a look at the link tag above. To access those variables in the css file, you would do something like this:
.class {color:<?php echo $_GET['c']; ?>;font-weight:<?php echo $_GET['fw']; ?>;}
UPDATE: After viewing the link you posted about the CakePHP HTML Helper, I realized that there is a better way to do this if you intend to pass a lot of variables to the css file.
Create a new model and controller called DynamicStyle and DynamicStylesController (or something similar). Then, make a new layout file called css.ctp that all of this controller's views will use. Declare the content-type header statement in that layout file.
The last step would be to link to a method in that controller from the head of your standard layout header.
Now you could make a database table of css rules and use those with the HTML helper in the css view.
I just realized CakePHP has something for this as well:
http://book.cakephp.org/view/1440/style
So this may come in handy for anyone who comes across this in the future