Hey i'm using laravel 9 here and im using the SB ADMIN template from bootstrap , i'm making the template as a component <x-dashboard >...</x-dashboard> and i'm passing children inside it ! but i want the children to have it's own css ( not the bootstrap one ) which is in my app.css file i added the head just so i can link the css file to the blade file but still doesn't work any solutions ?
seeProscpect.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('../css/app.css') }}">
</head>
<body>
<x-dashboard >
<h3 class="changeColor">TRYING CSS</h3>
</x-dashboard>
</body>
</html>
app.css
.changeColor {
color: green;
}
You have to use #pushonce for this purpose.
#pushonce('styles')
<link href="{{ mix('css/tile.css') }}" rel="stylesheet">
#endpush
Inside your <head> after all other CSS script put #stack('css')
Ex:
<head>
<link rel="stylesheet" href="{{asset('../css/app.css')}}">
#stack('css')
</head>
Then from your children blade, add #push or #pushonce
Ex:
#push('css')
<link rel="stylesheet" href="{{asset('assets/css/blade_style.css')}}" />
<style>
.body {
background: #000 !important;
}
</style>
#endpush
#section
<h1>Children Blade Content</h1>
#endsection
Related
Php code
i searched on the web and i didnt see anything about this it looks like no error css status is 200
css code is at the bottom.
.sagalt {
margin-top: 500px
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Think you are trying to apply CSS to the link. Anchor tag being an inline element, margin top/bottom property alone wont have an effect in it as inline elements flow with content on the page. Use display: inline-block or display: flex or float: left as per your requirement.
.sagalt {
color: red;
margin-top: 100px;
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
This is my directory:
miuse/application
miuse/application/views/templates/header.php
miuse/bootstrap/css
miuse/bootstrap/js
miuse/bootstrap/fonts
This is my controller code:
<?php
class page extends CI_controller{
public function view($page= 'home')
{
if(!file_exists(APPPATH.'views/pages/'.$page.'.php'))
{
show_404();
}
$data['title']='Moodlist home';
$this->load->view('templates/header', $data);
}
}
?>
This is my view code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo $title; ?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="header.css" type="text/css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4">List</h1>
<nav class="col-sm-8 text-right">
<p>Home</p>
<p>Category</p>
<p>About us</p>
</nav>
</div>
</header>
</body>
</html>
when i run my view normally in a browser it shows proper output but when i load it with codeigniter view then it shows different output which i dont want.
I guess your header.css file is not being loaded.
Put the header.css file in miuse/bootstrap/css directory.
And change your code from,
<link rel="stylesheet" href="header.css" type="text/css">
to
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/header.css" type="text/css">
When loading css and other stuff I would recommend using base_url() in your head area
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('bootstrap/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/header.css');?>">
</head>
Make sure you have set the base url in config.php and autoload the url helper.
I have copied my assets folder to public and called my css files using
<link href="{{!! asset('assets/global/plugins/font-awesome/css/font-awesome.min.css') !!}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
but when I open my local host to view my app the css does not working and when I check the css using inspect element it shows this error
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Object not found!</title>
<link rev="made" href="mailto:postmaster#localhost" />
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
body { color: #000000; background-color: #FFFFFF; }
a:link { color: #0000CC; }
p, address {margin-left: 3em;}
span {font-size: smaller;}
/*]]>*/--></style>
</head>
<body>
<h1>Object not found!</h1>
<p>
The requested URL was not found on this server.
The link on the
<a href="http://localhost:7777/laravel/resources/views/login.blade.php">referring
page</a> seems to be wrong or outdated. Please inform the author of
that page
about the error.
</p>
<p>
If you think this is a server error, please contact
the webmaster.
</p>
<h2>Error 404</h2>
<address>
localhost<br />
<span>Apache/2.4.16 (Win32) OpenSSL/1.0.1p PHP/5.6.12</span>
</address>
</body>
</html>
First you put all your css and js file inside public folder.
ie, wamp->www->your project folder->public.
then in the coding section simply use the below mentioned technique.
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.datetimepicker.css"/>
<script type="text/javascript" src="../select/select2.min.js"></script>
<script type="text/javascript" src="../select/select2.js"></script>
<link href="../select/select2.css" rel="stylesheet">
Add a slash to the beginning of your assets urls:
<link href="{{!!asset('/assets/global/plugins/font-awesome/css/font-awesome.min.css') !!}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('/assets/global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
I have a basic webpage made up of a few PHP pages and a few CSS stylesheets. One of these stylesheets is style_common.css which is used by all pages on the website to provide a constant theme. I am having a bit of trouble with this file. I currently have only 2 PHP pages which reference this common CSS file.
The home page (index.php) references the CSS file fine, and the stylesheet styles it as you would expect. I copied the entire contents of index.php and pasted it into a second PHP file, then changed a few minor details such as the heading caption. This new page however, doesn't link to the CSS stylesheet.
My code is below:
style_common.css:
body {
background-color: #32BEED;
}
.header {
text-align: center;
padding: 0px;
}
index.php:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_common.css"/>
</head>
<body>
<div class="header">
<img src="images/logo.png" class="aafclogo">
<h3> Canteen Manager</h3>
<h6>Designed by Me</h6>
</div>
<div class="buttonContainer">
<a href="addstock.php"><div class="button">
<p>Add Stock</p>
</div></a>
<a href="sellitems.php"><div class="button">
<p>Sell Items</p>
</div></a>
<a href="recordstocktake.php"><div class="button">
<p>Record Stocktake</p>
</div></a>
</div>
The second page which I copied from index.php and changed a few minor fields:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
</head>
<body>
<div class="header">
<img src="images/aafclogo.png" class="aafclogo">
<h3>Add Stock</h3>
</div>
<div class="buttonContainer">
<a href="index.php"><div class="button">
<p>Home</p>
</div></a>
</div>
Just to give you an example, the background colour of the second page is white, not the colour specified in the CSS file.
Where am I going wrong? Thanks.
You are having the problem because you never linked
style_common.css
to the second page. Instead you have
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
FIX:
add
<link type="text/css" rel="stylesheet" href="style_common.css"/>
to the second page.
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>