I have a rails application, and I include the reset.css file in the application.html.erb
the reset.css file comes from http://meyerweb.com/eric/tools/css/reset/ I just copy all code.
And I have specified the font property in my application.css file.
When render out the page, seems the font didn't inherit the property from application.css, but still from reset.css
Why could this happen? I've checked the page info, reset.css was loaded before application.css
It's hard to say without seeing the actual CSS - selectors aren't necessarily applied via "last one in". Install Firebug and inspect the elements that don't appear how you think they should. Firebug will show you exactly how the selectors were applied.
Daniel,
I had the same symptom where my custom.css was in the document source AFTER my reset.css. When I looked closely, I discovered that I had a "block" div in both. Renaming my custom css block to "custom_block" solved the problem.
Also be careful that you don't use any keywords as div names. When in doubt, rename the div to something unique and see if that helps.
I've had similar mystery from form elements that have names which are also HTML form elements. Look for those, too, they can make a browser act strangely. i.e., radio buttons with name="radio"
Related
I'm using CKEditor via the 'rich' gem for Ruby on Rails.
It has historically worked fine, but at some point my editor icons started looking like this:
I'm not sure what caused was, whether I upgraded something or what.
(I do know that it's not a browser-cache issue.)
How I can fix these icons?
The code:
This is the HTML for the Bold button's span element (whitespace added for readability):
<span class="cke_button_icon cke_button__bold_icon"
style="background-image:url(http://localhost:5000/assets/ckeditor/plugins/icons.png?t=E4KA);
background-position:0 -24px;
background-size:auto;">
</span>
And the styles as interpreted by Chromium:
In that last line, url(icons.png) actually resolves to http://localhost:5000/assets/ckeditor/skins/moono/icons.png
What I can see but don't know how to resolve:
There are two different icons.png files at play here:
<gem_path>/vendor/assets/images/ckeditor/plugins/icons.png
(works correctly with background-position offset -24px)
<gem_path>/vendor/assets/images/ckeditor/skins/moono/icons.png
(is calibrated for a different offset value)
In the code snippets, you can see that the CSS specifies offset -24px, thus the first image is the correct one. The inline-element style specifies the first image, but is overridden by an !important-ified url(icons.png) which loads the second image (which is wrong).
Why the heck is it doing that?
Can I somehow fix this without forking the gem? (I can fork the gem, but I'd rather not maintain a separate fork if possible.)
Add below CSS in the application.html.erb file
.cke_ltr .cke_button_icon {
background-image: url('/assets/ckeditor/plugins/icons.png?t=H5SC') !important;
}
I can't figure it out. It's probably trivial but I am extremely new to rails.
Thanks in advance if you can help!
Answer:
I went to the generated file that adds the header to my pages and changed the included css file to my own custom one.
In Rails 3.1 it would work a litte bit different since only the application style is included by default.
Since there is a list of all further included ones like mentioned here: Rails 3.1 Load css in particular order, you just have to change the order of this list or add the file at a specific position.
There's a question about not using scaffold.css, might be what you're looking for?
Rails scaffold without the css file?
It's not the most beautiful css, but in css you can add '!important' after an statement to override all 'normal' css statements. So you would use something along the lines of:
border:0px !important;
in your css.
Have the CSS file with the correct styling you want applied to load last.
Or as others have suggested you could add !important to the css in question if you cant change the load order of the css files.
body {
color:#FFFFFF!important;
}
May seem related to Switching from Blueprint to Twitter Bootstrap but that didn't fix my issue.
I have cleaned up all blueprint references, cleared cache & temp, gems (bootstrap-sass and jquery) are installed, and restarted the server.
All my link_to statements render with the reference next to my text. Also my bulleted menu content stands vertical as opposed to being horizontal.
This is the code from my pre-compiled layouts.css.scss that should make my header menu lie flat and more to the right.
Help.
/* line 179, ../../../../../../../../Library/Ruby/Gems/1.8/gems/bootstrap-sass-
2.0.1/vendor/assets/stylesheets/bootstrap/_navbar.scss */
.navbar .nav.pull-right { float: right;}
K. Turns out that even after you delete blueprint files from app/assets/stylesheets, there still a few not-so-obvious that also need to be removed.
Under the same directory (app/asset/stylesheets) you will find two folders named: "plugins" and "src" (i.e. if you previously had blueprint installed). REMOVE THEM and bootstrap assets will kick in.
In a Rails 3.1.0 project, I have Companies with a few customizable attributes like background_color and link_color. I want to be able to set some Sass variables like so:
$background_color: <%= #company.background_color %>
$link_color: <%= #company.link_color
...
This doesn't work because #company is nil when Sass does its thing. I'm not sure how to go about solving this in a way that's dynamic (companies can be created and colors can be changed and the views update immediately). Any suggestions?
I can think of a couple approaches off the top of my head:
Serve your stylesheet through a controller.
Use CSS classes to configure the colors and serve just that CSS through a controller, inlined partial, or a CSS #import.
Serving your stylesheet through a controller is pretty straightforward so there's not much to say. This might be a bit ugly and cumbersome.
For the second one, you'd add a couple extra CSS classes:
.custom-bg {
background-color: some-default-bg;
}
.link-fg {
color: some-default-fg;
}
/*...*/
Then any element that need to use the custom background color would need their usual CSS classes and custom-bg; similar shenanigans would be needed for the other configurable values. To supply the customized CSS, you could inline a <style> element into your HTML using a standard ERB partial or you could serve the CSS through a controller (either through <style src="..."> or #import). So you'd fake the SASSy goodness with old school multiple CSS classes in your HTML.
There's also JavaScript. You'd need some way to identify the elements that need their colors adjusted and then adjust them directly with things like this:
$('.need-custom-background').css('background-color', '...');
I think you might be able to do something just like what you have there, but you need to change the extensions of the files to '.css.scss.erb'
To follow up on this, I did create a stylesheet controller but it was rather contrived to get Sass parsing and asset pipeline load paths all working correctly. I ended up dumping that and reorganizing the styles so I could generate a static stylesheet for each company which gets regenerated and uploaded to S3 on company update.
Well, if you mean a dynamic object like a model loaded via a controller, you can't really, at least not very easily. This is because unlike HTML ERB templates, the SASS ones are generally rendered once and served statically unless something changes in the code or they are re-precompiled via rake (depending on your environment configs). But you can access some helper methods, global objects, and use some ruby in there by renaming the file with an "erb" extension e.g. application.css.scss.erb. See
https://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
How can I use Ruby/Rails variables inside Sass?)
If you need styles based on dynamically loaded objects, like models, you can...
Write CSS styles literally in the template
Compile the stylesheets dynamically. See the top-rated answer here: How do I create dynamic CSS in Rails?
For some use cases you might accomplish the same thing by leveraging Rails/SASS's import path hierarchy (i.e. SASS #import 'partial_name_with_no_path' will search the importing SASS files folder first and then fall back to the top level - You can configure this as well).
I have a number of documents (in an MVC app) that exist solely to be called by:
<% Html.RenderPartial("showLoginStatus"); %>
While editing the file in VS (08) the CSS class selectors used within this page all toss 'class not defined' warnings since the stylesheet isn't referenced in this file but in the 'parent'.
The page renders correctly when called - how do I clue VS into the fact that a definition exists?
thx
Looks like VS does not understand site relative paths, as described in this article.
So, to answer your question, either change the CSS URLs to be fully qualified, or live with the error...