CSS File saves, but shows EE error page instead of css template
How Do I?
I’m creating a basic page, linked to a basic style sheet. I have the html template, “testpage”, linked to a css template, “stylish”. The html is pulling in the stylesheet, but my style wasn’t being applied at all.
So I looked at the “stylish.css” file in the browser (NOT in EE) and it’s not the stylesheet at all, it’s a 404 error page generated by EE.
Why is EE deleting the stylesheet code in my stylish.css template
* { margin: 0; padding: 0; }
html {
background-image: url('http://lastcallradio.com/styles/bg.jpg')
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page-wrap {
width: 400px;
margin: 50px auto;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}
p {
font: 15px/2 Georgia, Serif;
margin: 0 0 30px 0;
text-indent: 40px;
}and replacing it with this?
<!doctype html>
<html>
<head>
<title>Error - ExpressionEngine</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en-us" dir="ltr">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<style>
@font-face{font-family:FontAwesome;font-style:normal;font-weight:400;src:url(../../asset/fonts/fontawesome-webfont.eot),url(../../asset/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'),url(../../asset/fonts/fontawesome-webfont.woff2) format('woff2'),url(../../asset/fonts/fontawesome-webfont.woff) format('woff'),url(../../asset/fonts/fontawesome-webfont.ttf) format('truetype'),url(../../asset/fonts/fontawesome-webfont.svg#fontawesome) format('svg')}.err-wrap{background-color:#fff;border:1px solid #dbdbdb;font-family:'New Courier',Courier,monospace;margin:20px auto;max-width:1200px;padding:1px 30px;text-align:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.err-wrap mark{background-color:#fff8da}.err-wrap h1,.err-wrap h2,.err-wrap h3,.err-wrap h4,.err-wrap h5,.err-wrap h6,.err-wrap p,.err-wrap ul,.err-wrap ol,.err-wrap dl{margin:20px 0;padding:0}.err-wrap h1{border-bottom:1px solid #dbdbdb;font-size:16px;font-weight:700;padding-bottom:10px;background-image:-moz-linear-gradient(#fff,#fff);background-image:-webkit-linear-gradient(#fff,#fff);background-image:linear-gradient(to right,#fff,#fff)}.err-wrap h2{background-color:transparent;border:0;color:#000;font-weight:700}.err-wrap h3 i{font-weight:400}.err-wrap h2,.err-wrap h3,.err-wrap h4,.err-wrap h5,.err-wrap h6{font-size:14px}.err-wrap p,.err-wrap li{color:#000;font-size:14px;font-weight:400;word-break:break-all}.err-wrap ul,.err-wrap ol,.err-wrap dl{list-style-type:none}.err-wrap li{border:solid #b5b5b5;border-width:0 1px 1px;padding:10px}.err-wrap li:first-child{border-width:1px}.err-wrap li:nth-child(2n){background-color:#f9f9f9}.err-wrap li ul,.err-wrap li ol,.err-wrap li dl{margin:10px 0 0}.err-wrap li li{font-size:12px}.err-wrap.error{border-color:#eccbcb}.err-wrap.error h1,.err-wrap.error b{color:#bc4848}.err-wrap.warn{border-color:#DDD4A9}.err-wrap.warn h1,.err-wrap.warn b{color:#a78900}.err-wrap.notice{border-color:#b5dbf3}.err-wrap.notice h1,.err-wrap.notice b{color:#1f80bd}.err-wrap.deprecate{border-color:#ffd1b3}.err-wrap.deprecate h1,.err-wrap.deprecate b{color:#f60}body{background-color:#f9f9f9;font-size:16px;font-weight:400}a{color:#1f80bd}a:hover{color:gray}
</style>
</head>
<body>
<section class="wrap">
<div class="err-wrap error">
<h1>404 Page Not Found</h1>
<h2>The page you requested was not found.</h2>
</div>
</section>
</body>
</html>So I’m guessing what it’s doing there is just not letting me see the css file in a browser, because when I pull the file directly off the server and look at it, it is the css file. So it’s got to be a problem with the css itself - which is weird since when it was embedded in the html template it worked perfectly.
Basically I’m just talking to myself now, so no worries. 😊
Ok, what I’m getting now is if I embed the style into the html, it renders just fine, images and all. However, if I remove the style from the html and put it into a .css file, it will not display a background image but will do all the rest of the style.
Are you calling your style sheet directly or as an EE CSS template?
You might also want to use a relative path for the background image, e.g.
background-image: url(/styles/bg.jpg)
Hi Rob, thanks for replying!
I made it as a .css template, then called it using the exp tag for the template group:
<link rel="stylesheet" href="{stylesheet='Main_Pages.group/style.css'}" type="text/css" media="all" />Which turns into this on the rendered page:
<link rel="stylesheet" href="http://lastcallradio.com/index.php?css=Main_Pages.group/style.css" type="text/css" media="all" />And on the rendered page source if you click that link, it gives you a 404, it doesn’t let you see the stylesheet. Although maybe that’s intentional?
Relative path is giving me some problems, since I followed “best practices” and put my system folder outside my site directory and renamed it. So is it relative to where the templates actually reside, or relative to my actual site directory?
Ah I see, you don’t need to add .group or .css, so update your stylesheet tag to this:
{stylesheet='Main_Pages/style'}
Relative paths are relative to the root directory, e.g. /public_html, not the systems directory.
Ok, I was a little confused here, it’s been a long day. 😊 Also it’s been a long, LONG time I’ve been half-heartedly trying to learn EE, but I swear I’m going to master this thing or die trying.
I think the problem lies in the CP - I’ve been looking at this using “view rendered” on the Edit Template page, and it looks like the attached screenshot. But if I go to the front page of the site lastcallradio.com it’s using the stylesheet.
Weird.
Screenshot located here:
OMG Rob you’re a genius!
I took the instructions here: https://docs.expressionengine.com/latest/templates/globals/stylesheet.html quite literally and went WAY too far with the template group and style sheet naming.
Thanks! It’s now using the stylesheet!
Glad you got it sorted.