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.
How to add the custom styles to the aloha editor.
I have a block of text...to that text i would like to add some background color and extra markup to the block of text.
for eg.
ddhjhdhs ahdksahd hkjdhasjhdkjh hdjkhsakj hdjshd shj hdjsahdkja hdkjshdkjh hkjhsakjdhakjh
dsadak dhksadkaj lkdjakl jslkajdl
consider this is a block of text it is having some bg color...Like this i would like to add custome styles to aloha editor.pls explain.
I think that the Aloha sidebar makes possible to define a css class on the selected block of text.
You may also be interested by this color-selector 3rd-party plugin : https://github.com/deliminator/Aloha-Plugin-Colorselector
If it doesn't fit your needs, you will have to write your own plugin.
I hope it helps
I want to knw is there any css class i can override so that all tab panel headers and panel headers style i can change???
if so can some one pls let me know
thanks
For Panel headers:
To change the style of the text specifically use the classes: x-panel-header-text x-panel-header-text-default
To change the background you would need to modify: x-panel-header-default
For tab headers you need to modify:
For the text:x-tab-inner
For the background there is plenty of classes that affect how the background is displayed: x-tab x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active
Because of the way CSS calculates how to style elements, if you are not really good with CSS you will probably need to use !important in each attribute you change, else if you know how to use CSS better, use google chrome to inspect elements and figure out the CSS hierarchy of classes that Extjs uses to do it in a more professional way.
For styling the text in the tab headers:
Add a rule to your CSS file selecting "a.ajax__tab_tab" and set the color/other properties from there.
This will affect the text within each tab title in the TabContainer.
Example:
a.ajax__tab_tab {
color: #00898D;
}
You don't use css directly
you should just change the sass variables and then sencha cmd will convert them to above values. SASS variables for each component are in the docs in the menu.
I'm using one of the standard themes (redmond) provided on the jQuery UI website.
I noticed that it ships with an icon png file with red icons as well as the blue coloured ones. I need to display a warning dialog box but make it use the red icons instead.
I notice in the theme's stylesheet there's a section called "Interaction Cues". Do I just set my dialogClass to ui-state-error which seems to have the desired effect, is this the correct way to do this?
I tried setting dialogClass: "error" but that had no effect.
Yep you have it right, you need the full class name:
$("div").dialog({ dialogClass: "ui-state-error" });
You can test it out here.
Hey, so I'm trying to apply some custom css to a ToolbarView in SproutCore. I've managed to get a CSSE file loading by saving it in layouts/english.lproj but the styles I write are being overridden by the ones provided by SproutCore. This only happens for styles provided by the framework. In my case this would be the background-image element. If I view the page in Chrome's developer tools (below) you can see that both styles are being applied but because my stylesheet loads afterwards it is overridden. If I uncheck the background-image element in Chrome, my background can be seen.
Here are the things that I have tried:
Giving my Toolbar an extra CSS class and targeting that (in my case AppToolbar)
Targeting every CSS class including app-toolbar (.sc-view.sc-toolbar-view.AppToolbar)
CSS !important
Lots of Googling and Reading Documentation
Has anyone else had this problem? any help/suggestions would be greatly appreciated.
Screenshot posted here
Try using the background property instead of the background-image property.
A quick solution is to give your mainPane a layerId of "myApp" and prefix all your css properties with "#myApp":
#myApp.sc-toolbar-view { ... }
A cleaner solution is to give to your app a theme: http://guides.sproutcore.com/theming_app.html.
After that, you will have to prefix your css class with $theme:
$theme.sc-toolbar-view { ... }
Don't forget that you can use scss which is integrate to Sproutcore. This way you can encapsulate all your rules like this:
$theme {
.sc-toolbar-view { ... }
.button { ... }
...
}
This allow you to write $theme only once (per file) and all your css rules will have priority over the one provided by SC.