JScript and CSS not getting called
Permalink
I built a theme and in header.php I put:
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!-- Site Header Content //
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('menu.css')?>" />-->
<style type="text/css">
/* CSS Document */
* {margin:0;
padding:0;}
#wrapper {background-color:#fff;
width:100%;
height:900px;}
/*header bg*/
#header {background-image:url(http://paullemke.net/development/themes/polliwog_theme/images/sky.jpg);
background-repeat: repeat-x;
background-color: #eff4fa;
width:100%;
height:514px;}
/*header div*/
#header_imgs {margin:0 auto;
background-image:url(http://paullemke.net/development/themes/polliwog_theme/images/clouds.png);
background-repeat:none;
width:960px;
height:514px;
}
/*main content bg*/
#content {background:url(http://paullemke.net/development/themes/polliwog_theme/images/water.jpg) repeat-x #6FC7B1;
width:100%;
min-height:290px;
padding-top:15px;
}
/*main content div*/
#a41 {border:red 1px solid;
margin:0 auto;
width:960px;}
#menu {width:100%;}
/*footer div*/
#footer {background:url(http://paullemke.net/development/themes/polliwog_theme/images/footer.jpg) repeat-x;
width:100%;
height:61px;
padding-top:20px;}
#footer_nav {font-family:Arial, Helvetica, sans-serif;
color:#3f2818;
font-size: 10px;
width:960px;
margin:0 auto;}
span.sign-in {margin-left: 20px}
span.powered-by { float:right; margin-right:20px;}
/**
*********************************************
* Prototype of styles for horizontal CSS-menu
* @data 30.06.2009
*********************************************
* (X)HTML-scheme:
* <div id="menu">
* <ul class="menu">
* <li><a href="#" class="parent"><span>level 1</span></a>
* <ul>
* <li><a href="#" class="parent"><span>level 2</span></a>
* <ul><li><a href="#"><span>level 3</span></a></li></ul>
* </li>
* </ul>
* </li>
* <li class="last"><a href="#"><span>level 1</span></a></li>
* </ul>
* </div>
*********************************************
*/
/* menu::base */
div#menu {
/*height:41px;*/
height:55px;
/*background:url(http://paullemke.net/development/themes/polliwog_theme/images/main-bg.png) repeat-x;*/
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
div#menu ul.menu {
padding-right: 30px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float: left;
}
div#menu li:hover>ul {
left: -2px;
}
div#menu a {
position: relative;
z-index: 10;
height: 55px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; font-weight:bold; }
div#menu li.current a {}
div#menu span {
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
}
div#menu ul ul a.parent span {
background-position:95% 8px;
background-image: url(http://paullemke.net/development/themes/polliwog_theme/images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
background-image: url(http://paullemke.net/development/themes/polliwog_theme/images/item-pointer-mover.gif);
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 10px;
line-height: 30px;
color: #906548;
}
div#menu span {
margin-top: 5px;
}/**@replace#1*/
/*div#menu li {http://paullemke.net/development/themes/polliwog_theme/images/main-delimiter.png) 98% 4px no-repeat; }*/
div#menu li.last { background: none; }
/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
position: absolute;
top: 38px;
left: -999em;
width: 163px;
padding: 5px 0 0 0;
background: rgb(45,45,45);
margin-top:1px;
}
div#menu ul ul a {
padding: 0 0 0 15px;
height: auto;
float: none;
display: block;
line-height: 24px;
color: rgb(169,169,169);
}
div#menu ul ul span {
margin-top: 0;
padding-right: 15px;
_padding-right: 20px;
color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul ul {
padding: 0;
margin: -38px 0 0 163px !important;
margin-left:172px;
}
/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }
/* lava lamp */
div#menu li.back {
background: url(http://paullemke.net/development/themes/polliwog_theme/images/lava.png) no-repeat right -44px !important;
background-image: url(http://paullemke.net/development/themes/polliwog_theme/images/lava.gif);
width: 13px;
height: 44px;
z-index: 8;
position: absolute;
margin: -1px 0 0 -5px;
}
/*div#menu li.back .left {
background: url(../images/lava.png) no-repeat top left !important;
background-image: url(../images/lava.gif);
height: 44px;
margin-right: 8px;
}*/
</style>
<?php Loader::element('header_required'); ?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
Neither the js or css is getting called. I had to include the css in the header for it to work but haven't done so yet for the js. i am trying to avoid needing to do that. Anyone have an idea why they aren't getting called? Thanks.
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!-- Site Header Content //
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('menu.css')?>" />-->
<style type="text/css">
/* CSS Document */
* {margin:0;
padding:0;}
#wrapper {background-color:#fff;
width:100%;
height:900px;}
/*header bg*/
#header {background-image:url(http://paullemke.net/development/themes/polliwog_theme/images/sky.jpg);
background-repeat: repeat-x;
background-color: #eff4fa;
width:100%;
height:514px;}
/*header div*/
#header_imgs {margin:0 auto;
background-image:url(http://paullemke.net/development/themes/polliwog_theme/images/clouds.png);
background-repeat:none;
width:960px;
height:514px;
}
/*main content bg*/
#content {background:url(http://paullemke.net/development/themes/polliwog_theme/images/water.jpg) repeat-x #6FC7B1;
width:100%;
min-height:290px;
padding-top:15px;
}
/*main content div*/
#a41 {border:red 1px solid;
margin:0 auto;
width:960px;}
#menu {width:100%;}
/*footer div*/
#footer {background:url(http://paullemke.net/development/themes/polliwog_theme/images/footer.jpg) repeat-x;
width:100%;
height:61px;
padding-top:20px;}
#footer_nav {font-family:Arial, Helvetica, sans-serif;
color:#3f2818;
font-size: 10px;
width:960px;
margin:0 auto;}
span.sign-in {margin-left: 20px}
span.powered-by { float:right; margin-right:20px;}
/**
*********************************************
* Prototype of styles for horizontal CSS-menu
* @data 30.06.2009
*********************************************
* (X)HTML-scheme:
* <div id="menu">
* <ul class="menu">
* <li><a href="#" class="parent"><span>level 1</span></a>
* <ul>
* <li><a href="#" class="parent"><span>level 2</span></a>
* <ul><li><a href="#"><span>level 3</span></a></li></ul>
* </li>
* </ul>
* </li>
* <li class="last"><a href="#"><span>level 1</span></a></li>
* </ul>
* </div>
*********************************************
*/
/* menu::base */
div#menu {
/*height:41px;*/
height:55px;
/*background:url(http://paullemke.net/development/themes/polliwog_theme/images/main-bg.png) repeat-x;*/
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
div#menu ul.menu {
padding-right: 30px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float: left;
}
div#menu li:hover>ul {
left: -2px;
}
div#menu a {
position: relative;
z-index: 10;
height: 55px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; font-weight:bold; }
div#menu li.current a {}
div#menu span {
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
}
div#menu ul ul a.parent span {
background-position:95% 8px;
background-image: url(http://paullemke.net/development/themes/polliwog_theme/images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
background-image: url(http://paullemke.net/development/themes/polliwog_theme/images/item-pointer-mover.gif);
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 10px;
line-height: 30px;
color: #906548;
}
div#menu span {
margin-top: 5px;
}/**@replace#1*/
/*div#menu li {http://paullemke.net/development/themes/polliwog_theme/images/main-delimiter.png) 98% 4px no-repeat; }*/
div#menu li.last { background: none; }
/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
position: absolute;
top: 38px;
left: -999em;
width: 163px;
padding: 5px 0 0 0;
background: rgb(45,45,45);
margin-top:1px;
}
div#menu ul ul a {
padding: 0 0 0 15px;
height: auto;
float: none;
display: block;
line-height: 24px;
color: rgb(169,169,169);
}
div#menu ul ul span {
margin-top: 0;
padding-right: 15px;
_padding-right: 20px;
color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul ul {
padding: 0;
margin: -38px 0 0 163px !important;
margin-left:172px;
}
/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }
/* lava lamp */
div#menu li.back {
background: url(http://paullemke.net/development/themes/polliwog_theme/images/lava.png) no-repeat right -44px !important;
background-image: url(http://paullemke.net/development/themes/polliwog_theme/images/lava.gif);
width: 13px;
height: 44px;
z-index: 8;
position: absolute;
margin: -1px 0 0 -5px;
}
/*div#menu li.back .left {
background: url(../images/lava.png) no-repeat top left !important;
background-image: url(../images/lava.gif);
height: 44px;
margin-right: 8px;
}*/
</style>
<?php Loader::element('header_required'); ?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
Neither the js or css is getting called. I had to include the css in the header for it to work but haven't done so yet for the js. i am trying to avoid needing to do that. Anyone have an idea why they aren't getting called? Thanks.
Have you tried moving the 2 js files in the JS directory of your theme and specifying your themepath with?:
I actually had them in folders originally, both the js and css. It would not call them then either.
You probably didn't have the files in the correct place. You want them in your theme directory (so YOURSITE/themes/YOURTHEMENAME/ ).
Then you also need to use the following lines to include them:
Note that you do NOT want to include jquery yourself because concrete5 already loads it for you.
If this still doesn't work, please tell us the full directory to the js and css files so we can see if they're in the right place. Also, post the <head> portion of your page type template so we can see if you have the includes in there properly.
Good luck!
Then you also need to use the following lines to include them:
Note that you do NOT want to include jquery yourself because concrete5 already loads it for you.
If this still doesn't work, please tell us the full directory to the js and css files so we can see if they're in the right place. Also, post the <head> portion of your page type template so we can see if you have the includes in there properly.
Good luck!
