I've got the template ready (just for practice) but I'm having a lot of trouble refactoring it:
The errors displayed by the terminal are: ActionController :: RoutingError (No route matches [GET] "/pages/assets/photos/photo-25.jpg"): of almost all images and css and js tbm. I had already refactored some other templates and I did not have as much difficulty as I'm trying with this one. If someone can help me with some changes in the then code, I'll be grateful.
<!-- BEGIN head -->
<head>
<!-- Title -->
<title>Botanica</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!-- Stylesheets -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=McLaren" type="text/css" />
<link rel="stylesheet" href="css/main-stylesheet.css" type="text/css" />
<link rel="stylesheet" href="css/shortcodes.css" type="text/css" />
<!-- JavaScripts -->
<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.sexyslider-blog.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#blog-slider").SexySlider({
autopause : true,
auto : true
});
});
</script>
<!-- END head -->
</head>
<!-- BEGIN body -->
<body class="top">
<!-- BEGIN .main-body-wrapper -->
<div class="main-body-wrapper">
<!-- BEGIN .main-logo -->
<div class="main-logo">
<a href="#"><img src="images/logo-botanica-1.png" alt="" width="447" height="69" style="margin: 38px 0 0 0;" /></a>
<!-- <div style="padding: 50px 0 0 0;">
<a href="#" class="title">Rockstar</a>
</div> -->
<!-- END .main-logo -->
</div>
<!-- BEGIN .main-content-wrapper -->
<div class="main-content-wrapper">
<div class="deco-fruits-1"></div>
<!-- BEGIN .main-content -->
<div class="main-content">
<!-- BEGIN .main-menu -->
<div class="main-menu custom-font-1">
<table>
<tr>
<td>
<ul>
<li><a href="homepage.html">Homepage</a></li>
<li>
<a href="blog.html"><span>Blog</span></a>
<ul>
<li><a href="blog.html">Main blog list</a></li>
<li><a href="post.html">Single post test entry</a></li>
</ul>
</li>
<li><a href="shortcodes.html">Shortcodes</a></li>
<li>
<a href="photo-gallery.html"><span>Photos</span></a>
<ul>
<li><a href="photo-gallery.html">Photo gallery index</a></li>
<li><a href="photo-gallery-list.html">Gallery image list</a></li>
<li><a href="photo-gallery-single.html">Single image</a></li>
</ul>
</li>
<li><a href="contact-us.html">Contact us</a></li>
<li>
<a href="contact-us.html"><span>Search</span></a>
<ul>
<li>
<form action="#">
<input type="text" class="search" />
<input type="submit" class="submit" />
</form>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<div class="clear"></div>
<!-- END .main-menu -->
</div>
<!-- BEGIN .left-content-sidebar-wrapper -->
<div class="left-content-sidebar-wrapper">
<!-- BEGIN .left-content -->
<div class="left-content">
<!-- BEGIN .blog-slider -->
<div class="blog-slider">
<div class="navigation" style="z-index:10;">
<div id="excerpt"></div>
<div class="steps">
<table>
<tr>
<td id="control"></td>
</tr>
</table>
</div>
</div>
<div class="border" style="position: absolute!important; margin: 0 0 0 0px!important;"></div>
<div class="image-wrapper" id="blog-slider">
<a href="#" class="border"></a>
<img src="images/photos/photo-26.jpg" alt="<a href=_.html#">Aliquam lorem libero mollis malesuada consectetur</a>" width="528" height="260" class="image" />
<img src="http://botanica.orange-themes.com/wp-content/themes/botanica-theme/timthumb.php?src=http://botanica.orange-themes.com/wp-content/uploads/2012/10/13497754963.jpg&w=528&h=260&zc=1&q=100"alt="<a href=_.html#">Vivamus pharetra fringilla augue, a elementum ante ultrice.</a>" width="528" height="260" class="image" />
<img src="http://botanica.orange-themes.com/wp-content/themes/botanica-theme/timthumb.php?src=http://botanica.orange-themes.com/wp-content/uploads/2012/10/13497754451.jpg&w=528&h=260&zc=1&q=100"alt="<a href=_.html#">Aliquam lorem libero mollis malesuada consectetur</a>" width="528" height="260" class="image" />
</div>
<!-- END .blog-slider -->
</div>
<!-- BEGIN .blog-list -->
<div class="blog-list">
<div class="item">
<h2 class="custom-font-1"><a href="#">Maecenas lacus nunc rutrum vitae phaaretra imperdiet</a></h2>
<div class="info">
<a href="#" class="time">John Smith @ 09.07.2011</a>
<a href="#" class="section">Section</a>
<a href="#" class="comment-nr">9 comments</a>
</div>
<a href="#"><img src="images/image-overlay-528x170.png" alt="" width="528" height="181" style="background: url(images/photos/photo-22.jpg) 0 0 no-repeat;" /></a>
<p class="intro">Maecenas neque est, feugiat quis porta in, condimentum eget arcu. Maecenas fringilla aliquam ultricies. Pellentesque vel turpis nec leo tincidunt sollicitudin ac non risus. Ves tibu lum ultrices feugiat velit, quis tincid unt velit volutpat nec. Vivamus pharetra fringilla augue, a elementum ante ultrices tincidunt. Ut mi ligula, interdum ut pharetra.</p>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<div class="item">
<h2 class="custom-font-1"><a href="#">Duis fringillectus vitae rutrum massa</a></h2>
<div class="info">
<a href="#" class="time">John Smith @ 09.07.2011</a>
<a href="#" class="section">Section</a>
<a href="#" class="comment-nr">9 comments</a>
</div>
<a href="#"><img src="images/image-overlay-528x170.png" alt="" width="528" height="181" style="background: url(images/photos/photo-23.jpg) 0 0 no-repeat;" /></a>
<p class="intro">Ut nec magna libero, aliquet volutpat turpis. Sed vel neque at nulla condimentum pretium. Curabitur commodo magna eu arcu ultrices vel lobortis nunc faucibus. Nulla id lacus ut sem fringilla ullamcorper nec ut metus. In scelerisque elit vitae magna luctus gravida.</p>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<div class="item">
<h2 class="custom-font-1"><a href="#">Maecenas lacus nunc rutrum vitae phaaretra imperdiet</a></h2>
<div class="info">
<a href="#" class="time">John Smith @ 09.07.2011</a>
<a href="#" class="section">Section</a>
<a href="#" class="comment-nr">9 comments</a>
</div>
<a href="#"><img src="images/image-overlay-528x170.png" alt="" width="528" height="181" style="background: url(images/photos/photo-24.jpg) 0 0 no-repeat;" /></a>
<p class="intro">Maecenas neque est, feugiat quis porta in, condimentum eget arcu. Maecenas fringilla aliquam ultricies. Pellentesque vel turpis nec leo tincidunt sollicitudin ac non risus. Ves tibu lum ultrices feugiat velit, quis tincid unt velit volutpat nec. Vivamus pharetra fringilla augue, a elementum ante ultrices tincidunt. Ut mi ligula, interdum ut pharetra.</p>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<div class="item">
<h2 class="custom-font-1"><a href="#">Duis fringillectus vitae rutrum massa</a></h2>
<div class="info">
<a href="#" class="time">John Smith @ 09.07.2011</a>
<a href="#" class="section">Section</a>
<a href="#" class="comment-nr">9 comments</a>
</div>
<a href="#"><img src="images/image-overlay-528x170.png" alt="" width="528" height="181" style="background: url(images/photos/photo-25.jpg) 0 0 no-repeat;" /></a>
<p class="intro">Ut nec magna libero, aliquet volutpat turpis. Sed vel neque at nulla condimentum pretium. Curabitur commodo magna eu arcu ultrices vel lobortis nunc faucibus. Nulla id lacus ut sem fringilla ullamcorper nec ut metus. In scelerisque elit vitae magna luctus gravida.</p>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<!-- END .blog-list -->
</div>
<table class="pages-1 custom-font-1">
<tr>
<td>
<a href="#" class="default"><span>1</span></a>
<a href="#" class="active"><span>2</span></a>
<a href="#" class="default"><span>3</span></a>
<a href="#" class="default"><span>4</span></a>
<a href="#" class="default"><span>5</span></a>
<a href="#" class="default"><span>6</span></a>
<a href="#" class="next">Next</a>
<a href="#" class="prev">Previous</a>
</td>
</tr>
</table>
<!-- END .left-content -->
</div>
<!-- BEGIN .sidebar -->
<div class="sidebar">
<!-- BEGIN .sidebar-item .latest-activity -->
<div class="sidebar-item">
<div class="latest-activity">
<div class="main-title-1 custom-font-1">
<span>Latest activity</span>
</div>
<!-- BEGIN .tabs-1 -->
<div class="tabs-1 custom-font-1">
<table>
<tr>
<td><a href="#" class="tab-1 active"><span>Popular</span></a></td>
<td><a href="#" class="tab-1"><span>Recent</span></a></td>
<td><a href="#" class="tab-1"><span>Comments</span></a></td>
</tr>
</table>
<!-- END .tabs-1 -->
</div>
<!-- BEGIN .list -->
<div class="list">
<!-- BEGIN .item -->
<div class="item">
<div class="image">
<a href="#"><img src="images/image-overlay-70x70.png" alt="" width="70" height="78" style="background: url(images/photos/photo-13.jpg) 0 0 no-repeat;" /></a>
</div>
<div class="text">
<h5 class="custom-font-1"><a href="#">Proin luctus ullamcor ulputate nunc vitae</a></h5>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<!-- END .item -->
</div>
<!-- BEGIN .item -->
<div class="item">
<div class="image">
<a href="#"><img src="images/image-overlay-70x70.png" alt="" width="70" height="78" style="background: url(images/photos/photo-14.jpg) 0 0 no-repeat;" /></a>
</div>
<div class="text">
<h5 class="custom-font-1"><a href="#">Aenean iaculis, risus eget sollicitudin pretiumligula</a></h5>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<!-- END .item -->
</div>
<!-- BEGIN .item -->
<div class="item">
<div class="image">
<a href="#"><img src="images/image-overlay-70x70.png" alt="" width="70" height="78" style="background: url(images/photos/photo-15.jpg) 0 0 no-repeat;" /></a>
</div>
<div class="text">
<h5 class="custom-font-1"><a href="#">Pellentesque aliquet orcid ornare quamsit amet</a></h5>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<!-- END .item -->
</div>
<!-- END .list -->
</div>
</div>
<!-- END .sidebar-item .latest-activity -->
</div>
<!-- BEGIN .sidebar-item .latest-activity -->
<div class="sidebar-item">
<div class="sidebar-photos">
<div class="main-title-1 custom-font-1">
<span>Latest photos</span>
</div>
<!-- BEGIN .photos -->
<div class="photos">
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-16.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-17.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-18.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-19.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-20.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-21.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-16.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-17.jpg) 0 0 no-repeat;" /></a>
<a href="#"><img src="images/image-overlay-75x75.png" alt="" width="75" height="83" style="background: url(images/photos/photo-18.jpg) 0 0 no-repeat;" /></a>
</div>
<!-- END .photos -->
</div>
<!-- END .sidebar-item .latest-activity -->
</div>
<!-- BEGIN .sidebar-item .latest-activity -->
<div class="sidebar-item">
<div class="latest-news">
<div class="main-title-1 custom-font-1">
<span>Latest news</span>
</div>
<!-- BEGIN .list -->
<div class="list">
<!-- BEGIN .item -->
<div class="item">
<h5 class="custom-font-1"><a href="#">Proin luctus ullamcor vulputate nunc vitaetas</a></h5>
<div class="info">
<a href="#" class="time">09.07.2011</a>
<a href="#" class="section">Section</a>
<a href="#" class="comment-nr">9</a>
</div>
<p class="intro">
Cras vulputate dui at felis varius et consecte tur risus viverra. Vivamus commodo gravida malesuada.consequat dui.
</p>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
<!-- END .item -->
</div>
<!-- BEGIN .item -->
<div class="item">
<h5 class="custom-font-1"><a href="#">Aenean sollicitudin varius nullaa ullamcorper turpis dictum ut</a></h5>
<div class="info">
<a href="#" class="time">09.07.2011</a>
<a href="#" class="section">Section</a>
<a href="#" class="comment-nr">12</a>
</div>
<p class="intro">
Praesent consequat velit id diam porta ut ultricies enim hendrerit. Morbi leo velit, consectetur at accumsan volutpat, bibendum
</p>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
<!-- END .item -->
</div>
<!-- BEGIN .item -->
<div class="item">
<h5 class="custom-font-1"><a href="#">Phasellus ornare justo velnul</a></h5>
<div class="info">
<a href="#" class="time">09.07.2011</a>
<a href="#" class="section">Section</a>
<a href="#" class="comment-nr">12</a>
</div>
<p class="intro">
Praesent consequat velit id diam porta ut ultricies enim hendrerit. Morbi leo velit, consectetur at accumsan volutpat, bibendum
</p>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
<!-- END .item -->
</div>
</div>
<!-- END .list -->
</div>
<!-- END .sidebar-item .latest-activity -->
</div>
<!-- BEGIN .sidebar-item .latest-activity -->
<div class="sidebar-item">
<div class="latest-activity">
<div class="main-title-1 custom-font-1">
<span>Latest news</span>
</div>
<!-- BEGIN .list -->
<div class="list">
<!-- BEGIN .item -->
<div class="item">
<div class="image">
<a href="#"><img src="images/image-overlay-70x70.png" alt="" width="70" height="78" style="background: url(images/photos/photo-13.jpg) 0 0 no-repeat;" /></a>
</div>
<div class="text">
<h5 class="custom-font-1"><a href="#">Proin luctus ullamcor ulputate nunc vitae</a></h5>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<!-- END .item -->
</div>
<!-- BEGIN .item -->
<div class="item">
<div class="image">
<a href="#"><img src="images/image-overlay-70x70.png" alt="" width="70" height="78" style="background: url(images/photos/photo-14.jpg) 0 0 no-repeat;" /></a>
</div>
<div class="text">
<h5 class="custom-font-1"><a href="#">Aenean iaculis, risus eget sollicitudin pretiumligula</a></h5>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<!-- END .item -->
</div>
<!-- BEGIN .item -->
<div class="item">
<div class="image">
<a href="#"><img src="images/image-overlay-70x70.png" alt="" width="70" height="78" style="background: url(images/photos/photo-15.jpg) 0 0 no-repeat;" /></a>
</div>
<div class="text">
<h5 class="custom-font-1"><a href="#">Pellentesque aliquet orcid ornare quamsit amet</a></h5>
<p><a href="#" class="more-link custom-font-1"><span>Read more</span></a></p>
</div>
<!-- END .item -->
</div>
<!-- END .list -->
</div>
</div>
<!-- END .sidebar-item .latest-activity -->
</div>
<!-- END .sidebar -->
</div>
<div class="clear"></div>
<!-- END .left-content-sidebar-wrapper -->
</div>
<div class="clear"></div>
<div class="main-footer custom-font-1">
<p>Copyright & design © 2012 ... • <a href="#"></a></p>
<div>
<a href="#"><img src="images/ico-youtube-1.png" alt="YouTube" width="23" height="21" /></a>
<a href="#"><img src="images/ico-facebook-1.png" alt="Facebook" width="23" height="21" /></a>
<a href="#"><img src="images/ico-twitter-2.png" alt="Facebook" width="23" height="21" /></a>
<a href="#"><img src="images/ico-flickr-2.png" alt="Facebook" width="23" height="21" /></a>
<a href="#"><img src="images/ico-rss-1.png" alt="Facebook" width="23" height="21" /></a>
</div>
</div>
<!-- END .main-content -->
</div>
<!-- END .main-content-wrapper -->
</div>
<!-- END .main-body-wrapper -->
</div>
<!-- END body -->
</body>
Follow the main css
body { margin: 0; padding: 0; font: 12px/19px Arial, serif; color: #483924; background: url(../assets/main-body-bg.png) 0 0 repeat fixed; }
h1, h2, h3, h4, h5, h6, span, p, form, input, ul, li, ol { margin: 0; padding: 0; }
h2 { font-size: 30px; line-height: 34px; }
h3 { font-size: 26px; line-height: 30px; }
h4 { font-size: 20px; line-height: 26px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
table, tr, td { margin: 0; padding: 0; border-collapse: collapse; }
img { border: none; }
a { color: #f17400; text-decoration: none; border: none; }
a:hover { color: #f17400; text-decoration: none; }
a:focus { outline: 0; }
input[type=text]:focus, input[type=submit]:focus, input[type=password]:focus, textarea:focus, select:focus { outline: 0 none; }
code { margin: 0 40px 25px 40px; padding: 20px 23px; color: #cfcfcf; border: 1px dashed #424242; background: #444444 url(../assets/code-bg.png) 0 0 repeat; text-shadow: #000 0 1px 0; line-height: 20px; display: block; }
.caps:first-letter { margin: 7px 6px 0 0; font-size: 40px; line-height: 26px; font-weight: bold; float: left; }
.clear { height: 0; line-height: 0; clear: both; }
.custom-font-1 { font-family: McLaren; }
/* #1 Layout structure */
.main-body-wrapper { background: url(../assets/main-body-wrapper-bg.jpg) top center repeat-x fixed; }
.main-content-wrapper { width: 962px; margin: 0 auto; background: url(../assets/main-menu-bg.png) 0 0 no-repeat; padding: 43px 0 0 0; }
.main-content-wrapper .main-content { background: url(../assets/main-content-bg.png) 0 0 repeat; z-index: 20; position: relative; padding: 0 31px 30px 31px; }
.left-content-sidebar-wrapper { padding: 30px 0 0 0; margin: -35px 0 0 0; background: url(../assets/left-content-sidebar-wrapper-bg.png) top right repeat-y; z-index: 20; position: relative; }
.left-content { width: 528px; float: left; margin: 0 0 0 30px; }
.full-width-wrapper { padding: 0 31px 0 31px; z-index: 20; position: relative; }
.sidebar { width: 250px; float: right; margin: 0 30px 0 0; }
.sidebar .main-title-1 span { background: url(../assets/sidebar-bg.png) 0 0 repeat; }
.more-link { width: 82px; height: 22px; padding: 1px 0 0 10px; font-size: 9px; line-height: 19px; text-transform: uppercase; font-weight: bold; color: #fff; float: left; background: url(../assets/more-link-bg.png) 0 0 no-repeat; text-shadow: #000 0 1px 0; }
.more-link:hover { color: #ffba00; }
.main-title-1 { margin: 0 0 25px 0; background: url(../assets/border-2.png) center left repeat-x; overflow: hidden; color: #b3ab9f; text-align: center; }
.main-title-1 span { font-size: 18px; font-weight: bold; text-transform: uppercase; text-shadow: #fff 0 1px 0; background: url(../assets/main-content-item-bg.png) 0 0 repeat; padding: 0 10px; }Well the problems would be these, if anyone can help, I'm grateful.