I am using twitter bootstrap installed by copying bootstrap.min.css, etc. into the vendor/assets folder.
When using rails forms validations, error messages appear using default styling, not the bootstrap styling I would expect (e.g. the h2 tag is much smaller and in a different text, the unordered list uses different bullets, etc.) How do I get bootstrap to override the default styling that rails uses when generating error messages for forms? I'm guessing this has something to do with the asset pipeline, but didn't see anything about overriding rails-generated content in the rails guide.
Thanks!
Sounds like you used some scaffolding which generated a CSS sheet. Go into app/assets/stylesheets and delete the stylesheet named "scaffolds.scss" (or just delete the parts you don't want).
To track down where that styling is coming from, you should use your browsers development tools. Inspect the element and it should tell you where the styling is coming from.
Related
Maybe it's because i'm approaching the thymeleaf views in a wrong way but i couldn't find the best way to do it yet.
I have my roo generated project with their thymeleaf views, i needed to delete some fields from the form, lock some other and many more little changes like css and js.
My problem is that everytime i open the roo console, it overwrite all my editions and leaves the views as they come by default. There is some way to exclude my edited views from regenerating? or is there some better way to edit the views?
Thanks.
To prevent that Spring Roo removes your changes including the default items you sould include the data-z="user-managed" attribute in that items you want to maintain.
Remember that the data-z="user-managed" attribute is only available in that elements that have id attribute.
Of course, if you are going to change a big number of fields or you're going to change the HTML structure of an specific form, you should include the data-z="user-managed" in the <body> element.
After that, if you open the Spring Roo shell, any change will be applied.
Hope it helps,
I need to take a database text field and parse it for
duplication and garbage
malice
whitelisted selectors
compress and output as a css file
Since there might be a rails way I'm unaware or something ready made I'm asking before I waste time trying to reinvent a wheel. My searching revealed nothing, mostly in rails seems aimed at view level, and css seems to be an unattended niche in this area (plenty of html though).
I'm aware of the sanitize gem (doesn't do css immediately, yet another thing I'd need to map out and code) and the built in rails stuff (not a lot of tutorial, aimed mostly at the view level). I need a gem, lib, module or something similar that I can work with in a controller or queue.
EDIT:
Without getting too deep into the specifics of the project: administrative users can add css for their portions of the site. As part of the flow I'm going to save the raw css and then process and save the processed css. The db stuff is archival mostly, the css file is output immediately. Because there is few places to add modified css and only admins have access to the css, it sort of works but I'm looking to make it more robust in the future where admins who may not be as conversant with the security needs or not as css aware can operate.
The most basic example is that it just a text field on an admin page. The admin cuts and pastes css there, submits, and the application turns it into a css file that gets included with the designated pages, which works because the current admins know the application, the css of the application, and what they can and cannot change. The goal is to make this more robust for future admins who might not be as savvy.
To simply sanitize CSS, you can use the SanitizeHelper built into Rails: http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize_css
Have you looked at Sass? It has all of the parsing logic built in, for a superset of CSS. You could add a feature (Sass support) and save yourself the need to parse/validate the CSS all in one go.
You can generate output CSS from Sass (or just plain CSS, since Sass [with the SCSS syntax] is a fully-backward-compatible superset of CSS) like this:
output_css = Sass::Engine.new(sass_content, :syntax => :scss).render
There are a bunch of options that you'll probably want to look into at http://sass-lang.com/
Another option is Less. The new Twitter Bootstrap framework uses Less, and Rails 3.1 uses Sass. The biggest difference is that the official Less parser/compiler is built in JavaScript, so you could actually validate and compile in the user's browser while they work and show them any errors before they save. Of course then you need to run a JavaScript engine (e.g. V8) in your Rails application if you want to use Less to validate the incoming CSS still.
I'm just learning the new asset pipeline in Rails 3.1. One particular problem I'm having is with the way Sprockets just mashes all the found CSS stylesheets into one massive stylesheet. I understand why this is advantageous over manually merging stylesheets and minifying for production. But I want to be able to selectively cascade stylesheets instead of having all rules all mashed together. For instance, I want:
master.css
to be loaded by all pages in the Rails app, but I want
admin.css only to be loaded by pages/views within the admin section/namespace.
How can I take advantage of the great way that Rails 3.1 combines stylesheets and minifies them for production, but also have the former flexibility of being able to load only certain stylesheet combinations per layout?
Or should this be done by adding a class to body tags in layouts-
body class="admin"
And then target style rules as appropriate. Using SASS scoped selectors this might be a reasonable solution.
This is how i solved the styling issue: (excuse the Haml)
%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
= yield
This way i start all the page specific .css.sass files with:
#post
/* Controller specific code here */
&#index
/* View specific code here */
&#new
&#edit
&#show
This way you can easily avoid any clashes.
Hope this helped some.
I have a post about this on my website:
Leveraging Rails 3.1, SCSS, and the assets pipeline to differentiate your stylesheets
And check out this answer to another question: Using Rails 3.1 assets pipeline to conditionally use certain css
Hope this helps.
Best regards,
Lasse
#nathanvda: sure...
We make use of multiple layout files. So in our app/views/layouts, instead of having just application.html.haml (we use HAML), we actually ignore the application layout and use 3 custom layouts:
admin.html.haml (admin section views only)
registered.html.haml (registered/signed in users views only)
unregistered.html.haml (unregistered/unsigned in users views only)
So at the top of my admin.html.haml file I will have my stylesheet link tags to a separate admin.scss (we use SCSS) manifest. That manifest will load any necessary sub-stylesheets just for the admin section. This allows us to specify rules just for the admin section while also making use of common styles. For instance, we use jquery-ui throughout the site, so the styles associated with jquery-ui sit in their own stylesheet and we include them in the manifests for all 3 css manifest files.
This solution doesn't give you a single CSS file that can be cached, but it ends up giving you 3 CSS files, each of which can be cached. This allows a tradeoff between performance and some flexibility in organizing CSS rules so we don't have to worry about CSS rule collisions.
The way I've been doing it so far is to have two seperate folders a/ and u/ where a/ is for the admin view and u/ is for the user view. Then in the layout I point to the appropriate application.css with assets/u/application.css(js). Bit of a pain having to move the auto generated files each time but a lot less than having to require each file individually in the manifest.
I use something like
application.html.erb
">
show.html.erb
content_for :body_id do
page_specific_body_id
end
I am creating a custom CSS stylesheet for a Rails 3 application.
Is there a list anywhere of the CSS styles that Rails relies upon? So far I have found:
#notice
#error_explanation
.field_with_errors
Many thanks.
The css for the flash-messages you can choose yourself, as they are normally defined in application.html.erb (there is no default definition for flash-messages in rails 3).
For form-styling i would recommend using a gem like formtastic, which not only greatly simplifies making forms, but also provides a standard css file. So all needed tags are then known (and can be overwritten if needed).
If on the other hand you are looking at ways to get your complete layout started quickly, you might want to checkout web-app-theme or activo (which is even more complete).
A fresh Rails 3 app will not require any specific CSS class/id styles beyond the three you just mentioned, which is why no default stylesheet is generated until you start scaffolding.
If you run script/rails generate scaffold MyModel it will create a stylesheet called scaffold.css which the generated views will rely upon.
i am creating a cms / portal that i want each user to change certain css properise ie colors, widths, backgrounds etc to customise there own version of my site.
What is the best way to do this ? i have looked into sass but not sure if this is possible from front end as the css would need to be recompiled each time etc ?
Any one done this or got any suggestions please help.
thanks
rick
You can use sass if you like, but it's possible to do this using plain CSS too. Use whichever you prefer. Sass doesn't need to be recompiled for each request, it can be either:
Pre-compiled at deploy time
Served from a controller and page-cached
If you want your users to edit only certain properties then you can use a standard MVC approach to serve your stylesheets with page caching:
Create a stylesheet model with the columns you want to have editable.
Provide your users a form to manage their stylesheet (there are some good jQuery plugins for color selectors, etc.)
Serve the stylesheets from a controller (e.g. routed to /users/1/stylesheet.css)
Cache the stylesheet output using caches_page so it gets served statically on future requests.
Let the user edit an .scss file.
Use codemirror for editing.
SASS/SCSS: http://sass-lang.com/
CodeMirror: http://codemirror.net/csstest.html