please help me! In resources/views/welcome.bale.php:
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<div class="factarea overlay">
<h2>Facts that Make us Unique</h2>
</div>
In public folder: css/style.css
.factarea {background-image: url(../img/website.jpg);}
public/img/website.jpg location
I hope the below line will help you to resolve this issue.
You can try this.
background-image: url("/img/website.jpg");
You can try with another way like in-line css and check what we getting the image or not. so we can easily find the correct path.
Thanks
use root path
.factarea {background-image: url(/img/website.jpg);}
like this then
websiteurl/img/website.jpg will work here
websiteurl/public/img/website.jpg will not work only pretty url will work
so in order to work in public url as well you have to add inline css
which is
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<div class="factarea overlay" style="background-image: url({{ asset('img/website.jpg') }})">
<h2>Facts that Make us Unique</h2>
</div>
Related
I actually have a problem loading the css and Javascrip when i use this route for specific user.
Route::get('/auth/{user}','UsersController#view');
but it works when I want to see all users
Route::get('/users','UsersController#show');
I even change the code to this
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel='stylesheet' type='text/css' />
<script src="{{ asset('assets/js/jquery.min.js') }}"> </script>
Seems I like I miss something and I can't see what exactly
A little help please!
I've got specific Form component, which is declared as
Form::component('fcRadio', 'components.form.fcradio', ['name', 'options', 'selected' => null]);
and used as
{{ Form::fcRadio('name', $options }}
What I want is somehow attach custom CSS file, so if the page fires this component at least once, the desired CSS file is included to the <head> of my document.
For example, in Joomla it was like
$this->document->addStylesheet('my_awesome_style.css');
Is there any way to achieve the same in Laravel?
UPD:
I've extended the answers below a bit to let it add multiple styles from multiple templates. Finally, it looks like this:
#section('styles')
#parent
{{HTML::style('css/fcradio.css')}}
#stop
It works fine, but if I use the component twice per page, style is also adds twice. How can I allow multiple but unique entries?
So this is typically how I deal with it:
In your folder: resources/views I create a folder called layout. This folder handles the templates for all my pages.
Then I create a file called default.blade.php. In it I put the bulk of the HTML code. Here's an example of how default.blade.php could look (slimmed down, obviously)
<!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>
#yield('title')
</title>
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<!-- Additional per-page css -->
#yield('css')
</head>
<body>
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<!-- Include per-page JS -->
#yield('js')
</body>
</html>
Right, so essentially what we have so far is the #yield() and asset() helpers.
#yield() is special blade syntax that Laravel uses to say, "Okay. Any time a blade view that is inheriting THIS master template calls the section named in this #yield() I will display that content right here.
asset() is a nifty little helper that basically appends your URL structure onto the string you pass it. So if your url is http://MyGreatSite.com and you use asset('js/script.js') it will spit out a fully qualified URL that will work anywhere on the site (http://MyGreatSite.com/js/script.js). asset() is great because you can use it in blade templates that will get sent out as an email and all of the files will work in an email inbox because they are absolute links.
Right. So now we have this master template and we need to use it. So what I do is create another view in the resources/views directory. Lets say we're doing a contact page. I would make contact.blade.php. Now I want to inherit that master template we created. So we do that like so:
#extends('layout.default)
#section('css')
<link rel="stylesheet" href="{{ asset('css/contact.css') }}">
#stop
#section('title')
Contact Us
#stop
#section('content')
<h1>Contact us</h1>
<p>
Contact us via email: contact#mygreatsite.com
</p>
#stop
#section('js')
<script src="{{ asset('js/contact-form.js') }}"></script>
#stop
Okay, so, first things first. At the very top we tell this blade file that we want to use the template we just made. We use the blade helper #extends() and pass it the path to our view relative to the views directory separated by periods.
Next, we want to create the sections that correspond to the template. We do that by opening the section with #section() and passing the name of the section we want to push this block of content to. We write our content and then we close the section by using #stop. Pretty simple. For images, css, or js, we simply use the asset() helper again.
I know it's a little long-winded, but hopefully that helps and explains the process a little better.
tl;dr: Use #yield(), #section(), and asset().
So I think I understand what you are saying.
In your blade layout file create a section inside the head:
<head>
#yield('componentcss')
</head>
And in the component do:
#section('componentcss')
{{HTML::style('css/fcradio.css')}}
#stop
You could also just include the css but I wouldn't advise this:
#section('componentcss')
<style>
.exampleclass {text-align:center;}
</style>
#stop
Hopefully I have understood you correctly.
I've finally found a bit tricky but working solution:
#hasSection('fcRadioStyle')
#else
#section('fcRadioStyle')
{{Html::style('css/components/fcradio.css')}}
#stop
#section('styles')
#yield('fcRadioStyle')
#append
#endif
This makes by Form::fcRadio append this style only once
I am using the following library to generate PDFs from my views.
Now I am trying to do a custom footer so I created a footer view with the following
<!DOCTYPE html>
<footer class="footer">
<div class="container">
<hr>
<address>
//Some Address
</address>
</div>
</footer>
As per the docs I set the DOCTYPE. Now my main view is where I load the css files etc. In my Controller I do the following
$footer = \View::make('projects.clients.footer')->render();
$pdf = \PDF::loadView('projects.clients.template', compact('project'))->setOption('footer-html', $footer);
return $pdf->download('test.pdf');
So as far as I can tell I am doing everything correctly. Now my PDF displays the footer, but it has none of my own styling applied to it. If I try to load some CSS files within the footer template, the footer does not display.
How can I make sure the footer has the appropiate styles applied to it?
Thanks
try to load your css like that:
<link rel="stylesheet" href="{{ public_path('bootstrap/css/bootstrap.min.css')}}">
What I want to do is get the id from a button on my view:
<button type="submit" id="stuff">
to my controller, so I can change the style with:
echo '<style type="text/css">
#stuff{
background-color: #11eb00;
}
</style>';
Is this possible in CodeIgniter, or am I doing this completely wrong?
You shouldn't need to use PHP to output any css. This would be a general misuse of the intended system.
You can just put the css style as you defined it in the html, or ideally in its own css file that is properly linked in the header.
<link rel="stylesheet" type="text/css" href="/path-to-your-stylesheet.css">
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options