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?
Related
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>
I'm trying to wrap all CSS files together with <noscript id='deferred-styles'>...</noscript>.
I am interested to see, how would you do it in functions.php file.
The end result should look like this:
<noscript id="deferred-styles">
<link rel="stylesheet" href="file1.css">
<link rel="stylesheet" href="file2.css">
<link rel="stylesheet" href="file3.css">
</noscript>
Source: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Any suggestions?
In my root, I have index.php which references css files like this:
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
I have a rewrite rule that makes my path example.com/products/.....
RewriteRule ^products/([0-9a-zA-Z-]+)$ product-detail.php?slug=$1 [NC,L]
The issue I have is that the css links are now broken on the products pages because the reference to the css files is incorrect as it should change to:
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<link rel="stylesheet" href="../css/custom.css" type="text/css" />
I would like to have a header.php file where I can just make changes once if I need to add or remove css references but now I have to have 2 make changes twice. Is there a way around this?
you can start the include with the root path
<link rel="stylesheet" href="/css/style.css" type="text/css" />
I solved this by adding this to the head:
<base href="//localhost:8888/mysite/" />
Currently have a site built using SASS, however due to the fact it was not compiling we decided to edit the cw-styles CSS in our DEV environment and upload this to the FTP instead.
This is how we are linking the css in the Head section currently:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="/<?php echo SITE_FOLDER; ?>/css/all.css" rel="stylesheet" type="text/css" />
<link href="/common/js/image/swipe.css" rel="stylesheet" type="text/css" />
<link href="/mse/css/cw-styles.css" rel="stylesheet" type="text/css" />
However on uploading this, in the Head section the link to the stylesheet on the Live site has broken, giving us a link that looks like this:
<link href="/mse,_uploads,_all.crush.css,q23409834296+common,_js,_image,_swipe.css+mse,_css,_cw-styles.css+common,_js,_lightbox,_lightbox.css+common,_js,_image,_swipe.css.pagespeed.cc.0Keg4MRi-i.css" rel="stylesheet" type="text/css"/>
Anyone experienced this, or clues as to why this is happening?
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