I have a set of WYSIWYG editors that are all initialized via TinyMCE on demand.
In the previous version of TinyMCE I was able to easily remove buttons by specifying the button theme_advanced_buttons1, theme_advanced_buttons2 etc. But since the newest release of TinyMCE 4.0 , it seems as tho that no longer works.
I am running the modern theme, so maybe the theme_advanced_buttons1 doesn't work with the modern theme? I've tried theme_modern_buttons1 , but that didn't work.
I'm thinking it may have changed with the newest release, as there is a new toolbar with the options for 'File, Edit, Insert...' etc.
Anyone know how I can hide the buttons on initialization? Heres the code I'm trying:
```
// initialize tinyMCE editor on our movie description text area
function initialize_movie_descriptions() {
$('.movie_description_editor').each(function() {
var id = $(this).attr('id');
tinyMCE.init({
mode : "exact",
elements : id,
theme : "modern",
plugins: "wordpress,wplink, paste",
theme_advanced_buttons1: "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3: "",
theme_advanced_resizing : true,
paste_auto_cleanup_on_paste : true,
paste_preprocess : function(pl, o) {
o.content = o.content;
},
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML;
}
});
});
}
initialize_movie_descriptions();
```
Edit
Apparently changing the line plugins: "wordpress,wplink, paste", to plugins: "", seems to have removed the 'Insert' menu item in the first toolbar. I guess because it's not loading any plugins now??
If you don't want all buttons but keep some of the functionality you have to keep to plugins. Simply just add the buttons you want in toolbar. The Same way with the menu:
tinymce
.init({
...
plugins : [code fullscreen save table contextmenu paste textcolor" ],
//buttons you want to show, else set "toolbar:false"
toolbar : "insertfile undo redo | styleselect",
...
menu : {
...
edit : {
//menu edit
title : 'Edit',
//items of menu edit
items : 'undo redo | cut copy paste pastetext | selectall'
},
...
});
you can find a list of plugins with their configuration in tinyMCE here: http://www.tinymce.com/wiki.php/Plugins
I struggled with the same problem after updating Wordpress to version 4.0. I found the solution on the wiki-advanced-page of TinyMCE. In TinyMCE 4 "theme_advanced_buttons" is replaced by "toolbar". You probably want to hide the "menubar" too, see example below:
tinyMCE.init({
mode: "exact", // not needed
theme: "modern", // default - not needed. Only theme available in WP 4.0
height: height, // e.g. 100
menubar : false, // you probably don't want to show the [file] etc bar
block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6",
toolbar : "formatselect,bold,italic,underline,removeformat", //choose buttons in bar
});
There's a fast way to remove everything you see: Using CSS. Maybe it's not the best one, but is the faster one:
#mceu_15, #mceu_17, #mceu_18 {
display:none; }
Those #mceu numbers are the icons I want to hide (added by annoying plugins ;)
NOTE: You have to add this css on your_theme/admin.css
If it doesn't work look / add in your theme functions this:
function admin_style() { wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');} add_action('admin_enqueue_scripts', 'admin_style');
Related
I am using ngx-admin template and for my table. I don't use ng2-smart-table.
I tried to change whole page to dark theme. full page changed to dark mode except table. The table is still white color.
How can i change The table color to dark theme when theme change to dark theme.
I attach screen shot of my issue.
I need the table also has to change dark theme. How can i do?
themes = [
{
value: 'default',
name: 'Light',
},
{
value: 'dark',
name: 'Dark',
},
{
value: 'cosmic',
name: 'Cosmic',
},
{
value: 'corporate',
name: 'Corporate',
},
];
currentTheme = 'default';
You will first need to research primeng themes and how to import them into your project and utilize them.
But for answering this question since ngx-admin doesn't natively handle all the colors for primeng on theme change. You will have to subscribe to the theme changes in the nebular theme and update tables yourself.
themeClass: string = 'light-theme';
constructor(private themeService: NbThemeService) {
this.themeService.onThemeChange()
.subscribe((theme) => {
// Here is where you will know which theme is currently applied and you can do logic. For example (if setting theme by class):
this.themeClass = theme?.name == 'light' ? 'light-theme' : 'dark-theme';
});
}
I'm trying to add the zebra-stripe plugin to a wordpress page.
I am not sure where to place the following code in order to make the zebra striping work.
Can anyone point me in the right direction? Thank you!
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// initialize zebra striping of the table
widgets: ["zebra"],
// change the default striping class names
// updated in v2.1 to use widgetOptions.zebra = ["even", "odd"]
// widgetZebra: { css: [ "normal-row", "alt-row" ] } still works
widgetOptions : {
zebra : [ "normal-row", "alt-row" ]
}
});
});
It looks like the Wordpress table-sorter plugin is using the original tablesorter (v2.0.5) so the theme and widgetOptions settings do not do anything.
If you're not using that plugin, but you are using my fork of tablesorter, then you need to load the /css/theme.blue.css file and not change the default zebra class names:
$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ["zebra"]
});
});
If you are using the original tablesorter without the Wordpress plugin, use the same code above, except for the theme setting; the blue style that needs to be loaded will be in the following location /themes/blue/style.css.
I want to set back-ground color of panel using $panel-body-background-color. then
how can I set in panel config ? I am getting error in following peace of code.
here is code
var mainPanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.get('main'),
xtype: 'form',
title: 'User Registration',
$panel-body-background-color : black /style:{'$panel-body-background-color:#64FE2E'}
});
$panel-body-background-color are not component configurations, they are SASS variables. They are defined and configured outside of you app code. See the link below for a quick tutorial on ExtJS theming. Its very powerful but can be overwhelming at first.
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
You should be using Sencha Command to make this work properly, if you are you can explore the packages folder to see the themes and how they are set up. You can also use Sencha Command to create a new theme:
sencha generate theme my-custom-theme
May I know the reason of changing the background color ?
The code can look like this,
Ext.onReady(function() {
var mainPanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'User Registration',
width:300,
height:400,
bodyStyle:{
background:'pink'
}
});
});
The Mystique theme includes two files that need to be updated to allow a custom styles section. The addition of a "small caps" style for use in the correct formatting of law journal citations. What is the steps to add a "small caps" style for the TinyMCE Advanced editor to use the style in the "Styles" dropdown tool in WordPress.
Using TinyMCE 4, the following custom setup function will add a SmallCaps control:
setup: function (ed) {
//Adds smallcaps button to the toolbar
ed.addButton('smallcaps', {
title: 'Smallcaps',
icon: 'forecolor',
onclick: function (evt) {
ed.focus();
ed.undoManager.beforeChange();//Preserve highlighted area for undo
ed.formatter.toggle('smallcaps');
ed.undoManager.add();//Add an undo point
},
onPostRender: function () {
var ctrl = this;
ed.on('NodeChange', function (e) {
//Set the state of the smallcaps button to match the state of the selected text.
ctrl.active(ed.formatter.match('smallcaps'));
});
}
});
}
The answer given by Goetz is not complete, since TinyMCE does not know about your "user defined format" if you don't define it explicitly. Maybe it did some years ago, but version 4.7.x doesn't seem to do so. Add the code below in addition to his answer (it maybe needs to be bevore setup):
formats: {
smallcaps: {
inline: 'span',
styles: {
'font-variant': 'small-caps'
},
attributes: {
title: 'smallcaps'
}
},
},
toolbar: 'smallcaps_button'
I prefer naming the formats and buttons slightly differently by suffixes like _button or _format, but that actually should not be a problem. Hence it avoids forgetting about to correctly define all needed parts here (format, toolbar, ed.addButton()). So, my toolbar contains the button smallcaps_button and the function is ed.addButton('smallcaps_button')
That's it.
I would like to add a class to my "formatselect" options of the tinyMCE in Wordpress. So when selecting a h1 from the dopdown it should generate a <h1 class="blue">.
I found this Post, but can't get it to work.
Any ideas?
Thanks in advance!
What is described there is working even though not suitable for everyone. I'll give you a short list of what you need to do:
1. use the content_css tinmce init setting
content_css: "http://www.mydomain.com/css/content.css",
2. Create a content.css file containing your class
h1.foo {
background-color: #F067A0;
}
3. use the styleformatting tinmce init setting
style_formats: [{
title: 'My Foo styles'
}, {
title: 'Foo',
block: 'h1',
classes: 'foo',
exact: true
,
4. Make sure you have the style button included (tinymce init)
theme_advanced_buttons1: "styleselect",
You should be able to select text from the h1-tag in the editor and select foo from the dropdown menu of styles. The class should be applied to your selected text.