I've been trying to override rails_admin views inside a custom theme that I've built (which so far only overrides css).
Is it at all possible to override rails_admin default views (like the dashboard for example), inside my theme?
PS: Simply putting the views inside an app/views folder inside the theme doesn't work.
I've reached a possible solution, that, at first glance, seems to solve my issue completely.
After having a look at the rails plugin/engine mechanics, I noticed that, in order to include the plugins app folder and override other plugins (in this case rails_admin), I would need to require that folder on the gemspec file.
When using the rails_admin theme generator, this file is configured to only include the lib and vendor folders of the plugin.
In summary, i had to change the .gemspec file of my theme and include the app folder, like so:
s.files = Dir["{app,lib,vendor}/\*\*/\*", "MIT-LICENSE", "Rakefile", "README.rdoc"]
I hope this helps anyone in a similar situation in the future.
Related
I'm creating a spree e-commerce site and was wondering with the current updates to spree how to theme the default pages ( product, home page ) since I can't seem to find the files to do so.
You will need to create the views for the frontend. First understand the idea of how default views are shown.
The default views are located in spree-frontend gem. Check this out.
https://github.com/spree/spree/tree/master/frontend/app/views/spree
If you want to change the theme for only some parts, add the views for those parts only. If you want to change everthing, add all the views here.
For example, if you want to change the layout and the home page only, for layout you create
app/views/spree/layouts/spree_application.html.erb
and write your own layout.
for home page you add your html and template to the file
app/views/spree/home/index.html.erb
similarly you can change all the templates for the pages you want. That is how you change the theme.
Note:
you cannot find the files for the views because, the are located in the gem file.
Update I
To avoid having assets from gems, you can edit vendor/assets/javascripts/spree/frontend/all.js and vendor /assets/stylesheets/spree/frontend/all.css
for example to remove the default assets for spree_static_content you can remove the line
*= require spree/frontend/spree_static_content
Similarly you can also override the entire css and js, or partially
To replace an entire stylesheet as provided by Spree you simply need to create a file with the same name and save it to the corresponding path within your application’s or extension’s vendor/assets/stylesheets directory.
For example, to replace spree/frontend/all.css you would save the replacement to your_app/vendor/assets/stylesheets/spree/frontend/all.css.
This same method can also be used to override stylesheets provided by third-party extensions.
Its explained very well in details in:
spreecommerce' documentation
If you have any confusion with you, please comment and i can help you.
I want to alter the views of a mounted engine called Monologue
I've found this in the docs:
Monologue.layout = "layouts/monologue/application" # set the layout you want to use if you want to use your main_app layout
Which adds the main template, I'd rather change the engine views directly.
Where are those files located? I couldn't find them at the root of my app.
The previous answer is incorrect. Don't edit the gem files directly or your edits won't survive updates.
The correct way to modify the Monologue engine's files is to copy the gem's view files into the host application's /views.
For example, create application.html.erb inside host_app\app\views\layouts\monologue and edit that file. Your rails app will hit the custom view file and instead of the default ones in the gem. You can customize any Monologue view or partial in the same way, by simply duplicating Monologue's path in your application's views.
See all the files you can modify in this section of the Monologue github repo.
Edit: More information on customizing Monologue can be found here.
Gem files are located in .rvm or .rbenv folders which ever you are using.
rbenv:
$HOME_DIR/.rbenv/versions/#version_no/lib/ruby/gems
rvm:
$HOME_DIR/.rvm/gems/ruby-version
I have //= require jquery.ui.selectable in application.js. Works great, well sort of. I need to customize this method because the fieldset selector is conflicting in my app.
// This is a manifest file that'll be compiled into application.js,
which will include all the files listed below.
Where is the file actually stored so that I can modify it?
Assuming you didn't include that file yourself, you probably have something like gem 'jquery-ui-rails' in your Gemfile. To directly answer your question, the jquery UI assets (and indeed any assets belonging to a gem) will all be stored in their respective gem directories, which will be dictated by your $GEM_HOME environment variable.
For example, in my case, on my Mac using RVM, the location of my jquery UI directory is:
/Users/paul/.rvm/gems/ruby-2.0.0-p247#some_application/gems/jquery-ui-rails-4.0.4
with $GEM_HOME being /Users/paul/.rvm/gems/ruby-2.0.0-p247#some_application.
Having said that, I would strongly not recommend manually altering the selectors in the javascript files of a gem. The easiest and cleanest approach would be to alter your DOM structure, at least changing the class, id, or other selectable attributes, in such a way as to avoid the conflict you mentioned. If you update your post with more details regarding the conflicting selector, I'm sure we can help you in a much better way.
if jquery.ui.selectable is not included via gem, it will be located in the following places
app/assets/javascripts/jquery.ui.selectable.js
lib/assets/javascripts/jquery.ui.selectable.js
vendor/assets/javascripts/jquery.ui.selectable.js
vendor/assets/somepackage/jquery.ui.selectable.js
if it is in gem , you can just copy jquery.ui.selectable.js file from gem repo and customise it and put it in assets folder.
NOTE: i assumed js, it can also be coffee.js
I happened to use bootstrap:themed on one of my models that I generated without using scaffolding and it worked. However, I need to find the CSS Classes used for this, where in my project can i find them?
The usual place for all the .css files in Rails 3 is app/assets/stylesheets (file with a name bootstrap.css or similar). It depends what implementation of bootstrap you are using - source files or gem . In case of gem implementation you should look for the source code (classes in your case) in the GitHub repository .
The website https://wrapbootstrap.com/ has themes which were made using Twitter Bootstrap. Each of these themes include different versions of Twitter Bootstrap along with other various libraries and versions (jquery, fontawesome, etc...)
How do I add these themes to my existing Rails app? What are the steps?
I'm especially curious about the conflicts that may arrise if I'm already using a different version of jquery, twitter bootstrap, fontawesome, and others (as declared in the Gemfile).
Thank you
You can add the css from the theme you purchased from wrapbootstrap to your assets > application.css.scss file. And use the html tags that came with the theme in your rails app views so that the css styling is applied.
Also, I would recommend using gem 'sass-rails' to import the standard bootstrap styling.
Here's a tutorial to get you started with adding bootstrap to a rails app. Adding the theme css and html tags is up to you.
http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
I did this for few of the projects, I agree with majorly what Mike has answered above. Here are some of the gotchas I saw.
We started as a standard project on Rails all our views dynamic(Ember)/static were based on Bootstrap CSS. When major internal pages were up and functionality demonstrated we focused on landing pages. By this time we had the gems for bootstrap, fontawesome added to our Gemfile.
So one of the thing is to remove these gems "bootstrap", "fontawesome" from Gemfile. Include these as part of your wrapbootstrap dump.
Also as you progress with integration you may realize that a lot of common code is being repeated, its in your best interest to split the page components: headers, footers other things as partial Rails views. It severely saves the editing effort.
Another thing I found extremely useful to keep every thing up while you are still in integration stage, is to split your CSS/JS includes for pages imported from wrap bootstrap and pages you already have. So if you intend to migrate all existing pages into new theme scraping your CSS, then it can be merged in stages, otherwise you can let them co-exist.
You have to add new entries in routes.rb, controller calls to support the pages if you don't have them already. Likes of about, contactus, team etc. etc.
And if you use something like Ember/Backbone then you have to manage the co-existence of single pager app in some pages which may or may not be linked to the Wrapbootstrap pages.
This was all the things I had to take care off when I integrated the wrapbootstrap theme on top of Rails-EmberJS app.
Interesting timing as I just had to do this myself. I'm still fairly new to Rails so this might not be the best solution, but here's how I got it working ...
Note: every theme is different so this may not be a one size fits all approach.
1) My theme was built with Middleman and it was expecting to run stand alone or on a Sinatra instance.
2) In order to get the theme up on Rails, I had to add the compass gem, the sass gem, the sass-rails gem, and the compass-rails gem to work properly. I'm assuming you can install these (if required for your theme).
3) Assuming you have a Rails app ready to roll, go into your assets directory and backup your .js, .css, and all fonts and images. Place your theme asset files in the appropriate place.
4) Now do the same with your view layer. You may have a partials and/or pages folder which you can place in the views directory. You'll want to put application.erb.html and any navigation files in the layouts folder under the views directory. Again, make sure you back up your original files first.
5) If your theme was designed for Sinatra, you may have a Config.rb file. I moved the logic from this file into my config/environment.rb file. I was the least confident with this step. Other Rails devs can chime in if there is a better location.
6) Start your server up. You may encounter some exceptions but this is to be expected.
7) Take a look at your old app/assets/javascripts/application.js file and compare it to the new file. Ensure that the new file has the jquery ujs library included //= require jquery_ujs . Without this bit of magic your PUT and DELETE HTTP verbs won't work properly.
8) Path adjustments. My theme had the Font Awesome library included. In order to get it to work, I had to adjust the reference paths at the top of the font-awesome.scss file.
9) Finally, you'll need to debug the newly added code in the environment.rb file. The Sinatra developer was doing a lot of Route magic to adjust the navigation display. This wasn't porting over well to my environment. I removed many of these calls from my navigation template files. Once complete, my newly skinned app was up and running! Good luck.
make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
then run bundle command.
Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets
then open your application.css file in same folder there you will see
*= require_tree.
replace this line with
*= require "file_name.css"
NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.
save it and reboot your server. it will apply youe new theme.
Watch this training course which guide you to do so in detail and from scratch.
http://pluralsight.com/training/courses/TableOfContents?courseName=getting-started-aspdotnet-mvcservice-stack-bootstrap