Headers css/bootstrap issues, strange - php

I do not understand what is going on here.
This is my file-data "structure":
Over here is the content of my folder "css"
So, in my program: this files"estudiante.php","editar.php" and "hola.php" got the same header. Take a look:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
The problem is that i could not link the file "estilos.css" from the "css" folder because i was given some errors while i was checking the inspect element tool using chrome:
But it is strange, because i wrote this line on my header:
<meta name="viewport" content="width=device-width, initial-scale=1">
That line makes my page responsive, but those commands are in my estilos.css file.. i don get it, take a look:
So, estilos.css doesnt appear in my code but the header uses the content and makes my website responsive?. I dont understand this mates :(

Double-check your file naming conventions. It looks like you're hiding file extensions, since bootstrap, bootstrap.min, etc don't have .css on the end, but estilos.css does. It's possible your file is actually named estilos.css.css and you aren't aware.
https://www.howtogeek.com/205086/beginner-how-to-make-windows-show-file-extensions/

Related

How do I change the web-site name from admin panel in php?

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.

normalize.css doesn't work in my PHP file

I have a problem right here. I'm developing a Webpage in PHP from scratch, currently I started with HTML and imported normalize.css in my index.view.php file, it looks like this:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AlfonsoIMa</title>
<link rel="stylesheet" href="css/normalize.css">
<script src="js/modernizr.js"></script>
<meta owner="Alfonso Izaguirre Martínez">
<meta author="Alfonso Izaguirre Martínez">
I'm using XAMPP and PHP7. I imported then refreshed my localhost and I didn't work. My code looks fine so, maybe the issue it's with XAMPP... Any solution?
You need to make sure that the css is called from the correct relative postition.
Try this instead:
<link rel="stylesheet" href="/css/normalize.css">

functionning html not working on wordpress site

I'm trying to add the following code
<!DOCTYPE html>
<html version="HTML+RDFa 1.0">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="https://socialhub.s3.amazonaws.com/production/styles/sr-socialhub.carousel.default.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Note - you may not need to include jQuery if you already have it. -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://socialhub.s3.amazonaws.com/production/scripts/app-carousel.min.js"></script>
</head>
<body>
<div ng-app="ngSocialHub" ui-view
ng-social-hub-carousel
ng-social-hub-customer="news"
ng-social-hub-board-id="out-and-about"
ng-social-hub-infinite-scroll="true"
ng-social-hub-dialog-enabled="false"
ng-social-hub-locale="en"
ng-social-hub-facebook-appid="<YOUR FACEBOOK APP ID HERE>"
ng-social-hub-interval="5000"
ng-social-hub-disable-user-actions="false"
ng-social-hub-disable-carousel-indicator="true"
></div>
</body>
</html>
into a page as inline code to my site http://dtcm.co.nz, for some reason this code doesn't seem to work with my wordpress based site, I have also tried it on another wordpress site which has no plug ins and it did not work. The company who provided the code have had success with wordpress sites, however sometimes have come into problems. will there be anything that will be restricting my wordpress from allowing this inline code to work?

Adding header tags ruins my template?

I have added an availability calendar to my website which I found online, the header tags are below:
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/dateTimePicker.css">
    <script type="text/javascript" src="scripts/components/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/dateTimePicker.min.js"></script>
When I add them to my current website page, it changes the template and ruins the look by either adding blank white space at the top of the page or affecting the nav bar whenever I add the script? Any ideas how I can have the script without it affecting my template?
Here is my template html with the script added...
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="assets/style.css">
<title>Dave's Caravan Letting</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/dateTimePicker.css">
    <script type="text/javascript" src="scripts/components/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/dateTimePicker.min.js"></script>
</head>
By adding random code to existing code can cause code conflict, first understood the existing css code and than add the additional css code.
If you want to debug then open the site in browser's developer tool, check out the portion's css using inspect element and correct or rectify the css code.
Use the following link to learn how to use developer tool
https://developer.chrome.com/devtools

How to organize includes, scripts when developing a larger website?

I've been thinking about the best way to organize includes, scripts, css etc. in my header.php file, and I've come up with a solution but I do not know if this is even good or not. I'd like to hear your techniques regarding this matter.
I was thinking about something like this:
PS: there are more includes, but I don't want to flood this thread.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="scripts/bootstrap/bootstrap.js"></script>
<script src="scripts/jqplot/jquery.jqplot.min.js"></script>
<?php if($page_title == 'Home') echo'<script src="scripts/jqplot/jqplot.pieRenderer.min.js"></script>' ?>
<script src="scripts/global.js"></script>
<link rel="stylesheet" type="text/css" href="style/bootstrap/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/jqplot/jquery.jqplot.css">
<link rel="stylesheet" type="text/css" href="style/global.css">
<link rel="shortcut icon" href="images/logo_tab.png">
<title><?php echo $page_title; ?></title>
So my main idea is to put most of the optional includes in a small php script, which script would look at the current page we are on, and if that particular script is not needed it won't echo it out. Is this a viable solution?
Thanks!

Categories