0
I got template ready (just for practice) but I’m trying a lot of difficulties to refactor it:
- CSS/JS are not compiling (I tried to go to css and js files and switch to the image folder path to Assets/ failed)
- images not wheel even css and js case
the errors displayed by the terminal are: Actioncontroller::Routingerror (No route Matches [GET] "/pages/Assets/photos/photo-25.jpg"): of almost all the images and the css and js tbm. I had already refactored some other templates and I haven’t had as much trouble as I am with this one. If anyone can help me with some changes in the so-called code, I’d 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>
Follows 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 those, if any can help I’m grateful.
Using Ruby on Rails right? Why aren’t you using helpers
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>to include your css and js? And theimage_tagfor their images?– Daniel
This question has a lot of code... you can edit the question by removing excess code (you can add a)?
– Sergio
Sorry I’ll have to do that. In fact Daniel are missing the stylesheets, but still the css and js don’t load. When the images with the presence of the image_tag some loaded, In my Assets/images folder I have another folder called photos is as if it did not find the said folder but I know that I am pointing to the folder, I will reduce the code and be more direct.
– Moisés Lima