today I started some boilerplate project. I am using gulp to output minified css from SASS. I have two .css files - normalize.css and main.css. Both of them are minified from the same directory. When I am starting localhost with XAMPP I open index.php it could not load main.css but normalize.css is loaded. I get the following in console:
Also when I go to see files that are in localhost directory I see that main.css is there, but when I click on it it says that it could not found this file - error 404 and in url bar I see that it added "/" at the end of main.css - strange behaviour:
However when I open this index.php in Firefox everything is fine and both styles are loaded and displayed correctly. Here is index.php code if needed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="">
<title>Title of site</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./dist/css/normalize.css">
<link rel="stylesheet" type="text/css" href="./dist/css/main.css">
<!-- FavIcon -->
<link rel="icon" type="image/png" href="//" sizes="32x32">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Local -->
<!-- <script src="./js/jquery.min.js"></script> -->
</head>
<body>
<h1>Hello wosfsdfsdfrld!</h1>
<p>scss and sass</p>
<p><?php echo('THIS IS HEADERsfsfsdf'); ?></p>
<img src="./img/testimg.png">
<script type="text/javascript" src="./dist/js/app.js"></script>
</body>
</html>
So it seems that it is somehow related to Chrome Browser, what could be an issue? Maybe some XAMPP config? But I have never touched it
The problem was name of folder containing project "siteStarter-php" caused some conflicts - changed it to "siteStarterPhp" and everything is working
Related
I have an app with two main layouts auth and app.
The auth layouts is for my authentication views whiles the app layouts is for the main application views with sidebars and headers .
But they both share a the same css and js blocks.
So i decided to create two components (head.blade.php and scripts.blade.php) in a sub directory "includes" in the resources/views/components directory.
This is the content of my includes/head.blade.php file
#props(['title' => $title ?? ''])
<head>
<meta charset="utf-8" />
<title> {{ucfirst(config('app.name'))}} - {{ucfirst($title)}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesbrand" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="{{asset('assets/images/favicon.ico')}}">
<!-- Bootstrap Css -->
<link href="{{asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
<!-- Custom Css-->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<!-- Page Css-->
#stack('page-css')
</head>
And this is the content of my includes/scripts.blade.php file.
<!-- JAVASCRIPT -->
<script src="{{asset('assets/libs/jquery/jquery.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('assets/libs/metismenu/metisMenu.min.js')}}"></script>
<script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('assets/libs/node-waves/waves.min.js')}}"></script>
<!-- App js -->
<script src="{{asset('assets/js/app.js')}}"></script>
<!-- Page js -->
#stack('page-js')
This is how i call each of them in my app layout file.
This is for the css
<x-includes.head :title="$title" />
#push('page-css')
<!-- Custom Css-->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
#endpush
This one for the js
<x-includes.scripts />
#push('page-js')
<script src="{{asset('js/app.js')}}"></script>
#endpush
But is not working.
SUMMARY: What am trying to achieve is that, i want to able to use those components in each of my layouts. But i also want to be able inject custom page css and js to pages that have custom css and js files. The components works fine but the #stack and #push are not working. I also used #yield and #section and i didn't get any result.
I want to know if am doing it right and also if there is another way to achieve this.
I am creating a new site and I am wondering if it is possible to change the site name from the admin panel? I searched a lot but could not find it. I have not written any code for this yet
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>registration</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/logo/favicon.ico">
<!-- all css here -->
<!-- bootstrap v3.3.6 css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- font-awesome css -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- style css -->
<link rel="stylesheet" href="style.css">
<!-- responsive css -->
<link rel="stylesheet" href="css/responsive.css">
<!-- modernizr css -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
After <title>registration {here site name}</title> I want the site name to be written automatically. I have the file in PHP of course. Is it possible to do this without Laravel?
What I usually do is create a settings table that contains all the site information which will queried and displayed on the site.
On my site, I had an index.php with a navbar. Then, I needed to add another page, called second.php, and updated my navbar code accordingly (I have a nav.html file for the navbar, so that I can use JS to load it onto each page of the site). I also added the navbar code to the second.php. However, when I opened index.php, the link to second.php didn't appear.
I tried restarting my computer, restarting my MAMP server, reopening my code editor, reopening the browser, but nothing worked. Then, I tried renaming my files (for both the purpose of testing and because I needed better file names) and updated all instances of the name of the files accordingly. But then this appeared:
followed by a list of the files in my directory. In particular, the site wasn't displaying. Could someone please explain what's happening and how I can fix it?
nav.html:
<body>
<header>
<div class="logo">
<h1 class="logo-text">Welcome!</h1>
</div>
<i class="fa fa-bars menu-toggle"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
</header>
</body>
home.php (formerly second.php):
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Welcome Home</title>
</head>
<body>
<div class="placeholder"></div>
<script>
$(function(){
$('.placeholder').load("nav.html");
});
</script>
hello world
<script src="js/main.js"></script>
</body>
</html>
about.php (formerly index.html) is basically the same as home.php except it has a couple of paragraph tags.
I'm not clear on what isn't working at this point, so I might as well share a working example I have locally. I'm accessing my site at http://localhost/so/, and going to that URL will load any index page I have. I have 3 files inside the /so directory:
nav.html (I removed your <body> tags because those already exist in the other files):
<header>
<div class="logo">
<h1 class="logo-text">Welcome!</h1>
</div>
<i class="fa fa-bars menu-toggle"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
</header>
home.php (accessible at localhost/so/home.php):
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Welcome Home</title>
</head>
<body>
<?php include "./nav.html"; ?>
hello world home
<script src="js/main.js"></script>
</body>
</html>
about.php (accessible at localhost/so/about.php):
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Welcome About</title>
</head>
<body>
<?php include "./nav.html"; ?>
hello world about
<script src="js/main.js"></script>
</body>
</html>
If I rename home.php to index.php then I can go to either localhost/so/ or localhost/so/index.php to access that file.
Slightly related: you shouldn't necessarily use time() as your CSS cache busting variable because it won't cache at all then. You should use a variable that you manually adjust the value of (i.e. $css_cache_bust = "2020061001";) like href="css/style.css?v=<?= $css_cache_bust; ?>" so you can incrementally adjust this as needed.
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>**********</title>
<link href="css/main.css" rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" />
</head>
<body>
<?php
// top navigation
require_once("require/top_navigation.php");
// header
require_once("require/header.php");
// main
require_once("require/main.php");
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0&appId=411386782258918&autoLogAppEvents=1"></script>
</body>
</html>
...
I haven't done much direct php for a while, but when I seem to use the require_once it adds a blank text element followed by 1. I've looked all over google and everyone that I've come across says it's because of BOM. So I checked on the editor that I use 'Visual Studio Code', and it's not enabled, by default it's UTF-8 without BOM.
The apache software is Xampp.
I have a zend framework application up and running. I have created a layout. Now I need to include bootstrap css file to my layout.
I tried with 'baseUrl' but it didn't work. I have the css files inside 'public/assets/css'.
I also tried with tutorial in zend framework website. But it didn't work.
They mentioned to use
<?php echo $this->headLink()->appendStylesheet('/assets/css/bootstrap.css') ?>
I added the above line in layout page but it didn't work.
Also for your information when I use this headlink, in console it's showing as
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8010/assets/css/bootstrap.css".
Any help is greatly appreciated. Thanks in advance.
Head Tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zend Framework Quickstart Application</title>
<link href="/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
</head>
Extra information: I have a controller 'HomeController' in it I have defined an action
public function homeTwoAction()
{
// action body
$this->_helper->layout->setLayout('layout');
}
In views -> I have home-two.phtml inside 'scripts/home'.
In layout I have the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap</title>
<!-- <link rel="stylesheet" href="style/bootstrap.min.css">-->
<!-- <link rel="stylesheet" href="style/customstyle.css">-->
<!--<link type="text/css" rel="stylesheet" href="/assets/css/customstyle.css">-->
<?= $this->headLink()->appendStylesheet('/assets/css/customstyle.css') ?>
<?= $this->headLink()->appendStylesheet('/assets/css/bootstrap.min.css') ?>
</head>
<body>
<div class="container-fluid">
<?php echo $this->layout()->content ?>
</div>
</body>
</html>
I am accessing
http://localhost:8010/home/home-two
HTML content is loaded but css not loading. Thanks.
Changing Mime type is explained here
Go to Tools -> Options
Then under Miscellaneous tab choose the file type css and make sure the Associated File Type is text/css
Edit
Try opening http://localhost:8010/assets/css/ or http://localhost:8010/assets/ what do you see?