I am beginner in Laravel 4 and I have include css file using HTML class but it's not working so please help me.
My code is :-
In view :- model_window.php
<?php HTML::style('css/style.css'); ?>
<input type="submit" value="show" name=""show_button>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
</div>
</div>
my css file :- in public -> css -> style.css
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
you can rename your file to such as index.blade.php second of that must be have blade and you can simply use:
{{ HTML::style('public/css/index.css') }}
{{ HTML::script('public/js/jquery.pnotify.min.js') }}
you must to put files into public directory and then can easily use
<?php echo HTML::style('css/style.css'); ?>
You always have to include your CSS files in the <head> section of your HTML. That's why your styles aren't applied.
And the relevant line should be:
<?php echo HTML::style('css/style.css'); ?>
Your view is invalid. You need to include link to .css file between tags.
<!doctype html>
<html lang="en">
<head>
<?=HTML::style('link/to/style.css')?>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="submit" value="show" name=""show_button>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
</div>
</div>
</body>
</html>
Now, it will work.
Related
What I've done so far
First of all I'm REALLY NEW at laravel. I'm watching a great tutorial on YouTube and following most of the instructions. I uploaded the project to my domain, because I wanted to try out how the database connections worked in a production environment and using MySql (the guy uses sqlite in the video).
Even though I managed to make the project work as its supposed to, when I open up the page, it doesn't look alright, the smaller the screen is, the worst it looks, you can move sideways (it's hideous, really).
It used to work fine
When I created a blank laravel project from hostinger, and I accesed it with my cellphone, for instance, it worked well, and by that I mean that the font that said "Laravel" had margins and everything looked centered and as one is supposed to see a bootstrapped page. After I created a project following the tutorial and uploaded it, the nightmare started.
Showing you the code
The base laravel project says "Laravel" where my project says "gastiGram" (It's commented as "¡¡¡HERE IS THE PROBLEM!!!"); maybe with the less letters it works well on mobile (of course I'm kidding, I must have messed up somewhere). This is the code, guys and gals, so maybe you can help me out. Thanks.
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gastiGram</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS THE PROBLEM!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
</div>
</body>
</html>
As no one seemed to find an answer for me...
I tried what others said and my conclusion is that it wasn't a problem with bootstrap nor vue. I guess it was the fact that the classes content and title m-b-md didn't provide the desire responsiveness I expected from the text
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS WHERE THE PROBLEM WAS!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
I'm willing to accept an answer that demonstrates that what I'm saying is wrong and I can apply other solution to my problem in this project.
Kamlesh Paul suggestions were useful to me... now I have a little bit of a better understanding on how laravel works; still it was insufficient since the font was collapsing sideways applying what he said would work, but didn't, so I just applied the style manually
<h1 style="font-size:20vw;">gastiGram</h1>
<link href="{{asset('css/app.css')}}" rel="stylesheet">
I solved the problem placing this code in head section of welcome.blade.php page.
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
I have a page with list of 18 links in sidebar, and on clicking a link main section image must change. By default first images is visible. I know it can be done. please help me.
Thanks
kristtee
This should be enough to get you moving in the right direction. This particular example uses jQuery and is only one of many ways to implement something like this.
<!DOCTYPE html>
<html>
<head>
<style>
.main img {
width: 500px;
height: 500px;
}
.thumbs img {
width: 50px;
height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat">
</div>
<div class="thumbs">
<img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.thumbs img').on('click', function(){
var src = $(this).attr('src');
$('.main img').attr('src', src);
})
})
</script>
</body>
</html>
I've run npm run watch and received the message
This dependency was not found:
* in ./resources/assets/js/app.js
To install it, you can run: npm install --save
So I ran npm install --save but still get the same message.
From my understanding, I need npm run or npm run watch to load the Vue files in Laravel.
For example, in 'resources/assets/js/components/Example.vue' file, I made edits to it but when I load up 'resources/views/welcome.blade.php' file, which I have as follows, the update from Example.vue file does not load.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<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>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif
<div id="app">
<example></example>
</div>
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Documentation
Laracasts
News
Forge
GitHub
</div>
</div>
</div>
<script src='js/app.js'></script>
</body>
</html>
(I only added in the script src link and the div with the 'app' id and the 'example' component)
What must I do to load the changes made to the Example.vue file? After this, I need to create new components in Vue.js in Laravel as well for my application.
You need to run :
npm install
then :
npm run dev
Eventually I figured it out what happens. I don't know why exactly but I have got the answer:
You are trying to include a vue component in a non-layout page like welcome.blade.php. Try wrapping this single page in a layout and add your component, in this case <example></example>. Be sure you are linking to your app.js.
Updated:
This is what happens exactly: Answer.
I'm having a issue with the min-height in firefox, I'm trying to put it at 100% but it is not working. In Chrome it works perfectly.
My code is:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/main.css"/>
</head>
<body>
<div class="main">
<div class="header">Here is the header</div>
<div class="content ">Here is the content</div>
<div class="footer">Here is the footer</div>
</div>
</body>
</html>
And the css file is
.header {
height:160px;
}
.content{
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer{
margin: -215px auto 0 0;
height: 55px;
}
All I'm trying to do is to keep the footer at the bottom of the page, in Chrome it is working, but in firefox it takes no height for the content.
I've been looking for the solution and in many people say to put
#page{min-height:100%;}
html, body{min-height:100%;}
but it makes the same, it still works in chrome but not in firefox.
Can somebody help me?
Thanks
if you're just trying to keep the footer at the bottom you could use
.footer{
position:fixed; /*or absolute, or whatever*/
bottom:0px;
height: 55px;
}