CSS File Not Loading
Permalink
CSS file for the home page isn't loading on the index.php page? I have it set to get the theme path, but it's not doing anything. Please help.
Well, it's actually the default.php that's not loading. Here's the link to the site.http://aclongview.com/index.php...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/jquery-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/style.css" />
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
<style type="text/css">
.clear {
clear:both
}
#gallery {
position:relative;
height:360px;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
}
#gallery .caption {
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
<?php
Loader::element('header_required');
?>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo"><img src="<?=$this->getThemePath()?>/images/logo.png" /></img></div>
<div class="nav">
<ul id="topnav">
<li><a href="index.php">Home</a></li>
<li> <a href="/index.php?cID=96">About Us</a></li>
<li><a href="#">Boards</a></li>
<li><a href="#">Teams</a>
<span>
<a href="#">98</a> |
<a href="#">99</a> |
<a href="#">00</a> |
<a href="#">01</a> |
<a href="#">Academy</a>
</span>
</li>
<li><a href="#">Coaches</a>
<span>
<a href="/coach-wallin">Rob Wallin</a> |
<a href="/chris-yoder">Chris Yoder</a> |
<a href="/john-haskins">John Haskins</a> |
<a href="/andy-sumrow"> Andy Sumrow</a>
</span>
</li>
<li><a href="/calendar">Calendar</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">2011 Soccer Camp</a></li>
</ul>
</div>
</div>
<div id="mid-page">
<div class="right">
<div class="top-right">
<a href="http://www.summersrealestategroup.com/"><img src="<?=$this->getThemePath()?>/images/summers.jpg"></img></a>
</div>
<div class="bottom-right">
<div class="fb"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAC-Longview%2F223156521044491&width=200&colorscheme=light&show_faces=false&stream=false&header=true&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:62px;" allowTransparency="true"></iframe></div>
</div>
</div>
<div class="left">
<div id="gallery">
<a href="#" class="show">
<img src="<?=$this->getThemePath()?>/images/flowing-rock.jpg" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/grass-blades.jpg" width="580" height="360" title="" alt="" rel="<h3>Grass Blades</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/ladybug.jpg" width="580" height="360" title="" alt="" rel="<h3>Ladybug</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/lightning.jpg" width="580" height="360" title="" alt="" rel="<h3>Lightning</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/lotus.jpg" width="580" height="360" title="" alt="" rel="<h3>Lotus</h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/mojave.jpg" width="580" height="360" title="" alt="" rel="<h3>Mojave</h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/pier.jpg" width="580" height="360" title="" alt="" rel="<h3>Pier</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/sea-mist.jpg" width="580" height="360" title="" alt="" rel="<h3>Sea Mist</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/stones.jpg" width="580" height="360" title="" alt="" rel="<h3>Stone</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
</a>
<div class="caption"><div class="content"></div></div>
</div>
</div>
</div>
<div id="low-page">
<div class="right-ad">
</div>
<div class="news">
<h3>News & Updates</h3>
<div class="story">
<h2><?php $a = new Area('News Header 1'); $a->display($c); ?></h2>
<p><?php $a = new Area('News Story 1'); $a->display($c); ?></p>
</div>
<div class="story">
<h2><?php $a = new Area('News Header 2'); $a->display($c); ?></h2>
<p><?php $a = new Area('News story 2'); $a->display($c); ?></p>
</div>
<div class="story">
<h2><?php $a = new Area('News Header 3'); $a->display($c); ?></h2>
<p><?php $a = new Area('News Story 3'); $a->display($c); ?></p>
</div>
</div>
</div>
<div id="footer">
<h5>Copyright 2011 @aclongview.com</h5> | <h5><a href="#">Sponsors</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/jquery-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/style.css" />
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
<style type="text/css">
.clear {
clear:both
}
#gallery {
position:relative;
height:360px;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
}
#gallery .caption {
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
<?php
Loader::element('header_required');
?>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo"><img src="<?=$this->getThemePath()?>/images/logo.png" /></img></div>
<div class="nav">
<ul id="topnav">
<li><a href="index.php">Home</a></li>
<li> <a href="/index.php?cID=96">About Us</a></li>
<li><a href="#">Boards</a></li>
<li><a href="#">Teams</a>
<span>
<a href="#">98</a> |
<a href="#">99</a> |
<a href="#">00</a> |
<a href="#">01</a> |
<a href="#">Academy</a>
</span>
</li>
<li><a href="#">Coaches</a>
<span>
<a href="/coach-wallin">Rob Wallin</a> |
<a href="/chris-yoder">Chris Yoder</a> |
<a href="/john-haskins">John Haskins</a> |
<a href="/andy-sumrow"> Andy Sumrow</a>
</span>
</li>
<li><a href="/calendar">Calendar</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">2011 Soccer Camp</a></li>
</ul>
</div>
</div>
<div id="mid-page">
<div class="right">
<div class="top-right">
<a href="http://www.summersrealestategroup.com/"><img src="<?=$this->getThemePath()?>/images/summers.jpg"></img></a>
</div>
<div class="bottom-right">
<div class="fb"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAC-Longview%2F223156521044491&width=200&colorscheme=light&show_faces=false&stream=false&header=true&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:62px;" allowTransparency="true"></iframe></div>
</div>
</div>
<div class="left">
<div id="gallery">
<a href="#" class="show">
<img src="<?=$this->getThemePath()?>/images/flowing-rock.jpg" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/grass-blades.jpg" width="580" height="360" title="" alt="" rel="<h3>Grass Blades</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/ladybug.jpg" width="580" height="360" title="" alt="" rel="<h3>Ladybug</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/lightning.jpg" width="580" height="360" title="" alt="" rel="<h3>Lightning</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/lotus.jpg" width="580" height="360" title="" alt="" rel="<h3>Lotus</h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/mojave.jpg" width="580" height="360" title="" alt="" rel="<h3>Mojave</h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/pier.jpg" width="580" height="360" title="" alt="" rel="<h3>Pier</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/sea-mist.jpg" width="580" height="360" title="" alt="" rel="<h3>Sea Mist</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
</a>
<a href="#">
<img src="<?=$this->getThemePath()?>/images/stones.jpg" width="580" height="360" title="" alt="" rel="<h3>Stone</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
</a>
<div class="caption"><div class="content"></div></div>
</div>
</div>
</div>
<div id="low-page">
<div class="right-ad">
</div>
<div class="news">
<h3>News & Updates</h3>
<div class="story">
<h2><?php $a = new Area('News Header 1'); $a->display($c); ?></h2>
<p><?php $a = new Area('News Story 1'); $a->display($c); ?></p>
</div>
<div class="story">
<h2><?php $a = new Area('News Header 2'); $a->display($c); ?></h2>
<p><?php $a = new Area('News story 2'); $a->display($c); ?></p>
</div>
<div class="story">
<h2><?php $a = new Area('News Header 3'); $a->display($c); ?></h2>
<p><?php $a = new Area('News Story 3'); $a->display($c); ?></p>
</div>
</div>
</div>
<div id="footer">
<h5>Copyright 2011 @aclongview.com</h5> | <h5><a href="#">Sponsors</a>
</div>
</div>
</body>
</html>
Try this:
instead of this:
<link rel="stylesheet" type="text/css" href="<?php print $this->getThemePath(); ?>/style.css" />
instead of this:
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/style.css" />
Can you provide a link to the web page in particular and put the index.php code here please.
Thanks!