hello genius programmers. can you help me to combine this all css files into one file
<link type='text/css' rel='stylesheet' href='css/header.css' />
<link type='text/css' rel='stylesheet' href='css/body.css' />
<link type='text/css' rel='stylesheet' href='css/sidebar.css' />
<link type='text/css' rel='stylesheet' href='css/footer.css' />
i want to combine all css file into one.
ex:
<link type='text/css' rel='stylesheet' href='css/all.css' />
You can do that easily in PHP. And a very formal method of doing and including is that. Most of them are following up this method alone.
Create a PHP file called styling.php and you can include all the css files over to that PHP file and then you can include it into your file.
styling.php
Under this file you can have the following code.
<link type='text/css' rel='stylesheet' href='css/header.css' />
<link type='text/css' rel='stylesheet' href='css/body.css' />
<link type='text/css' rel='stylesheet' href='css/sidebar.css' />
<link type='text/css' rel='stylesheet' href='css/footer.css' />
And in the PHP file you can call like this with the help of include()
include() - The include statement includes and evaluates the specified file.
Files are included based on the file path given or, if none is given, the include_path specified. If the file isn't found in the include_path, include will finally check in the calling script's own directory and the current working directory before failing. The include construct will emit a warning if it cannot find a file; this is different behavior from require, which will emit a fatal error.
If a path is defined — whether absolute (starting with a drive letter or \ on Windows, or / on Unix/Linux systems) or relative to the current directory (starting with . or ..) — the include_path will be ignored altogether. For example, if a filename begins with ../, the parser will look in the parent directory to find the requested file.
include() will only produce a warning (E_WARNING) and the script will continue
<html>
<head>
<?php include('styling.php'); ?>
</head>
<body>
</body>
</html>
And when you view the pagesource it will display all the links separately.
Some More for clear understanding of include()
Solution One:
vars.php
<?php
$color = 'green';
$fruit = 'apple';
?>
test.php
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>
Solution Two
Assume we have a standard footer file called "footer.php", that looks like this:
<?php
echo "<p>Copyright © 1999-" . date("Y") . " W3Schools.com</p>";
?>
To include the footer file in a page, use the include statement:
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
Hope so you can understand better with my explanations.
A rough 'n' ready way in which you could combine all the stylesheets into one would be to create a php script like below and use that in the html when you load the stylehseet.
<?php
/* all.php */
header( 'Content-Type: text/css' );
$css=array( '/css/header.css', '/css/body.css', '/css/sidebar.css', '/css/footer.css' );
$output=array();
foreach( $css as $file ){
$output[]=file_exists( $file ) ? file_get_contents( $file ) : '/* error: '.$file.' cannot be found */';
}
echo implode( PHP_EOL, $output );
?>
In the html, include the php file rather than a .css file
<link rel='stylesheet' href='/css/all.php' />
In JavaScript there are some solutions to automatically run these kind of tasks. You can install Gulp or any other tasks runner and specifically for CSS concatenation these package gulp-concat-css.
Install:
$ npm install --save-dev gulp-concat-css
Once it is installed you can add a task on your gulpfile.js:
var gulp = require('gulp'),
concatCss = require('gulp-concat-css');
gulp.task('default', function() {
return gulp.src('css/**/*.css')
.pipe(concatCss('css/all.css'))
.pipe(gulp.dest('dist/'));
});
Execute:
$ gulp
Than your html will look like these:
<link type="text/css" rel="stylesheet" href="/dist/css/all.css" />
Related
How do I create an external file for my side menu?
<a class="active" href="C.html" style="font-size: 1.1em;font-weight: 900;">C Programming</a>
C++
C#
Go
Java
JavaScript
PHP
Python
Ruby
Swift
Currently I have these kind of links in every file and the code is just getting too much. Is there a way to create an external file for the menu items?
I tried this but the problem is class="active". I want to highlight a menu item when my menu item is in index.php
I Know how to achieve this when my menu is in each individual HTML file but how do I do that when it's in external PHP file ?
Index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Tags.css">
<link rel="stylesheet" type="text/css" href="CSS/Nav.css">
<link rel="stylesheet" type="text/css" href="CSS/Card.css">
<link rel="stylesheet" type="text/css" href="CSS/Buttons.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="sidenav">
<h1> Others</h1>
MS Excel
MS PowerPoint
MS Word
WordPress
</div>
</body>
</html>
Main file
<?php include('index.html'); ?>
You should NOT use javascript to include your menu .
you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
or you can use pre processors like Gulp :
##include('./template/header.html')
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./'));
});
or Pug or Grunt and ......
About your problem in comments . lets say you are in your main folder and you have this 3 files :
index.php
header.html
homepage.html
footer.html
index.php should be like this :
<?php
include('header.html');
include('hompage.html');
include('footer.html');
?>
and then in your browsers you should open index.php .
** don't use index.html and index.php in the same time .
if it didn't work . you should get error in your index.php file .
when your code works . i suggest you to use readfile() instead of include . if your another files are just html and not have any php codes in it .
As pointed out by Abolfazl Ghaemi :
You should NOT use javascript to include your menu . you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
The Gulp/Grunt solution is fine but I'll stick with the <?php include(); ?> solution for your problem.
Does the hosting machine speak PHP ?
If browsers can read HTML just fine to give you a webpage, they can't read PHP. Instead, PHP need to be executed by something on the hosting machine and you will need a PHP interpreter for that like Apache.
If you didn't already, I strongly recommend you to install it or even a full AMP stack.
PHP in HTML files won't work
You need to make sure your file using PHP instructions are .php files. Otherwise, the code in your <?php ?> tag (the PHP code) won't be interpreted at all.
Make sure your main file is a .php file.
Are you calling the correct file ?
Also, you need to be sure the file name you are including is correct. The content as shown in your question is
Main file
<?php include('index.html'); ?>
but your file is actually index.php not index.html.
HTML is prettier with CSS
If you want to "highlight" the item with active class, you will need CSS. You can quickly add CSS in your file with a <style> tag. See the example below.
<ul>
<li>Not highlighted</li>
<li>Still not highlighted</li>
<li class="active">Highlighted ! Spotlight's on me baby !</li>
<li>Not highlighted</li>
</ul>
<style>
.active {
color: red;
font-weight: bold;
}
</style>
I am trying to set a WWW_ROOT in order to reuse HTML code in different pages. This is an example of users.php using a header, where the CSS files are not found - 404 (Not Found) and I got Notice: Undefined variable: project_end in /Applications/XAMPP/xamppfiles/htdocs/lpweb/assets/php/initialize.php on line 11
Folder structure
>localhost
>lpweb
>index.php
>pages
>users.php
>assets
>php
>initialize.php
>header.php
>css
>bootstrap.min.css
initialize.php
<?php
define("PHP_PATH", dirname(__FILE__));
define("ASSETS_PATH", dirname(PHP_PATH));
$public_end = strpos($_SERVER['SCRIPT_NAME'], '/lpweb') + 7;
$doc_root = substr($_SERVER['SCRIPT_NAME'], 0, $project_end); //line 11
define("WWW_ROOT", $doc_root);
?>
header.php
<link rel="stylesheet" media="all" href="<?php echo WWW_ROOT . 'assets/css/bootstrap.min.css'; ?>"> />
users.php
<?php require_once('../assets/php/initialize.php'); ?>
<?php include(PHP_PATH . '/header.php'); ?>
You are mixing $public_end and $project_end
Also after reviewing your code from GitHub I believe this will work for you.
define("WWW_ROOT",$_SERVER['REQUEST_SCHEME']."://".$_SERVER['HTTP_HOST'].rtrim($_SERVER['REQUEST_URI'],'/'));
Alternatively, you can use the relative path to refer to CSS files which will make your life easy
<link rel="stylesheet" media="all" href="assets/css/bootstrap.min.css" />
I've an application build in Yii2 framework, and I've develop the application in backend side, but know I want to copy them become a module.
This my application dir
backend
--modules
--pstk
--controllers
--ValidationController.php
--DefaultController.php
--InterviewController.php
--StudentController.php
--SiteController.php
--UsersController.php
--models
--Validation.php
--Interview.php
--Student.php
--Users.php
--views
--validation
--_form.php
--view.php
--index.php
--update.php
--create.php
--interview
--student
--users
--Module.php
--web
--css
--manual_general.css
--js
--upload_header.js
--style
For example I've successfully run view.php from the module in browser, but the module can't access the .css and .js from backend/web/.
So the view displayed, but it's view mashed-up and all button didn't do any action when clicked.
Anyone know why the module didn't access the manual_general.css and upload_header.js from backend/web/? and how I can solve this problem?
Any help, will be appreciated. Thanks :)
EDITED:
This is the code in mi view.php to connect to .js and .css
<link rel="stylesheet" type="text/css" href="../../../../web/css/manual_general.css">
<script type="text/javascript" src="../../../../web/js/upload_header.js"></script>
Try using yii\helpers\Url::to, like:
<link rel="stylesheet" type="text/css" href="<?= Url::to('#web/css/manual_general.css') ?>">
<script type="text/javascript" src="<?= Url::to('#web/js/upload_header.js') ?>"></script>
Alternatively, in view.php you may do (assuming $this is your View instance):
<?php $this->registerCssFile('#web/css/manual_general.css'); ?>
<?php $this->registerJsFile('#web/js/upload_header.js'); ?>
I have a small problem with importing links. Once I started using pretty URL directories stops working. What can I do ?
Screenshots:
Before
After
Make your css and js links dynamic.
For example:
<?php define( 'SCRIPT_ROOT', 'http://'.$_SERVER['HTTP_HOST'].'/' );?>
<link href="<?php echo SCRIPT_ROOT ?>site/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="all">
After this doesnt matter your directory structure.
I need to import whole css files available in a specific folder (css)
Is there a method to do it without importing file by file?
need to import assets/css/* ?
<link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/>
<title>Untitled Document</title>
<style>
#area {
max-width: 600px;
}
</style>
</head>
Edit: Late answer it seems and you have accepted an answer. Had I known, I would not have submitted this. I was busy testing and formulating it.
As I stated in a comment, you can use PHP's glob() function to achieve this, along with a foreach loop. Here is what you can do:
foreach (glob("*.css") as $css) {
echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"$css\">\n";
}
Which in HTML source will produce something similar to:
<link type="text/css" rel="stylesheet" href="css_1.css">
<link type="text/css" rel="stylesheet" href="css_2.css">
<link type="text/css" rel="stylesheet" href="css_3.css">
Depending on where your files are located, you may need to change the path to those files.
I.e.:
foreach (glob("path/to/css/folder/*.css")
Placing the PHP for it inside <head></head>
For example:
<!DOCTYPE html>
<head>
<?php
foreach (glob("*.css") as $css) {
echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"$css\">\n";
}
?>
</head>
<body>
<div id="css_1">Style 1</div>
<br>
<div id="css_2">Style 2</div>
<br>
<div id="css_3">Style 3</div>
</body>
</html>
I think there is no way you can import css files from a folder by doing assets/css/*. But you can concatenate files from css folder into one file and then minify this css file and import it.
You can use build tools like gulp to accomplish this thing. Check this out https://www.npmjs.com/package/gulp-minify-css
No. For one thing, the client would have no idea what to request (it can request only one file per http request, whose name it needs to know). You can do it in four ways:
Concatenate all of your CSS files into one file, then link to that file.
Have a script that will concatenate all CSS files into one response, then link to that script
Have a loop in your template going over all the CSS files, which will issue one <link> element per file.
If you only have several CSS files than do not change, you can just write them all out by hand.