I've downloaded a theme through wrapbootstrap but cannot figure out how to implement it. I assumed it was going to be just copying over the CSS and JS files but there seems to be much more to it.
The theme I have downloaded is https://wrapbootstrap.com/theme/awesome-admin-WB0663265
I have temporarily uploaded it onto Github here github.com/raycchan/temp (i'll remove this ASAP once I resolve it)
There are example templates here that have the generated .html file as well as the .html.erb files, and once I plug the erb files into my rails app it throws out errors like the ones below:
But it doesn't recognize these:
<%= data.page.title || "Bootstrap Admin" %> # data undefined
<%=partial 'dashboard-navigation'%> # partial undefined
Could someone instruct me step by step how to implement this bootstrap theme?
Thank you
It is really interesting to give a Rails soul to the nice template . A few simple steps:
copy .css to app/assets/stylesheets and .js to app/assets/javasripts
include the new files in the manifest files application.css and application.js
for font-awesome use this description
Then share the result with us .
I followed the advice I found here on stackOverflow, and added the following to the section of my layouts/application.html.erb:
<%= favicon_link_tag '/favicon.ico' %>
favicon.ico is in my public folder I also tried to place it in the assets/images folder
I restarted the rails server (local development environment on the MAC, Rails 3.2.xxx), but I'm not seeing the favicon. Any ideas?
Three things to check:
Does the favicon_link_tag properly render in the HTML source of your document?
Does the favicon.ico URL that it renders point to a valid file, is the path wrong or do you maybe have a permissions issue with that?
Did you refresh your browser's cache? In most browsers, do so by holding Ctrl or Shift while reloading the website. See also: Wikipedia: Bypass your cache
My site has problems with finding javascripts and some of the images. It cannot display the images that is located within folders in the assets/images/ and none of the js and jquery.
The css works fine. But the weird thing is that when I moved the images down one folder to the assets folder, they still didn't work. Been trying to find something in assets pipeline guide:
http://guides.rubyonrails.org/asset_pipeline.html
But without a result. Could it be related to some precompiling? I tried some precompliling, but no changes.
I'm open for all suggestions! Thank you.
Edit: After som more research I found that it has generated most of the files in a folder in public/assets, and it grabs all files from there. I don't know why it generates them to that folder nor how to direct it to grab them from app/assets/javascripts.
See http://guides.rubyonrails.org/asset_pipeline.html#upgrading-from-old-versions-of-rails to find out how to change the asset path.
I have put all my images for my admin theme in the assets folder within a folder called admin. Then I link to it like normal ie.
# Ruby
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');
FYI. Just for testing I am not using the asset_path tag just yet as I have not compiled my assets.
Ok all good so far until I decided to update an image. I replaced some colors but on reload the new styled image is not showing. If I view the image directly in the browser its still showing the old image. Going one step further I destroyed the admin images folder. But it has broken nothing all the images are still being displayed. And yes I have cleared my cache and have tried on multiple browsers.
Is there some sort of image caching going on? This is just local development using pow to serve the pages.
Even destroying the whole images folder the images are still being served.
Am I missing something?
In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.png will actually be accessible in a get request at this url - /assets/example.png
Because the assets/images folder gets generated along with a new 3.1 app, this is the convention that they probably want you to follow. I think that's where image_tag will look for it, but I haven't tested that yet.
Also, during the RailsConf keynote, I remember D2h saying the the public folder should not have much in it anymore, mostly just error pages and a favicon.
You'll want to change the extension of your css file from .css.scss to .css.scss.erb and do:
background-image:url(<%=asset_path "admin/logo.png"%>);
You may need to do a "hard refresh" to see changes. CMD+SHIFT+R on OSX browsers.
In production, make sure
rm -rf public/assets
bundle exec rake assets:precompile RAILS_ENV=production
happens upon deployment.
For what it's worth, when I did this I found that no folder should be include in the path in the css file. For instance if I have app/assets/images/example.png, and I put this in my css file...
div.example { background: url('example.png'); }
... then somehow it magically works. I figured this out by running the rake assets:precompile task, which just sucks everything out of all your load paths and dumps it in a junk drawer folder: public/assets. That's ironic, IMO...
In any case this means you don't need to put any folder paths, everything in your assets folders will all end up living in one huge directory. How this system resolves file name conflicts is unclear, you may need to be careful about that.
Kind of frustrating there aren't better docs out there for this big of a change.
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your stylesheets.
when referencing images in CSS or in an IMG tag, use image-name.jpg
while the image is really located under ./assets/images/image-name.jpg
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
This railscast (Rails Tutorial video on asset pipeline) helps a lot to explain the paths in assets pipeline as well. I found it pretty useful, and actually watched it a few times.
The solution I chose is #Lee McAlilly's above, but this railscast helped me to understand why it works. Hope it helps!
The asset pipeline in rails offers a method for this exact thing.
You simply add image_path('image filename') to your css or scss file and rails takes care of everything. For example:
.logo{ background:url(image_path('admin/logo.png'));
(note that it works just like in a .erb view, and you don't use "/assets" or "/assets/images" in the path)
Rails also offers other helper methods, and there's another answer here: How do I use reference images in Sass when using Rails 3.1?
I am new to the Ruby on Rails.
I want to add ".jpg" file under the /Public/Images folder.
When I navigate to the add New page, I don't see the Picture Format in the menu.
If you are working with rails3.1 or next of that, there is an app/assets/images folder in your application directory. And there is a default image rails.png available.
Add any images over there and use them as follows:
<%= image_tag "/assets/rails.png"%>