I'm trying to figure out how to correctly define a stylesheet (say...bootstrap_and_overrides.css.scss) to override all other stylesheets in my Ruby on Rails app. The thing is I want to leave all {wrap}bootstrap theme files I'm using intact so I can upgrade when updates come out. So all changes I may need to make should be done on this "overriding" css file.
Maybe something in application.css.scss?
*= require_self
*= require_tree .
*/
I've tried declaring this specific stylesheet after require_tree but nothing. I'm sure there are some concepts I'm not fully grasping. Any help is greatly appreciated.
I am not sure about using Rails specifically, but the definitions in the last stylesheet (added to the page last) will trump preceding styles.
You need to ensure that the override stylesheet contains equivalent css selectors to ensure the styles will be overridden.
Related
Every now and then I dont even know where to start debugging anymore because i've tried so many things that i'm not sure what worked and what never even worked in the first place.
The problem: When i load a Froala text editor in my application, the editor loads fine, the content submitted through the editor even saves. But the toolbar icons (Font Awesome icons) all display as squares.
What I've tried:
The froala documentation says i should write all those "require"s in the application.css file so i tried changing my application.css.scss to application.css and it WORKS. But i have other sass files i need to import into my application file which is why i have it as application.css.scss
I installed Froala onto the project using the Froala Gem. The editor is initializing which means the require in require froala_editor.min.css is working. Shouldnt this mean my require font-awesome should be working and my icons in the toolbar should be displaying correctly?
I've also tried adding the Font Awesome cdn directly into the application layout but that didnt seem to change anything.
I've tried resetting the cache and using different browsers as well.
It's a very similar problem as this post but i think im doing everything i should be doing to load the font-awesome icons so i'm not sure where i'm going wrong!
Thank you for the help in advance and let me know if I can provide any additional information!
update: i am using froala v2 from this link, following these directions: https://www.froala.com/wysiwyg-editor/docs/framework-plugins/rails
application.css.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_self
*= require froala_editor.min.css
*= require froala_style.min.css
*= require font-awesome
*= require plugins/char_counter.min.css
*= require plugins/code_view.min.css
*= require plugins/colors.min.css
*= require plugins/emoticons.min.css
*= require plugins/file.min.css
*= require plugins/fullscreen.min.css
*= require plugins/image_manager.min.css
*= require plugins/image.min.css
*= require plugins/line_breaker.min.css
*= require plugins/quick_insert.min.css
*= require plugins/table.min.css
*= require plugins/video.min.css
*/
I traced the error back to css that i wrote to set the font-family of the <body> to a customized font-family. When i removed it, the squares started displaying as normal! I'm assuming this happens because the font-awesome icons dont know how to display the icons in any other font-family than the one it's created for?
If someone can give me a clear explanation that would be awesome but give this troubleshooting a try if you're experiencing any similar issues!
I'm having what I assume is a simple syntax problem in haml using ruby on rails and bootstrap.
Currently whenever I want to use a link_to inside a bootstrap element such as a button or a navbar li, the styling of the link_to overrides the one used by the element itself. It results in blue underligned links, which severely clashes with some layouts.
Things like :
%ul.nav.navbar-nav
%li
= link_to t(:button_root), '/'
%li
= link_to t(:button_something), something_path
or
.row
= link_to something_path, class: 'btn btn-default' do
= t(:button_something)
will produce this behavior. I've come up with a few impractical solutions like overriding the css directly in application.css but this is hardly something I'd like to have to do everytime. What am I doing wrong in this syntax ?
EDIT :
The inclusion of bootstrap is done through importing through application.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
The rest of the stylesheets are empty apart from Active Admin's
#import "active_admin/mixins";
#import "active_admin/base";
EDIT :
The inclusion of active admin's css in the application stylesheet is the cause of the issue. With a clearer idea of the cause of the issue I could find this answer that explains the issue.
https://stackoverflow.com/a/11745446/5194491
I opted to displace active admin's css sheet in the vendor folder as it seemed to me the more sensible choice.
You're doing nothin wrong with the link_to syntax.
link_to only renders a <a href></a> element, it does no styling at all (unless you provide an explicite style attribute).
The appearence is totaly defined by your CSS.
So use your browser's developer tools to check the CSS styles, that are used on your link and show the resuts here for advise.
Maybe Active Admin styles are overriding the bootstrap styles.
The application.css (or .sass or .scss for whatever your file extension is) is used as a master sheet, and if I am not mistaken, is typically loaded last and any of the imports you include on the application.css file will override any of the stylesheets for different controllers (such as post.css.scss would be overridden by application.css, for e.g.).
Matt Boldt's article has a great description of that and how to understand it.
Edit:
I wanted to elaborate on this a bit more, but I was being called into a meeting so I'll do that now since it's over.
In your application.css file, at the very bottom of the list of require lines you should see:
...
*= require_tree . //The "tree" of all other stylesheets gets compiled first.
*= require_self //Then this page (the application.css page) gets loaded after the tree
*/
#import stuff... //Then this overrides all that stuff
I'm not sure if possibly switching the require_tree . and require_self lines would do the trick, but it doesn't feel like good practice, and I'm typically not comfortable modifying certain hierarchies in Rails apps, so although that might work, I personally don't suggest it.
I usually write my CSS in the application.css. Even though I am told this is bad practice, it has worked every time for me and never really give me any complications and has actually increased my productivity for a few reasons:
All my CSS is in one file, not scattered over several which may cause styling inconsistencies.
I don't need to forcefully override Bootstrap styling by using !important everywhere.
And that's pretty much the only two reasons I need. Honestly, use whatever works best for you that doesn't make future development on it a pain.
I'm using zurb with rails. I overrode some of zurbs default css by adding changes to app/assets/stylesheets/application.css
But precompilation seems to append all the other css files to this one. Is there any way to ensure that a certain css rule will be the last one to be precompiled to application.css?
the order in which the assets are compiled can be specified in the manifest files for js and css http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
Use many requires in your application.css.scss
*= require css1
*= require css2
...
I'm wondering what application.css is for? If I'm creating a new file for header and footer so all my pages can just include header and footer page, do I just put all common css syntax in application.css? or should I just create a new custom.css and place all the syntax that is going to be used throughout my application like body, html, ul, a, tags and stuff?
Thanks
What is application.css for? Have you read the Rails guide on the Asset Pipeline? That page alone answers your "what's it for?" question and more very clearly and thoroughly.
As for placement of your styling, the guide mentions:
The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (i.e., .coffee and .scss files are not automatically included as they compile to JS/CSS):
This means by default Rails is only going to compile an application.css file for you. Sure, you can put your styling in app/assets/stylesheets/custom.css and include it with
/**
*= require custom
*/
but your "custom" styling sounds like application styling, so it seems it'd be best to just drop it all into application.css and let Rails do what it does by default.
I've set up a set of [object].css.scss styles in my assets/stylesheets directory to correspond with the different views in my application. Every sheet includes a set of global style variable values in the first line:
#import "branding.css.scss";
And then accesses the variable values when needed ($primaryColor, $secondaryColor, etc) throughout the library.
It's beautifully dry, but unfortunately Rails doesn't refresh the object stylesheets when I make a change to the variable values in the _branding.css.scss file. I have to go and touch each file before the SCSS recompiles the object style library with the updated variable value.
This is a minor gripe but it's disruptive to the workflow, especially when I keep clearing the browser cache trying to fix it :/
Is there a better way to organize variables?
Is there any way to force the refresh?
I've been putting variables and mixins into an includes.css.scss file and importing them into each stylesheet that requires them. To make Rails recompile when the includes file is changed you need to use the depend_on directive in application.js. For example:
application.css:
/*
*= depend_on includes
*= require_self
*= require stylesheet
*/
includes.css.scss:
$bg-color: #999;
stylesheet.css.scss:
#import "includes.css.scss";
body { background: $bg-color; }
This is indeed very annoying...
I don't have a complete solution, but one thing I've found is that all you need to do is touch 'application.css.scss' to get it recompile everything.
I've started using guard-compass and guard-livereload recently, but it has the same problem in 3.1. Maybe someone cleverer than me could fix it so that it touches 'application.css.scss' as well?