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 .
Related
I found a nice template online and want to use it for my rails app homepage. I decided to use the high voltage gem and read through its readme. I managed to get the routing right but I could not find the appropriate path/folder for the numerous asset (css, js, svgs and sass) files which come inside the template zip file, and which obviously make it look nice.
I tried putting them into the assets folder of my rails app, which got some of the "features" working, but svgs and images didn't display... and it screwed my existing pages. Reading through the Rails documentation I then tried storing the template assets into the vendor folder, which did not work either.
Where should I store the assets for my template-inspired homepage for them not to screw the appearance of my normal/app pages? Which paths should I use in my html to call them?
If you have troubles with images, take a look at image references in the template source. You can see a reference to image like this :
background-image: url('images/top-1280.svg')
which would not serve this image in Rails.
I would suggest to find and replace all the image references in your css (or scss) files.
Try this :
background-image: url(image-path('top-1280.svg'));
which is the proper way for Rails 4.
The differences:
in Rials you have a helper method "image-path" and you do not prefix the image file with directory name.
It is important to check in your "app/assets/stylesheets/appilcation.css" if there are lines like:
*= require_tree .
*= require_self
Now about Font Awesome : I see that in this theme you are about to use Font Awesome. I would suggest using the gem for Rails:
In your Gemfile:
gem 'font-awesome-sass'
I think the theme you have chosen is very nice. Thank you for sharing it, it will be useful for my current project.
I just purchased a theme at wrapbootstrap and fired up a new Rails app to experiment with it. The theme came with no documentation and I am new to Rails, so I could use some help. None of the other examples here are very detailed and there do not seem to be blog posts about this online. Thanks.
This is the theme, if that helps- Presume that I am running Rails 3, have ran 'rails new experiment' and have installed no gems at this point, not even bootstrap at this point. Would love to have definitive instructions for others, from the beginning, here on stackoverflow.
I suggest you do the following:
1. Copy theme assets to /vendor
Copy all CSS files to vendor/assets/stylesheets
Copy all JavaScript files to vendor/assets/javascripts
Copy all images to vendor/assets/images
2. Create entries in asset manifests
Create an entry in app/assets/stylesheets/application.css for each CSS file you wish to include in your application. All the files listed in there should be automatically included into all pages that use the default layout app/views/layouts/application.html.erb.
Same thing for JavaScripts under app/assets/javascripts/applications.js.
3. Separate theme customizations from original theme files
Feel free to customize your theme, but put your own files under app/assets/stylesheets, app/assets/javascripts and app/assets/images. That way they won't get mixed up with the theme you purchased and you can easily delete your changes without fear of mangling your theme.
4. Change image paths
Now you're going to have to manually edit all your stylesheets and JavaScript files looking for the image references. Change all paths to /assets. Like so:
background-image: url(http://www.example.com/images/bck.png)
Becomes:
background-image: url('/assets/bck.png')
I've got a Ruby on Rails app running with Bootstrap, which I installed using the gem twitter-bootstrap-rails.
I'd now like to integrate a new Bootswatch theme, but I'm having trouble figuring out what to do.
There are four possible downloads for each theme - a bootstrap.css file, a bootstrap.min.css file, a variables.less file, and a bootswatch.less. My question is: do I need to download and add them ALL to my ~/app/assets/stylesheets folder? or do I just need a subset of those? Currently inside ~/app/assets/stylesheets are just two files: application.css and boostrap_and_overrides.css.less. LESS really throws me off here so I'm totally confused with how it works and what I need to do to add new css files with this setup. Any help is appreciated.
You only need to download the bootstrap.css file, and rename it. The bootstrap.min.css is the same as the css file just a minified version of it. Less is just another way of writing css and accessing each property differently. Check out less. Add css file and begin integrating into html, also point html to new stylesheet.
Here's a twitter bootstrap gem for easy Bootswatch theme integration/customization for rails:
https://github.com/scottvrosenthal/twitter-bootswatch-rails
I'm trying to find the twitter-bootstrap files in my rails app ('bootstrap-sass', '2.0.0'), as I need to make a change directly to the bootstrap-responsive.css file, however, I can't find it.
I have bootstrap up and running, but can't seem to find the bootstrap files. How do I locate the bootstrap-responsive.css file?
Thank you!
The bootstap-sass gem uses the Rails 3.2 asset pipeline to inject the necessary stylesheets into your app. The actual stylesheet files are located in the gem installation directory, not in your project itself.
Depending on what you want to change, you can either:
Copy the _bootstrap-responsive.scss file from the gem into your app/assets directory and edit it there.
Customize the necessary Bootstrap variables before loading up Bootstrap in your application.scss file:
$btnPrimaryBackground: #f00;
#import "bootstrap";
Edit: Try looking under
app/assets/stylesheets
Here's an example
https://github.com/joliss/solitr/tree/master/app/assets/stylesheets
I'm not too familiar with the structure of rails apps but did you create a local copy or are you using the bootstrap files being hosted directly by github? You should be able to figure that out by checking one of your launched html pages and viewing the source, looking for something like
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
If it's a local page, there should be a directory somewhere in your rails app where the files are stored - perhaps there's a 'static' folder or something similar? Try file-searching for it, good chance you might find it.
(I use Django/Python for web projects but I'll look into Rails a bit and see if I find anything)
I am using Rails 3.2.1. How do I add external style sheets in my rails application?
I've tried the following answers to no avail:
How do I link to an external stylesheet in Ruby on Rails? - but the link given in the answer is not working.
How do I use CSS with a ruby on rails application? - which says to add stylesheet in public/stylesheets, but I do not have folder named public/stylesheets. I do have a public folder, but I have stylesheets folder under /vendor/assets.
css #import external style sheet - but it's unclear.
I'm just going to assume you're already using something like this in your layout:
stylesheet_link_tag 'application'
If you want to refer to an external stylesheet then all you need to do is pass in the url.
stylesheet_link_tag 'application', 'http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css'
If you want to include the actual files in your codebase:
app/assets/stylesheets is where you should place your main css files.
vendor/assets/stylesheets is where you should place the css files for any plugins that you might have.
It's the same for js files. For example your application.js would go in app/assets/javascripts and a jquery plugin like timeago.js would go in vendor/assets/javascripts.
After looking for a solution to this problem for a while, I found this step by step tutorial which explain how to implement a bootstrap theme to a rails app => http://www.notch8.com/implementing-a-bootstrap-theme/
You can apply this to other CSS and JS templates than a Bootstrap one.
Hope this help (sorry if I make english mistakes)