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" />
Related
I'm working on a Laravel project which uses Webflow's CSS framework rather than the default bootstrap framework. It works great for most pages, but I do have a 'profile' page where the CSS does not work at all. I found out it's because the route for the page uses a variable, it looks like this:
Route::get('/chum/{id}', 'App\Http\Controllers\ProfilesController#display');
The function:
public function display($id){
$users = User::findOrFail($id);
$following = $users->followings->count();
$followers = $users->followers->count();
return view('profile', [
'users' => $users,
'following' => $following,
'followers' => $followers
]);
As you can see you go to the URL along with the id of the user's profile and it should bring you there. But for some reason the fact that you're adding that variable to the end of the URL causes the CSS to not work at all. If it helps at all these are the stylesheets and javascript files I'm using in the boilerplate.
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Sun Nov 29 2020 00:43:15 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="5fc2087d6594016e2f088aed" data-wf-site="5fc06e9787e537386fa53575">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta content="Profile" property="og:title">
<meta content="Profile" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Courier Prime:regular,italic,700,700italic"]
}
});
</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">
! function(o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
(Content would go here.)
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5fc06e9787e537386fa53575" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
You should change the path/url of your asset to root folder of your site. Maybe just need / at beginning. change
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
to
<link href="/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/css/webflow.css" rel="stylesheet" type="text/css">
<link href="/css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
or you can also change with asset helper function of laravel to add your full URL of the current host. like
<link href="{{asset('css/normalize.css')}}" rel="stylesheet" type="text/css">
{{asset('css/normalize.css')}} will be https://yourhost.com/css/normalize.css
i been work on php Template (.dwt.php) and in the header i put fontawsome css
but the font awesome not work whatever i do i try change fonts paths and its not work here code of the php template
<?php
require "header.php";
if(!$_SESSION['UserAssoc']['Administrator']) Redirect("home.php", "Insufficient Privileges");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>NOMS</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen" />
<link href="css/thin-admin.css" rel="stylesheet" media="screen" />
<link href="css/font-awesome.css" rel="stylesheet" media="screen" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/dashboard.css" rel="stylesheet" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/smooth-sliding-menu.js"></script>
</head>
and here my fontawsome.css file
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
and i have all this fonts in folder called fonts and the fontawsome.css in the css folder can anyone please help?
You don't need to load FontAwesome like that; you can just use the stylesheet. Don't need to use fontface:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
I am having trouble with applying CSS style in my view.
I have set base_url in config.php also..
config['base_url']='http://localhost/test_project/'
My code is
<html>
<head>
<title>Untitled Document</title>
<link type="text/css" href="<?php echo base_url()?> css/mycss.css" >
</link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
My CSS code is
p
{
color:#0066CC;
}
But it shows only simple text..
How to apply CSS in codeigniter....
Put the path inside the function. Include rel="stylesheet" in the link tag. You don't need the closing </link> either.
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/mycss.css'); ?>">
View the source of the page, you should see the CSS included like this
<link rel="stylesheet" type="text/css" href="http://localhost/test_project/css/mycss.css">
You need put in html tag link the attribute rel="stylesheet"
<link type="text/css" href="<?php echo base_url('css/mycss.css') ?>" rel="stylesheet" >
Check with your firebug if your css files is load fine.
You could use html tag called "base" for example:
<base href="http://url" />
In your code:
<html>
<head>
<title>Untitled Document</title>
<base href="<?php echo base_url()?>" />
<link type="text/css" href="css/mycss.css" rel="stylesheet"></link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
I use the default function of codeigniter. For example:
echo link_tag('assets/css/bootstrap.css');
I have a Header File by the name header.php which goes like this :
It is inside a folder called includes so the path is includes/header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>***</title>
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.css' type='text/css' media='screen' />
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.print.css' type='text/css' media='print' />
<!-- Styles -->
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<!--[if IE]>
<link rel='stylesheet' href='../_layout/IE.css' type='text/css' media='all' />
<![endif]-->
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7'></script>
<!-- WYSISYG Editor -->
<script type='text/javascript' src='../_layout/scripts/nicEdit/nicEdit.js'></script>
<!-- Forms Elemets -->
<script type='text/javascript' src='../_layout/scripts/jquery.uniform/jquery.uniform.min.js'></script>
<link rel='stylesheet' href='../_layout/scripts/jquery.uniform/uniform.default.css' type='text/css' media='screen' />
<!-- Scripts -->
<script type='text/javascript' src='../_layout/custom.js'></script>
</head>
<body>
<div id="layout">
<div id="header-wrapper">
<div id="header">
<div id="user-wrapper" class="fixed">
<div class="color-scheme">
</div>
<div class='user'>
<?php
if($_SESSION['user'] != 'NULL')
{
?>
<img src="../_content/user-img.png" alt="" />
<span>Welcome Admin <?PHP echo $_SESSION['user']; ?></span>
<span class="logout">Logout</span>
<?php
}
?>
</div>
</div>
<div id="launcher-wrapper" class="fixed"><img src="../_layout/images/NGBU Logo.png" width="68" height="81" alt="logo" style="margin-left:35px;" /> <img src="../_content/NGBU_logo.png" width="777" height="57" alt="logo" longdesc="http://index.php" style="margin-top: 25px; float: left; margin-left: 25px;"/></div>
</div>
</div>
I am calling this file at the beginning of my Index.php but for some reasons its not rendering from the hosted server although it is being rendered when i was testing it under localhost?
My index.php which is inside a folder admin goes like :
<?PHP
session_start();
ob_start();
$_SESSION['user'] = "NULL";
$_SESSION['password'] = "";
$_SESSION['error'] = 0;
include_once("../includes/header.php");
if(!$_SESSION['error'])
$_SESSION['error'] = "Please Login to Continue";
?>
<?PHP
if(isset($_REQUEST['check']))
{
if(!$_REQUEST['User'] == "")
{
if(!$_REQUEST['Password'] == "")
{
$_SESSION['user'] = $_REQUEST['User'];
$_SESSION['password'] = $_REQUEST['Password'];
unset($_SESSION['error']);
header('Location: checklogin.php');
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
?>
<DIV class="page fixed">
<DIV id="sidebar" style="height:400px; width:250px; margin-left:5px;"> </DIV>
<DIV id="content">
<?PHP
echo "<h1 style='margin-left:150px;' >".$_SESSION['error']."</h1>";
?>
<FORM action="index.php" method="post" name="loginfrm" class="form-elements-inputs" style="margin-left:150px;width:90px;">
<INPUT class="normal" type="text" name="User" value="User Name" /><BR />
<INPUT class="normal" type="password" name="Password" value="Password" /><BR />
<INPUT type="hidden" name="check" value="login" />
<INPUT type="submit" value="Login" class="button-orange" style="width:100px; margin:auto;" />
</FORM>
</DIV>
</DIV>
</div>
</BODY>
</HTML>
The style.css file is sitting right next to header.php in includes folder then why it is not being applied?
While checking through firebug in mozilla its showing me this output :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>***</title>
<link type="text/css" href="style.css" rel="stylesheet">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /style.css was not found on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
<hr>
<address>Apache Server at www.***.com Port 80</address>
</body></html>
</link>
<link media="screen" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.css" rel="stylesheet">
<link media="print" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link media="screen" type="text/css" href="scripts/jquery.uniform/uniform.default.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1">
<script src="../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7" type="text/javascript">
<script src="../_layout/scripts/nicEdit/nicEdit.js" type="text/javascript">
<script src="../_layout/scripts/jquery.uniform/jquery.uniform.min.js" type="text/javascript">
<script src="../_layout/custom.js" type="text/javascript">
</head>
<body>
</html>
Why there is a 404 not found error when the path is correct?
Please help
You're including ../include/header.php and style.css is there too, namely ../include/style.css. So, you must either use the same relative path or an absolute path to your css /include/style.css.
The link to your CSS file should be relative to the URL of the page you are viewing.
For example, if you view your page at example.com, you must reference the CSS file with example.com/includes/style.css.
Maybe it's better to test with header.php absolute path first.
Also path of your scripts and style sheets should be relative to index.php not header.
(Sorry for bad English)
i am using jquery think box as light box it works in normal but if i loop though a php it fails..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="ThickBox is a webpage UI dialog widget written in javascript on top of the jQuery library. It's function is too show a single image, multiple images, inline content, iframed content, and content served through AJAX in a hybrid modal." />
<meta name="author" content="Cody Lindley" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />
<title>ThickBox 3.1</title>
<style type="text/css" media="all">
#import "css/global.css";
#import "thickbox-code/thickbox.css";
</style>
<link rel="alternate stylesheet" type="text/css" href="css/1024.css" title="1024 x 768" />
<link rel="alternate stylesheet" type="text/css" href="css/thickbox.css" title="1024 x 768" />
<script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
<script src="js/global.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
</head>
<body id="pageTop">
<?php
for($i=0;$i<10;$i++)
{?>
<?php echo $i;?>
<div id="hiddenModalContent" style="display:none">
<p><?php echo $i;?></p>
<p style="text-align:center"><input type="submit" id="Login" value=" Ok " onclick="tb_remove()" /></p>
</div>
<?php
}
?>
can any one tell me how can i do that
Add a rel tag to the link ie. rel="gallery". That should do the trick.
See "Give each link element the same rel element and value. (Example: rel="gallery-plants")" at http://jquery.com/demo/thickbox/