![text is going outside of the submenu][dedicated resources text is gray color by default]
** I am using react-multilevel-dropdown to created drodown and i want to add custom css to it.text is going outside the submenu at some places. how to fix this??
**
I'm building a Rails app capable of displaying text with rich formatting - the app will be used by non-technical personnel, so using markdown is not possible.
Therefore, I've decided to use Summernote as a WYSIWYG editor.
However, the default highlighting color (the background color option) that is shown when the summernote is initialized is yellow which really conflicts with the color scheme of my app. Any idea how I can reset it so that the default color is whatever I want it to be?
I thought of editing the CSS class to have the correct coloring, but it appears that Summernote applies background color styles via inline style tags - not the best for editability.
If I can't change the default color, then any way that I can force-change the color using some other custom JS?
Update:
I dug into the page source and found that Summernote uses the data-backcolor to set the highlight color. I then used JS to set that value whenever the page loads.
But it would still be nicer (or more elegant, I think) to do it using an option on Summernote itself. I'll leave this question open for a day or two in case anyone knows how to do it using Summernote itself, before posting my JS solution.
Summernote themes might be what I'm looking for, but I'll have to look into it further to make sure. Thanks #razvans
Update 2:
I apologize to everyone that viewed this question, but I had worded it badly :(.
I was referring to the color used to highlight text in summernote (which summernote refers to as the background color of the text) - I wasn't referring to the color of the editor itself.
Again, sorry about that. :(
I dug into the page source and found that Summernote stores the highlighting color in the data-backcolor attribute. It also marks the highlighting button element with data-original-title="Recent Color". So, I used those to change the default color with JS:
First, I selected the button and changed the color it would highlight text with. I also changed the background of the button itself to better reflect what the color would be:
$('[data-original-title="Recent Color"]').each ->
$(this).attr "data-backcolor", "#F7C6CE"
$(this).attr "style", "background-color: rgb(247, 198, 206);"
Then, I also changed the background of the icon within the button, so that it blended into the button (instead of being a white square within the button):
$('i.note-recent-color').each ->
$(this).attr "style", "background-color: rgb(247, 198, 206);"
Finally, I removed the option to select new highlighting colors, since that wasn't needed in my application and would only serve to confuse the person using it. The button for selecting new colors was given the data-original-title="More Color" attribute:
$('[data-original-title="More Color"]').each ->
$(this).attr "style", "display: none;"
2022: I had almost the same problem. I needed to set background color to 'transparent' always, and limit the number of text foreground colors. Also disable the option to select other colors. Basically, I just wanted the users to choose between 4 text colors only, all with transparent background. So I chopped away the code from summernote.js (summernote-lit.js line 9837):
// pallete colors(n x n)
colors: [['#FFFF00', '#FF0000', '#00FF00', '#0000FF']],
// http://chir.ag/projects/name-that-color/
colorsName: [['Yellow', 'Red', 'Green', 'Blue']],
colorButton: {
foreColor: '#000000',
backColor: '#transparent'
}
I also changed the popover (summernote-lite.js line 7429) to:
items: (foreColor ? ['<div class="note-palette">', '<div class="note-palette-title">'
+ this.lang.color.foreground + '</div>', '<div>', '</div>', '<div
class="note-holder" data-event="foreColor"><!-- fore colors --></div>',
'<div>', '', '', '</div>', // Fix missing Div, Commented to find easily if it's wrong
'', '</div>'].join('') : ''),
And the result is:
I know this is not an elegant solution since I'm just hacking and hardcoding stuff, but it served my purpose.
I am trying to implement a color picker like the one shown in the image below,
in the first one, you can select a color and in the second one, you can select the range for that color anywhere between white and black.
Any ideas on how to implement this?
This was too big for comment.
Maybe something like this can help:
virtuosoft
jscolor
jsfiddle
daviddurman
http://i.stack.imgur.com/dxguj.png
What is that blue rectangle line? I want it to be on my control whenever I want to use it. So if I want to remove it, I should be able to for the element. I use bootstrap 3.
Just add the below CSS anywhere in the stylesheet or internally:
button:focus {
outline:0;
}
The blue rectangle line you're pointing out is a line drawn around elements to let them stand out, a so called outline. Imagine a user with only a keyboard navigating through a website, the outline is a good reference to show the user which element is active/has focus. When the outline is on a menu item for example, it shows the user that hitting enter will propably bring him to that particular page.
There is an outline style by default in most browsers, Bootstrap styled it their own way.
More on the outline styling property:
http://www.w3schools.com/cssref/pr_outline.asp
To get rid of the outline for buttons in Bootstrap you could use:
.btn:focus {
outline:none;
}
https://jsfiddle.net/DTcHh/12056/
-edit
As Guruprasad Rao pointed out, the valid outline property is none, according to W3C schools.
I am having an issue where after sorting by a column in a Ext.grid.Panel, the column header remains highlighted. It looks the same way that it does when you hover over it. Is there a way to make it non-selectable i.e. it can be highlighted on mouseover, but clicking on it doesn't change its color?
You can update the x-column-header-sort-ASC and x-column-header-sort-DESC CSS classes, setting the background and border colors to whatever you want them to be.