My file structure is as follows....
iamdan > css > style.css
My php file, head.php is in a file called includes which is in:
iamdan > includes > head.php
which contains the following code:
<head>
<title>Website title!!!</title>
<meta charset="UTF"-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
Now it's loading the info fine and some of the style sheet (just the font style) none of the other styling is coming through...
Any ideas?
You have a mistake in your meta charset:
<meta charset="UTF-8">
And the other thing is:
<link rel="stylesheet" href="css/style.css" type="text/css">
This is relative from your script position. When you are in a subfolder. The path is wrong.
<link rel="stylesheet" href="/css/style.css" type="text/css">
Put a / before your path. Then your browser load the css file always from the root:
xx.de/css/style.css
Or put the complete URL before your script.
<link rel="stylesheet" href="http://xx.xx.de/css/style.css" type="text/css">
Related
I've set up a Colorbox module on the Drupal 8 based site, and I found that it doesn't work for each content type because Colorbox related CSS and JS files are not being included into all pages.
I have two different content types, lets call it GOOD and BAD. Both has CSS and JS being rendered within standard html.html.twig template and using that <js-placeholder token="{{ placeholder_token }}">
Only difference between them is that in GOOD content type, there is a common Image field where I set a Colorbox as a view "handler" meanwhile in BAD template the Image is being created within it's code. So I added a CSS classes into the equivalent element ( <a class="colorbox .." rtc.) but the problem is that that there is not Colorbox JS file linked within the BAD output html.
Example putput from GOOD (shortened):
<!-- BEGIN OUTPUT from 'themes/cav/templates/html.html.twig' -->
<!DOCTYPE html>
<html lang="cs" dir="ltr" prefix="og: http://ogp.me/ns#">
<head>
...
<link rel="stylesheet" media="all" href="/core/modules/quickedit/css/quickedit.icons.theme.css?q01vyb" />
<link rel="stylesheet" media="all" href="/core/themes/seven/css/components/quickedit.css?q01vyb" />
<link rel="stylesheet" media="all" href="/modules/colorbox/styles/plain/colorbox_style.css?q01vyb" />
<link rel="stylesheet" media="all" href="/core/modules/toolbar/css/toolbar.theme.css?q01vyb" />
...
and from BAD:
<!-- BEGIN OUTPUT from 'themes/cav/templates/html.html.twig' -->
<!DOCTYPE html>
<html lang="cs" dir="ltr" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8" />
...
<link rel="stylesheet" media="all" href="/core/modules/quickedit/css/quickedit.icons.theme.css?q01ykj" />
<link rel="stylesheet" media="all" href="/core/themes/seven/css/components/quickedit.css?q01ykj" />
<link rel="stylesheet" media="all" href="/core/modules/toolbar/css/toolbar.theme.css?q01ykj" />
...
I somehow feel that those JS and CSS files related to Colorbox are not linked to BAD as I didn't "set up the Colorbox" within the BAD content type (as I couldn't as there is no formal image field) but is there a way how can I "enforece" to adding them into page any other way?
Thanks.
TC
Colorbox and all the modules and libraries are loaded only if necessary (as it's a field formatter, it only loads if you display that field in that format). This is the default behaviour to send the browser only the necessary code.
You can load Colorbox in every page with the https://www.drupal.org/project/colorbox_inline module.
Writing a simple PHP website and having trouble linking the stylesheet to the page. In the past I've had issues with this but usually it ends up working.
Anything wrong with my code? Or am I just doing it wrong?
<head>
<title>San Joaquin Valley Town Hall</title>
<link href="styles/main.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styles/normalize.css">
</head>`
(I am using a XAMPP server to run my files)
Thanks
Without understanding your file structure, there isn't much else that can be said here.
I'd recommend using a relative link from the root directory of your project. Let's say your file structure is something like:
[website]
[resources]
[styles]
[images]
[js]
...
Then you're style include would be something like:
<link rel="stylesheet" href="/resources/styles/my_sheet.css" media="screen" type="text/css"/>
This is personal preference, as I'm not a fan of using directory traversal .. or . to find files. In my experience, files end up moving around a bit (we develop our own framework, so things are always changing) so with this we're sure exactly where the file is located just by viewing the href.
The link tag looks fine, however the href is relative. Is the styles directory in the same directory as your html?
If you can see your stylesheet at http://yoursite.com/styles/main.css, I would change the link to be less relative:
<link href="/styles/main.css" media="screen" rel="stylesheet" type="text/css" />
This way, no matter where your HTML page resides in the file structure, the stylesheet will be found.
HTML media Attribute
Read the page that was recommended and after reading, try this:
<head>
<title>San Joaquin Valley Town Hall</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
</head>
if the next problem is the directory, try this:
<head>
<title>San Joaquin Valley Town Hall</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="/styles/normalize.css">
</head>
So, I've had a look around, become somewhat overwhelmed by the variety of different answers I've come across and would like a hand.
My included PHP header CSS files currently look like this:
<meta name="viewport" content="initial-scale=1.0">
<link href="CSS/header.css" type="text/css" rel="stylesheet" />
<link href="CSS/ufc-blog.css" type="text/css" rel="stylesheet" />
<link href="CSS/ufc205.css" type="text/css" rel="stylesheet" />
<link href="CSS/cerrone-lawler.css" type="text/css" rel="stylesheet" />
How can I specify the path and then enter a variable from the page with the included header that set the stylesheet to display the CSS specifically for that page?
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
Possibly a duplicate question, but I have searched all over and haven't found a definitive answer. My CSS files aren't being included in my Bootstrap 3 code.
Here is a sample from a header include file that is at the top of each page. The include is done through PHP.
<title>Page Title</title>
<!-- METAs -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel = "stylesheet">
<link href="css/social-buttons.css" rel = "stylesheet">
<link href="css/font-awesome.css" rel = "stylesheet">
<link href="css/styles.css" rel = "stylesheet">
</head>
<body>
<div class = "navbar navbar-default navbar-static-top">
...
All these files are sourced within a CSS file and the file is accessible. I feel like everything is being included properly. Could it be an issue with including the code from a PHP file instead of raw code inline?
The folder structure (for core php project) must be
Main Folder
-- css
--all css files
--index.php / index.html
If your paths are correct, it really shouldn't be a problem.
Let's assume your directory is like so:
/includes
/header.php (calls the below css files)
/css
/style.css
/bootstrap.css
/others.css
/index.php
In your index file, your include would be:
<?php include ('includes/header.php');?>
In your header.php:
<link href="css/style.css" rel="stylesheet"> (etc, your other css files)