I am using Codeigniter4, and I am serving an html file. In this html file, I want to reference a css style sheet. I am doing it like this:
<link rel="stylesheet" href="../../public/assets/css/style.css">
I have verified that there is a style.css file in public/assets/css/style.css. When I try to run this html file, I get a 404 error. Am I doing it wrong?
When inspecting the network tab of Chrome's developer pane, I find that it is trying to load it from the following directory:http://localhost:8080/public/assets/css/style.css
You can use these three methods.
Use link_tag
echo link_tag('public/assets/css/style.css');
Or normal way
<link href="<?php echo base_url(); ?>public/assets/css/style.css" rel="stylesheet" type="text/css" />
or
echo base_url('public/assets/css/style.css');
Make sure base_url() is set in config.php $config['base_url'] = "https://stackoverflow.com//";
Related
My External css file is not linked to my html page.
I had with inside a folder with path
->app-->css-->layout.css
->index.html
In my index.html file I linked it like
<link rel="stylesheet" type="type/css" href="app/css/layout.css">
it won't link it.
i searched for the file in the chrome (inspect-->sources) and the css file wasn't listed there
I then put the layout.css and index.html in the same path.
<link rel="stylesheet" type="type/css" href="layout.css">
it still didn't work. I checked in multiple browser like chrome and firefox as well but it didn't work.
Not sure if it is causing the error(most probably is), but type should be text/css instead of type/css.
Just replace the type/css to text/css and there is no need to write full path name in href.
You can directly use the command below to get the desired result
<link rel="stylesheet" type="text/css" href="layout.css">
Its a very common mistake that everyone do... Please notice that here type="text/css" not
type/css...
Regards,
Om Chaudhary
How is it possible that my whole website works normally without the css file with all the styles? I have this line in the header:
<link rel="stylesheet" type="text/css" href="styles.css" />
I deleted the only styles.css file from the server, but nothing changed. If I delete that line from the header then there are no styles (as expected)
At one point I noticed that none of the css changes I make have any effect, so I made sure that i'm not doing something dumb like editing or referencing the wrong file and that there are not 2 copies of it for some reason. If I change other html files, then I can see the effects, but not the styles file.
I can force it to work by renaming the css file, but I don't really want to do that.
Has anyone seen this happen before?
This is because caching of the CSS. So try clearing the cache of the browser.
You can prevent the CSS caching by below way
<link rel="stylesheet" type="text/css" href="style.css?v=1" />
Using PHP you can do this trick
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
When I change my enigma-theme.css and upload it via FTP, the website doesn't change. When I inspect the page's source I still get text-transform: uppercase; on line 82.
It is a cache problem: add '?' . filemtime('/path/to/your/css/file') at the end of the stylesheet src.
Example of the result :
<link rel="stylesheet" href="./public/desktop/css/style.css?1452515969" type="text/css" />
The filemtime change every time you modify your file so the browser think that's a new file and doesn't use its cache.
Do it for all css and js files.
try changing to : text-transform: uppercase!important;
if it changes try to check if <?php wp_head(); ?>
is the last thing before </head> in themes header.php
I am trying to upload a favicon in my wordpress site. I have followed every step correctly but still its not showing the favicon. Fisrt I converted my pic to favicon.ico . Then I uploaded it to my root directory. Then I added the following code to my header.php file in the <head> tag :
<link rel="shortcut icon" href="http://misspassiton.com.au/favicon.ico" />
I have tried this one as well
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
I have also visited : http://codex.wordpress.org/Creating_a_Favicon
but nothing seems to be working. I dont know whats wrong with it. I would be grateful, if anyone could help me
Regards
Omayr.
It seems that your .ico file is corrupted. I can't open it in my browser. Other than that, it looks like you are doing everything ok.
If you can open http://misspassiton.com.au/favicon.ico directly in your browser, then you'll know it's working.
Requesting http://misspassiton.com.au/favicon.ico, it responds but seems that the image is broken. So the href is ok ;)
2 suggestions:
First: try to use a tool that
converts images in ico (i.e.
http://www.favicon.cc/)
Second: if you want to use
bloginfo(), you have to pass as
parameter 'url' because if you pass
'template_directory' it will return
'http://example/home/wp/wp-content/themes/parent-theme' that is completely wrong and as you can see it doesn't point to public root
(see the reference)
edit : add also type on the link (for IE)
<link rel="shortcut icon" href="http://misspassiton.com.au/favicon.ico" type="image/vnd.microsoft.icon" />
I was having the same problem. The code below worked. Add to the header.php file right before the end head tag. Your image should be in the root of your wordpress installation.
/* ADD FAVICON */
<link rel="icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />