I've looked all over for a solution but the external link for "gencustomfont" will not work, yes everything is named correctly. Though if I put the bare code in it will, but I'd feel better if it was less cluttered once I officially start adding styles. I'm using c panel.
MAIN
echo '<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="css/gencustomfont.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<h1>We are making magic!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>';
?>
CSS
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #FF7878;
background-color: #000;
}
</style>
As can you see I'm trying to override the bootstrap css with my own. I don't have the time to use "Less".
In your .css file, you do not need to put <style type="text/css"> and </style>. These are only needed in the HTML file!
Related
While trying to access pages from folder my url keeps stacking one after another rather than going to appropriate page.
This is my directory structure.
Website/
css/
js/
includes/
header.php
footer.php
helper.php
sub-folder/
foo.php
index.php
after going to localhost/sub-folder/foo.php it goes to localhost/website/sub-folder/foo.php/index.php instead of localhost/website/index.php
This causes error even when loading css from foo.php which connects via header.php
This is my header.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chili Pili</title>
<!-- Bootstrap CSS only -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/imagehover.min.css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<link rel="stylesheet" href="css/style.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Custom CSS file -->
<link rel="stylesheet" href="css/utils.css"></link>
<link rel="stylesheet" href="css/responsive.css"></link>
<style>
li{
font-size:20px;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover .dropdown-menu .dropdown-item:hover {
color: var(--color1) !important;
}
.active{
color: var(--color1) !important;
border-bottom:2px solid var(--color1);
border-width:20%;
text-align:center;
}
</style>
</head>
<body>
foo.php
<?php
include '../includes/header.php'
?>
<?php
include 'includes/footer.php'
?>
What can be done so urls don't keep stacking and return correct url so css file can be accessed from foo.php. Currently due to stacking its impossible to retrieve css files
In header.php <link rel="stylesheet" href="css/imagehover.min.css"> will link file header.php/css/imagehover.min.css.
try to add a / in front of css like so <link rel="stylesheet" href="/website/css/imagehover.min.css">
I'm trying to add custom styles to navigation and body but the styles aren't showing in my home page but it's showing in another page I'm not getting it any one can help me out with solution where I'm messing around
index.php
<?php include 'include/css.php';?>
<?php $page = 'home';include 'include/navbar.php';?>
<?php include 'include/scripts.php';?>
Screenshot of browser for index.php
css.php
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
Screenshot of browser for /include/css.php
style.css
body{
background-color: aqua;!important
}
.navbar-nav > li > a {
color: #ffffff;
}
i am attaching github link please download files upload in your local server and
kindly find the error
you can download files here
Try this one.
body{
background-color: aqua !important;
}
.navbar-nav a {
color: #ffffff !important;
}
maybe you have a path issue for <link rel="stylesheet" href="../css/style.css">
check your directory for home page and other pages.
In base.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<style>
body {
background: blue;
}
</style>
</head>
<body>
<h1>Base</h1>
</body>
</html>
the background of <body> is blue.
But if the CSS is linked, like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<link rel="stylesheet" href="http://localhost/exp/mysite/css/style.css" type="text/css">
</head>
<body>
<h1>Base</h1>
</body>
</html>
with CSS in http://localhost/exp/mysite/css/style.css
body {
background: blue;
}
it doesn't work. Why?
Can you check error and write text of error for your post? To do that, open Developer Tools, reload page, and when style.css will be red, copy and paste code of Error and text of answer from the server.
I think here may be few common problems:
localhost follows to your computer/server, but web server (Apache / Nginx) doesn't know where your link (http://localhost) should follows. I mean to which directory where css file located.
Second common problem is permissions. For example directory with your CSS or css file has not readable permissions.
There can be few more problems, like CSP or something more complicated, but i need more information from you.
Try to use a relative filepath, this will also make the transfer to a production server easier:
<link rel="stylesheet" href="css/style.css" type="text/css">
instead of
<link rel="stylesheet" href="http://localhost/exp/mysite/css/style.css" type="text/css">
(of course it depends where your html or php document is placed in the file system – if that's in a folder, it will be something like href="../css/style.css"
You should link the css this way
<link rel="stylesheet" href="css/style.css" type="text/css">
or link the css file the exact folder name
Set your folder is:
mysite/index.html
mysite/css/style.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h1>Base</h1>
</body>
</html>
The problem was
SetHandler application/x-httpd-php
in the .htaccess file.
Let's say I have:
css/style1.css
css/style2.css...
etc
and the html is like this:
<html>
<head>
<link ... src="css/style1.css">
<link ... src="css/style2.css">
</head>
<body>...</body>
</html>
I would like to read all the contents of css and make it like this:
<html>
<head>
<style>...(all css styles go here)</style>
</head>
<body>...</body>
</html>
reading css and put it into is easy (ie. using php's file_get_contents) but if the css contains url (url(../images/something.png)) or #import then it would be difficult.
I know there are some tools like minify css (https://github.com/mrclay/minify) to read multiple css and combine them into a big one, but still, it's not exactly what I want (what I want is all styles have to be inside
so is there any tool / script that can do this easily?
This should work:
<html>
<head>
<style>
#import url('css/style1.css');
#import url('css/style2.css');
</style>
</head>
<body>...</body>
</html>
please try this
<style type="text/css">
#import url("style1.css");
#import url "style2.css";
</style>
OR
<style type="text/css">
#import url("style1.css");
p { color : #f00; }
</style>
http://webdesign.about.com/cs/css/qt/tipcssatimport.htm
OR
make main CSS File and paste below code in main css file
#import url('style1.css');
#import url('style2.css');
#import url('style3.css');
#import url('style4.css');
add in head below source code
<link rel="stylesheet" type="text/css" src="main.css"></link>
You are using php so you can do something like this to get your css.
<html>
<head>
<style type='text/css'>
<?php
$css = file_get_contents('path/to/style1.css'); //get your css contents
echo $css; //paste your css
?>
</style>
</head>
</html>
im using appserver and i want to link style.css
.header {
height: "40px";
background-color: "red"
}
in my index.php
<html>
<head>
<META HTTP-EQUIV="Content-language" CONTENT="ar">
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<title>بام للسيارات | تبضع اينما كنت</title>
</head>
<body>
<div class="header">
</div>
</body>
</html>
but it didnt work i dont know why can someone help me
Obviously your CSS is incorrect,
.header {
height: "40px";
background-color: "red"
}
Noticing the quotes in your values, which are invalid in CSS syntax. It should be,
.header {
height: 40px;
background-color: red;
}
After reviewing your code, there is no other coding errors. But your have serious errors with your file encodings.
index.php was encoded in UTF-16LE, and your didn't declare your charset in the <head> section nor the BOM (neither does your css file, which is encoded in UTF-8). So the browser guesses the resource files are also encoded in UTF-16LE, which read two bytes as one character. So your CSS became totally meaningless to the CSS parser, as it reads 栮慥敤ൻ †栠楥桧㩴㐠瀰㭸††慢正牧畯摮挭汯牯›敲㭤ൽ.
So the fix is pretty straight forward,
Add charset declaration at the begining of your <head>
Save your index.php as UTF-8 encoding or add charset="utf-8" to <link>.
Use this
<html>
<head>
<META HTTP-EQUIV="Content-language" CONTENT="ar">
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<title>بام للسيارات | تبضع اينما كنت</title>
</head>
<body>
<div class="header">
</div>
</body>
</html>
I have packed your code ger it from here