I am trying to send the css into RenderSection in _Layout.cshtml file. That is
#RenderSection("mycss", required: false)
But when I try to send the css from a razor view (.cshtml file ) it says,
The name Section doesn't exists in current context.
My code is given below
#Section mycss
{
<style>
h2 {
color: green;
}
</style>
}
the 's' in section needs to be lower case, and intellisense is probably complaining about that in Visual Studio:
#section mycss
{
<style>
h2
{
color: green;
}
</style>
}
Now that I've answered the question, I just want to add that, generally speaking, I would not advise passing css like this (although I'm sure someone is going to comment about a corner case) because it is a bad practice and would recommend that you put it in a css file.
I am running ckeditor 4.1.4 on a ruby on rails app. The advanced content editor seems to be stripping anything other than basic attributes.
For example, if I have a word doc with 'this is a test' where 'is a test' is bold, red and 28 point and looking at the contents of the clipboard with clipview shows
<body lang=EN-US style='tab-interval:.5in'>
<!--StartFragment-->
<p class=MsoNormal>This <b style='mso-bidi-font-weight:normal'><span
style='font-size:28.0pt;line-height:107%;color:red'>is a test</span></b><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<!--EndFragment-->
</body>
</html>
It would appear that it is picking up the color,size and bold attributes.
However, when I paste that into a text area using ckeditor and look at the source in ckeditor, I see
<p>This <strong>is a test</strong></p>
The attributes other than strong have been removed.
My body tag on the form is
<div class="field">
<%= f.label :body %><br>
<%= f.cktext_area :body, :rows => 80, :cols => 120 %>
</div>
I have gone into C:\Ruby200\lib\ruby\gems\2.0.0\gems\ckeditor-4.1.4\app\assets\javascripts\ckeditor\config.js and added
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.removeFormatAttributes = '';
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
I tried adding the three config lines inside the block and that didn't work. I read a suggestion about adding them outside the config block so I tried that. I did restart the server but it still strips out the additional attributes.
This is an intranet application and, given our situation, I'm not worried about content filtering. I just want the users to be able to copy and paste with all attributes.
------ edit 1
I looked at the source of the page and see
//<![CDATA[
(function() { if (typeof CKEDITOR != 'undefined') { if (CKEDITOR.instances['document_body'] == undefined) { CKEDITOR.replace('document_body', {"allowedContent":true}); } } else { setTimeout(arguments.callee, 50); } })();
//]]>
</script>
I'm not sure if the allowedContent statement should be working.
There are many ways to configure CKEditor, but the most simple one is passing object as a second parameter to CKEDITOR.replace (just as it's shown in your last piece of code).
However allowedContent: true can be not enough to enable pasting anything, because there are also paste filters in CKE, enabled in default in Chrome and Safari. If you're using that browser, CKE will strip off all classes, styles and div and span elements. To disable that behaviour, you should also pass pasteFilter option set to null:
var editor = CKEDITOR.replace( 'editor', {
allowedContent: true,
pasteFilter: null
} );
If you don't want to mess with configuring CKE, you can also disable paste filter on the fly:
editor.on( 'instanceReady', function() {
editor.pasteFilter.disable();
} );
However disabling that filter can lead to producing very messy HTML, so be warned!
More info about paste filter is available in official documentation.
---edit:
Note that if you are pasting mainly from Word, there are also configuration options dedicated for that case: pasteFromWordRemoveFontStyles and pasteFromWordRemoveStyles.
I need dynamic styles for each user. The problem is such that it is possible to choose between two themes, one static and the other user can change. After change current user theme value will set to sass variable and need precompile. How I can do it?
It's better to rely on pure CSS features in this one rather than compile your SCSS on each request (which will be very inefficient).
Given this base SCSS file:
.base-theme {
.color-main {
color: $blue-lighter;
}
// and so on
}
You can use this like this:
<p class="color-main"> ... </p>
Based on settings stored in the database you can generate an alternative
theme like so:
<style>
.alt-theme .color-main {
color: <%= current_user.colors.main %>;
}
</style>
and apply them later like so:
<body class="<%= user.has_theme?? 'alt-theme' : 'base-theme' %>">...</body>
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result:
I cannot find any way to change the font styling in a Rails select_tag list
If I try this:
<%= select_tag :weight_lbs, options_for_select([['0', 0],['1', 1],['2', 2],['3', 3],['4', 4],['5', 5],['6', 6],['7', 7],['8', 8],['9', 9],['10', 10],['11', 11],['12', 12],['13', 13]]), :class => 'formfield'%>
then I can change the width of the select box in my CSS class but I cannot change anything else - height, font-size and color, eg, all have no affect
Similarly, if I try and change style at element level, and even using an example from Rails documentation
<%= select_tag 'testname', options_for_select(options_for_select([ "Denmark", ["USA", {:class => 'select'}], "Sweden" ]))%>
the class attribute has no affect on output (Chrome & Safari on a Mac, Rails 3.1)
So, how can I change the height & text styles within a select_tag in Rails?
I found this on Reddit. posted by u/GroceryBagHead
You cannot style select options. Those are dependent and rendered by your OS/browser. It's possible to replace this control with html elements though.
He posted a link that's now dead for something called bootstrap-select. A google search should help you find more resources
Well, this question is old, but sure you can:
<%= select_tag :blah, options_for_select(#some_options), {:multiple => true, :style => "min-width: 200px"} %>
My suggestion is to check the page source generated by Rails. It will make easier to understand the HTML structure in order to select the elements in your CSS file.
Having the HTML code generated by Rails, your question became related to CSS.
You can include your select inside a div, for example:
<div class="myclass">
<%= select_tag :weight_lbs, options_for_select([['0', 0],['1', 1],['2', 2],['3', 3],['4', 4],['5', 5],['6', 6],['7', 7],['8', 8],['9', 9],['10', 10],['11', 11],['12', 12],['13', 13]])%>
</div>
So your CSS:
.myclass select {
font: # whatever you want
...
}
.myclass select option {
# in case you want to style the options of a select
}
ETC...
A work around I used was installing a gem called select2
gem 'select2-rails'
If you follow setup process in the docs, you can edit the dropdown list properties pretty easily in CSS. After some messing around in Chrome inspector, I found the relative tags.
/* The dropdown background */
.select2-dropdown{
background-color: #3a3a3a;
font-size: 10px;
font-family: sans-serif;
}
/* Individual styling of list items that are selected (previously chosen) */
.select2-results__option--selected {
opacity: 0.9;
background-color: #505050 !important;
}
/* Individual styling of list items that are highlighted (mouse hover) */
.select2-results__option--highlighted {
background-color: #e66d2d !important;
}
If you want to look into Chrome Inspector yourself, click on the "Select" form field and open the dropdown list. This creates a span element as a child of the body tag shown in the screenshot attached.