I'm using rails 3.1 with Zune Foundation templates and haml. I have tried to fiend ways to change the default scaffold view templates to use css I want so I get a consistent look with all scaffold without manually changing the view. I also use simple_form.
As I don't want to program my own generators, is there some easy and/or recommended ways to handle this?
Johann
You can override default view templates by creating your own templates in 'lib/templates/erb/scaffold' folder of your rails app.
lib/templates/erb/scaffold/_form.html.erb
lib/templates/erb/scaffold/edit.html.erb
lib/templates/erb/scaffold/index.html.erb
lib/templates/erb/scaffold/new.html.erb
lib/templates/erb/scaffold/show.html.erb
The default templates can be found here - https://github.com/rails/rails/tree/master/railties/lib/rails/generators/erb/scaffold/templates
Related
I recently started to create custom theme for ExtJS 5 by Sencha.
Following http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html I managed to create ThemeDemoApp, inherit ext-theme-neptune, change $base-color to green and refresh/rebuild ThemeDemoApp with my-custom-theme. All ok.
My problem is, ThemeDemoApp is quite poor for testing a custom theme. A panel, tab, button and a modal window. That's it?
After bit of googling I bumped into http://dev.sencha.com/ext/5.0.0/examples/themes/index.html. (Why isn't this mentioned in the guide?!) Heading says: View and test every Ext component against bundled Ext Themes, or your own custom themes.
My question is: How? How do I test my own custom theme against this example? Do I have to dig into the source (themes.js) and build such page/application myself?
The examples - including the Theme tester - is included in the ExtJS download.
You can modify the list of themes available by editing the shared/options-toolbar.js file.
To get it to find your theme, you'll either need to name it similar to the others (ext-theme-name), or modify themes.js accordingly.
Or you could just hack the theme.js file to hardcode your theme.
(Ext JS 4 used to create an example page for themes automatically - it doesn't seem to do that now, though)
According to advice at How do I include a JavaScript file in another JavaScript file? I decided to load both options-toolbar.js and themes.js (with just minor modification - commenting out Ext.onReady(...) function in themes.js) and I used functions getBasicPanel(), getCollapsedPanel(), etc. in my own application to create the same testing page (absolute-layout container that fits the page).
Anyhow, I guess Robert's answer is the correct one - there is no prearranged, ready-to-use functionality from Sencha :-(
In MVC4 you can render CSS stles by using
Styles.Render(path here)
Similarly scripts can be rendered by
Scripts.Render(path here)
But how do render XSL/XSLT stylesheets? Will Styles.Render do the trick?
The reason you do #Styles.Render or #Scripts.Render is because it references a bundle created somewhere in Global.asax, usually in the BundleConfig (look in your App_Start folder). They are created using the code
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css"...
so then you can use them in your views as #Styles.Render("~/Content/themes/base/css"). The framework actually creates a virtual file with the path "~/Content/themes/base/css" to enable this bundling technology.
I dont think the stylebundle can be used with xsl/xslt stylesheets, although I dont know for sure. Here are some relevant question to boot.
How to apply an XSLT Stylesheet in C#
or any of these really
https://stackoverflow.com/questions/tagged/xslt+asp.net-mvc
I've got an app that's using JQueryMobile and it's using the awesome ActiveAdmin extensively as well. While I love the ease and simplicity of the ActiveAdmin interface, I'd really like consistency with the rest of my app.
Is it possible (i.e. using standard ActiveAdmin and not modifying its sources) to re-skin ActiveAdmin to use the JQuery-Mobile look and feel?
Its very possible to reskin ActiveAdmin, though it would be a bit of a job to do, and there would likely be quite a number of things that can't perfectly be built to match a mobile presentation, especially if you don't want to get into overriding markup rendering.
You can always simply start adding styles of your own to the active_admin.css file that is generated for you. If you'd like to start without any of ActiveAdmin's styles at all, you can comment out the two sass imports in that css file:
#import "active_admin/mixins";
#import "active_admin/base";
Or at least just the base file. It may be intriguing to you in itself, or informative about the organization of the markup, to view your current admin pages without the base css, or with css turned off in your browser altogether. From that vantage point, you could begin to think through how the bare markup could be restyled to match a mobile presentation.
I'm using the twitter-bootstrap-rails gem for styles in my app.
At the moment, I'm writing all my style ruls inside bootstrap_and_overrides.css.less, and this turns messy and redundant as the application grows.
I'd like to split the less code to smaller files that will be required on a per page basis, but still be able to use the bootstrap colors and mixins. I found that after I split it into another file, I couldn't use these components anymore. I guess I'm probably not including it correctly or in the proper order - thoughts? thanks.
look at https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less
you should be able to use #import "override-forms.less" in your bootstrap_and_overrides.css.less for example.
In my Rails 3 application I'm using Twitter Bootstrap as a frame work for developing an in house project management system. I'm using Formtastic to help me with forms since it save a lot of time and code. My problem is getting the Formtastic code to output the forms in a way that correspond with Bootstrap's conventions. I've read a few items I found on Google suggesting that I should monkey patch Formtastic, but I haven't been able to do this successfully.
How can I customize Formtastic's output to use div's around each field so I can use Bootstrap with it?
Thank you for looking.
Well, today I tried forking formtastic and making it compatible with bootstrap... The markup is incredibly tightly coupled to the code, so I gave up and switched to simple_form instead. Works fine with the advice in Rails: Using simple_form and integrating Twitter Bootstrap
You can use the formtastic-bootstrap gem. You should be able to drop this in and it will generate HTML that will work naturally with Twitter Bootstrap.
If you use the SCSS files from the one of the scss-twitter-bootstrap projects, you can simply comment out or remove the include for the forms part of the CSS.
Simply copy them in to app/stylesheets (Rails 3.0) or app/assets/stylesheets and comment out:
// #import "forms.scss";
Don't forget to add the formtastic CSS back in:
<%= stylesheet_link_tag 'formtastic', 'formtastic_changes' %>