Hello all, I am a new Silverstripe user and although I'm not new to CSS I am not a professional designer either so any help you can provide is greatly appreciated.
Everything shows up correctly on the main blog page http://www.cassiusblueconsulting.com/blog/ but when I click to view the blog entry it completely ruins the theme. http://www.cassiusblueconsulting.com/blog/sample-blog-entry/
I assume something about the javascript is conflicting with the BlogEntry.ss file. I did not design the java myself. I purchased that code and have implemented into Silverstripe.
Does anyone have any idea of how to fix this? Or is there a way for the blog entry page to use a different page layout? For example, I would actually prefer if the blog entry did not include the big rotating graphical header and instead brought the content up to the top just below the navigation.
I'm not sure what additional information to provide. But any assistance you can provide is greatly appreciated. I have started this site over twice trying to figure out what is causing the issue.
This is the CSS controlling the rotating images...
/* ============================= JS faded-slider START ===================================== */
#faded {
width: 960px;
height: 443px;
position: absolute;
top: 46px;
left: 225px;
margin: 0 auto;
}
#faded ul li {
background: url(http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/main-tail.gif) repeat 50% 50%;
width: 986px;
}
#faded ul li div {
background: url(http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/gallery-info.png) no-repeat 0% 0%;
width: 260px;
height: 173px;
padding: 78px 36px 60px 79px;
overflow: hidden;
position: absolute;
top: 19px;
left: 612px;
z-index: 100;
}
#faded ul li div em {
display: block;
padding: 0 0 4px 0;
line-height: 1.29em;
font-size: 24px;
font-weight: 500;
font-style: normal;
color: #332623;
}
#faded ul li div p {
padding: 0 0 0 2px;
line-height: 20px;
font-size: 13px;
color: #888376;
}
ul.pagination {
position: absolute;
right: 73px;
bottom: 43px;
z-index: 100;
}
ul.pagination li {
background: none !important;
float: left;
width: 25px !important;
padding: 0 0 0 6px;
list-style:none;
}
ul.pagination li a {
background: url(http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/pagination.png) no-repeat 0% 0%;
float: left;
width: 25px;
height: 25px;
overflow: hidden;
text-indent: -999px;
font-size: 0;
}
ul.pagination li a:hover {
background-position: 0% -25px;
}
ul.pagination li.current a {
background-position: 0% -25px;
}
/* ============================== JS faded-slider END ====================================== */
And thsi is the Page.ss code
<html lang="$ContentLocale">
<head>
<% base_tag %>
<title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> » $SiteConfig.Title</title>
$MetaTags(false)
<link rel="shortcut icon" href="/favicon.ico" />
<% require themedCSS(layout) %>
<% require themedCSS(typography) %>
<% require themedCSS(form) %>
<!--[if IE 6]>
<style type="text/css">
@import url(themes/blackcandy/css/ie6.css);
</style>
<![endif]-->
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/Neuton_500.font.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/cufon-replace.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/jquery.faded.js"></script>
<script type="text/javascript">
$(function(){
$("#faded").faded({
speed: 200,
crossfade: true,
autoplay: 9000,
autorestart: true
});
});
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<![endif]-->
<!--[if IE]>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/html5.js"></script>
<![endif]-->
</head>
<body>
<!--HEADER BEGIN-->
<div id="Header">
<div id="main-tail-top">
<div id="Navigation"><ul><% include Navigation %><ul></div>
<strong><a href="http://www.cassiusblueconsulting.com/about">About Cassius Blue</a> | <a href="http://www.cassiusblueconsulting.com/contact-us">Contact Us</a></strong>
</div>
</div> <!--main-tail-top-->
<!--FADED Begin-->
<div id="faded">
<ul>
<li> <img src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/gallery-1.jpg" alt="" />
<div> <em>Wowzer!</em>
<p>Are you a new business skilled in your field but need help marketing your business? Or are you considering starting a business but don't know where to begin? <a href="http://www.cassiusblueconsulting.com/services/" target="_self">Cassius Blue can help!</a> </p>
</div>
</li>
<li> <img src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/gallery-2.jpg" alt="" />
<div> <em>Genius!</em>
<p>Did you know you can get best practices, tips & tricks, tools and other useful resources to grow your business delivered weekly right to your in box for FREE! <a href="http://www.cassiusblueconsulting.com/eZine/" target="_self">Simply sign up for the Cassius Blue eZine today!<a></p>
</div>
</li>
<li> <img src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/gallery-3.jpg" alt="" />
<div> <em>Type A Marketing Genius!</em>
<p>Marketing Maven Brandi Starr: Knowledgable. Rescourceful. Trustworthy. Innovative. Creative. Coach. Consultant. Cheerleader. Friend.</p>
</div>
</li>
</ul>
</div>
<!--FADED END-->
</div> <!--Header-->
<!--HEADER END-->
<!--CONTENT BEGIN-->
<div id="main-tail">
<div id="Content">
<div class="roundedcornr_box_255503">
<div class="roundedcornr_top_255503"><div class="clear"> </div></div>
<div class="roundedcornr_content_255503"><div id="Layout"> $Layout </div><div style="clear: both;"> </div>
<!--roundedcornr_content_255503--></div>
<div class="roundedcornr_bottom_255503"><div class="clear"> </div></div>
<!--roundedcornr_box_255503--></div>
</div> <!--Content-->
</div> <!--main-tail-->
<!--CONTENT End-->
<!--FOOTER Begin-->
<div id="main-tail-bot">
<div id="Footer"><div class="wrapper"><% include Footer %></div></div>
</div> <!--main-tail-top-->
<!--FOOTER End-->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
