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;
}
Related
I want to change the color of the progress bar of a task. I've located the .erb source file for the gantt chart page and the .rb source code for the computation of % done progress but it seems it's not the right file to edit.
You should actually edit image located at:
your_redmine_root/public/images/task_late.png
Where your_redmine_root is a place where your Redmine is physically installed, and it depends upon underlaying operating system, etc...
So gannt is a combination of html code generated from underlaying RoR application which's view you can edit in app/views/gantts/show.html.erb. Javascript code from public/javascripts/gantt.js and CSS style (theme), which actually might differ if you are using some custom theme or plugin, at default install it's in public/stylesheet/application.css
The particular codes might also be different due to Redmine version, but you are looking for
.task_late { background:#f66 url(../images/task_late.png); border: 1px solid #f66; }
On Redmine 3.0 it's at line 986. .task_late is ordinary div, and you can set it's css style any way you want...
Don't forget to restart Redmine after editing, and also make sure to refresh your browser's cache.
I am attempting to have a image render in the background of a div with the class head.
My application view is written Haml and the body is defined as follows:
%body
.container
.head
.sixteen_columns
.top-nav
Included in my application stylesheet is:
.head {
background-image: url(/images/background_image.jpg);
width: 100%;
height: auto;
}
I have tried a number of variations to specify the path of the image and altered the image name several times but to no avail.
What is the issue?
Consider using the asset_path helper when referencing images in your stylesheet. Documentation may be found here (check out 2.2.1)In the context the CSS you listed you would heave
.head {
background-image:url(<%= asset_path 'background_image.jpg'%>);
width:100%;
height:auto;
}
Note: This requires that your style sheet be an erb.
Doing so offers a number of advantages over explicitly stating the path, one being that as the structure of rails application changes with new version releases, you will not need to change anything in your code in order for that image to be referenced properly.
This may seem like overkill just to reference an image but it's one of the many conventions of Rails that are difficult to get used but great! as your application grows and changes, hopefully enabling it to better endure the test of time.
Assuming you're using Rails 3.1 or beyond, and that you're using the asset pipeline properly for your images, you can include your image file by doing the following:
.head {
background-image: url(/assets/background_image.jpg);
width: 100%;
height: auto;
}
The reason for this is because of the way the asset pipeline works. It compiles your assets at run time and it places all of your assets in a folder called /assets/. It also ignores subfolder structuring and it just dumps everything into the root /assets/ folder, not /assets/subfolder/.
Try running
rails -v
from the console to confirm what version of Rails you're on.
It sounds like you're running a rails 2.x application, correct? That should mean that you're serving images, js etc from the /public directory. One important gotcha that tripped me up setting background images in css is that the paths you specify are relative to the directory the stylesheet is in(e.g /public/stylesheets), not the root directory of the project itself.
Have you tried changing the path to go up one directory from where the stylesheet is located?
.head {
background-image: url(../images/background_image.jpg);
width: 100%;
height: auto;
}
EDIT: What other paths to the bg image have you tried?
Some other possibilities could be:
background-image: url(images/background_image.jpg);
background-image: url('../images/background_image.jpg');
One other thing to check would be to load the view and examine the div in Google Chrome using the inspector (Ctrl Shift + I). Select the div and examine the styles Chrome is assigning to it.
Also, double check that it's still named background_image.jpg Can't tell you how many times I've gotten burned by some typo I overlooked ;)
Solution:
It turned out to be a combination of two things. I used this format for the background image:
background-image: url(../images/background_image.jpg);
However, the .head div was renbdering with a height of 0. I added a fixed height to test, and it all showed up perfectly. I can work with this from here.
Thank you all so much for the help!!
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your css files.
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.
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"