I have included a _construct() function into my BaseController to include CSS and Javascript using the Asset::add command. However, the CSS doesn't seem to be loading in. The view is loading correctly (so I know there are no errors or exceptions being thrown), but the CSS is not being applied.
For one view, I have:
<html>
<body>
<div class="banner-image"></div>
</body>
</html>
In the CSS, banner-image is defined as:
.banner-image{background:transparent url(/assets/images/hires_080820-F-5957S-987c.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover; height:800px; min-width: 1200px;}
I have the assets folder inside my public folder.
However, the image is not loading on the page (the page remains blank). Any ideas why this would be happening?
Have you dumped the assets in the header anywhere??
like this...
<head>
{{Asset::styles();}}
</head>
But I think that only works with Laravel 3....
It is my understanding that assets are called differently in L4
Anyway....
I just echo them directly into my header views...Like so...
echo asset('css/yourcssfile.css');
or, if you're using Blade templating..
{{asset('css/yourcssfile.css')}}
Also...assuming your css folder is directly in the public folder like public/css
Then the path to your image background would change to this...
.banner-image{background:transparent url('../assets/images/hires_080820-F-5957S-987c.jpg') no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover; height:800px; min-width: 1200px;}
Because you need to get out of the css folder, so you apply ../
Also it's good to put single quotes around paths
Place the css and js files in the public folder, then load in them as the name.blade.php files are in the public folder too.
Related
I'm trying to come up with a system where visual components like foo or faa would be stored in the /components folder, and each component would be in its folder with that components files, say /foo, and the component files foo.component.css and foo.component.php inside it.
The name.component.php has some HTML and a style <link> inside, referring to the name.component.css. which styles that component. Components are included in page files, such as index.php, which gets its <head> tag from head.php, which is outside the root.
The file hierarchy would look like this:
├──* head.php
└──* /root
├──* index.php
└──* /components
├──* /foo
│ ├── foo.component.css
│ └── foo.component.php
└──* /faa
├── faa.component.css
└── faa.component.php
When index.php includes a component, its CSS will be added outside the <head>, which I would like to avoid. Is there a way to move the CSS link to the document <head> during the PHP execution, for example, with a custom function? The CSS needs to be moved from the name.component.php specifically, so manually adding the CSS to the head.php won't do.
File: head.php
<head>
<!-- Other non-component stylesheets here; -->
<!-- Component stylesheets would be moved here during PHP execution; -->
</head>
<body>
File: index.php
require_once("../head.php");
require_once("coponents/foo.component.php");
File: foo.component.php
// Can this be moved to the head during execution from this folder?
echo('<link href="/components/foo/foo.component.css" rel="stylesheet">');
// Some HTML elements here...
// Trigger something here that moves the CSS link to the head.php
Could buffering be an option here? Any pointers would be appreciated.
Should your component really define the css with an echo?
Your index.php could insert it, if you followed a naming convention. The problem you'll see is when you have more complexe things to do...
The way I'd do it is to create some sort of manifest for your component. You'd have a class that would list the required css files, javascript files (why not) and template files. Your index.php could easily run through the definition and include at the proper places.
// File foo.manifest.php
class FooComponent implements Component{
public $stylesheets = ['foo.component.css'];
public $javascripts= ['foo.component.js'];
public $dependsOn = []; // You could set dependencies here so other components are loaded if needed.
public $template = 'foo.component.php';
}
You index would load up the class, and loop through its stylesheets to echo them at the right place.
$components = [new Foo(),new Faa()];
foreach($components as $component){
foreach($component->stylesheet as $stylesheet){
echo ('<link href="'.$stylesheet.'" rel="stylesheet">');
}
}
require_once("../head.php");
foreach($components as $component){
require_once($component->template);
}
You'll have to figure out how to play with the paths tough, either your manifest declares them relative to the index.php or you find a way to know the file from where the manifest class comes from so you can make a relative path from it, unfortunately I'm not very good at PHP for this...
What I am doing in the website I am working on now is to have a single head.php file which I bring into the PHP files for the various pages on my site. Sometimes a particular PHP file for one of the pages may require a different JS file or CSS file. So, I have <?= $headEls ?> inside the head element in head.php.
Now, inside one of the PHP files for the pages I can assign a value to $headEls which is just a string for any script or link elements that may be required.
One problem is that with the above system you have to assign a value to $headEls inside every PHP file (even if you just make it an empty string) or you get an error trying to access an undefined variable. In order to get round that I put the following line inside head.php before trying to access $headEls: The line is $headEls = isset($headEls) ? $headEls : '';. So now I only have to assign a value to $headEls if I actually have a CSS or JS file(s) I want to bring into it.
I am sure that better systems can be thought of but it does work and I do not want to use a framework which solves all these problems plus ones I have never thought about but involves 1000s of files on my server and my local machine.
Hi everyone I'm a beginner in Laravel, I have a problem in the page master.blade.php, i.e., that CSS does not apply and when I open the source and I click on the link css it takes me to a HTML page
This is the source code :
This is the link of my css :
Remove all html code tags from your css file (<!DOCTYPE html>, <html>, <head> etc).
See some more information here: http://www.w3schools.com/css/css_howto.asp
try to do it like this
{{ url('css/custom.css'); }}
put ur css in the public folder ( public/css/custom.css ) same is for js
Hey everyone thanks for all, i fix my problem it's just in the folder public adding another folder assets and the style will be in this folder assets in the folder public not resources.
-like this :
public/assets/mystyle.css
im new to PHP programming and im facing with a problem.
I want to add my css file to my php page. its in folder named css.
my fonts,pictures, etc. are on other folders.
my php page is in folder named beginer. when i want to link my css file to this page, i need to give every classes that i wrote the specific address to them. it should be change for a every folder.
for example:
body{
background-image:url(images/bg.jpg);
}
it works fine for my index.php file which is in root. but my other files which are in other folders, the address needs to be changed.
it will be like this:
body{
background-image:url(../images/bg.jpg);
}
whats the solution for this issue?
thanks in advanced.
You can add css in php like you do in any html page.
eg :
<?php
-------------------
-------------------
?>
<style type="text/css">
-------------------
---------
your css code here
</style>
You need to add html below your php codes in order to call your css files. And for the images files inside different folder, put it in the root directory where your index.php is so you don't need to use ../ on every css. It should be something like this;
<?php codes goes here ?>
<html>
<head>
<style type="text/css">
body{
background-image:url(/images/bg.jpg);
}
</style>
</head>
</html>
So your root directory will consists of the following files:
index.php
images folder
i want to put variable inside css but i don't know how to do it. I have created a php file named style.css.php containing this simple example:
<?php $background = 'blue'; ?>
<style type="text/css">
body {background: <?php echo $background; ?>;}
</style>
But is this a good method? I need to create a customizable theme. The other universal stylesheets are in a normal css file.
Please help.
This question already has an answer.
By the way these link will help you to implement php inside css:
https://css-tricks.com/css-variables-with-php/
How to use PHP inside css file
How do i run PHP inside CSS
I think your approach is already good enough, I'm guessing you are including your style.css.php in the head, potentially putting a lot of CSS there, which isn't necessarily a bad thing.
You don't really have to include your CSS files if you need them on every page anyway, putting them directly into the file saves a HTTP Request but makes your file bigger - but bigger file size doesn't matter if you would load the css file anyway. This way you have even finer control over what gets loaded and what does not, which usually shouldn't be necessary.
I am facing a critical issue during my project. I am working on MVC model and in the view folder my css sheet is present. on which i put a code for the body element like this
body{
margin-left:250px;
background-image:url("/image/background.jpg");
}
MVC structure is like this
MVC---
-
- View
- css
-stylesheet.css
- Controller
- Model
-image
index.php
how could i able to fetch the code on css .. it's absolutely supporting me to fetch images on my html pages when i anchoring them. but it's not be fetching by stylesheet. please also specify the reason behind it as well.
body{
margin-left:250px;
background-image:url("../../image/background.jpg");
}
your style-sheet file is view/css so you need to get back with ../ two times to access image folder.
you can use this as
#base-url: "../../image"; /* path to image/ you can use http url also */
background-image: url("#{base-url}/background.jpg");