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'
}
});
});
Related
I have been trying to learn styling in extjs, but I cannot figure out how it works. In a very simple example, I would like to apply some styles to panel header:
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'MyPanel',
cls: 'title',
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'myButton'
}, {
html: 'Hello World!!!',
}]
})
}
});
So, according to documentation I managed to change header background-color with the following css file:
app.css
.title .x-panel-header {
background-color: pink;
color: red; /* this doesn't work */
font-size: 22px; /* this doesn't work */
}
The problem is that some theme variables aren't applied correctly - for example, text color or font-size, although these variables are specified according to documentation for panel header. What am I missing?
Almost all ExtJS components have a style or cls property.
Manually overriding the extjs css classes should be the last resort.
In your case you should be looking at these components:
Ext.panel.Header
Ext.panel.Title
The panel component should have a header config and the header component should have a title config to customize each part.
Here is working example: Sencha fiddle example
For the sass variables you mentioned
They are used to customize ExtJS Themes. So if you want to make your own theme with let's say triton as base you can use these variables to create your own theme. This is quite useful if you want to make overrides for the whole theme (e.g. the background color of all Ext.panel.Panel components)
I'd recommend you to read this guide for more information on this subject: Theming guide
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 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');
My name is Josh and I work for a community college newspaper. I've just recently found Highcharts and have been attempting to embed a interactive graph into a post for our website, rather unsuccessfully. Actually, it's been a complete failure.
I have already read over and attempted this post to no avail:
highcharts and wordpress
There's no one I know who I can take this problem to and even though I feel like I've tried every suggested solution, Unfortunately, I'm rather illiterate when it comes to html and code. Any help would be GREATLY appreciated.
I am working with Wordpress 3.5.1 Here is the point I am currently at:
I am running: Allow PHP in Posts and Pages Plugin & Interactive Javascript and CSS.
For the header option of the post I have:
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js" type="text/javascript"></script>
In some of the websites (this one included), I've seen mention of uploading the Highcharts library onto your wordpress server. I've uploaded the highcharts.js file through the media library but I have a feeling that I am doing this incorrectly?
In the post itself I have placed:
[php]
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'State Funding of DSPS Services',
x: -20 //center
},
subtitle: {
text: 'Source:MPR Associates Report',
x: -20
},
xAxis: {
categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
'2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
},
yAxis: {
title: {
text: '$ Million'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' Million';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'College Total Funding',
data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]
}]
});
});
});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>
The page comes up blank, as it has been for the past hundred attempts or so. I apologize if this is post in the wrong spot or undesired. Any advice or solutions are greatly appreciated.
Thank you,
J
In order to get a chart rendered, you need several things to be in place:
Include the highcharts.js - done
Include some javascript which defines and creates a chart - done
Give highcharts a place to put the chart - ?
I think you may be missing the last element. This is done by including a tag inside your post somewhere. The div can be named using the 'id' property as follows:
<div id='container'>mydiv</div>
You have already told highcharts that you want to 'renderTo' a place called 'container', so this should be all you need.
To add this in wordpress, go into the post editor and make sure you are in 'html' mode. In my version of wordpress, this is a tab just to the top right of the post editing pane with the options 'visual' and 'html'.
In html mode, just add my div code in the place where you want the chart to appear. Hopefully that will do the trick.
there could be several reasons for the chart not showing up.
1)The scripts (jquery and highcharts) need to be loaded onto your page and this is not immediately obvious in wordpress. There's a couple of ways - if you aren't a coder then the simplest is to go to the header.php of your theme. (Appearance->Editor) and look for the header.php file on the right hand side. In the head section you'll need to register the highcharts library...
wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a');
wp_enqueue_script('myHighchartsHandle');
The path to the high stock/highcharts library will change depending on where it is on your server of course.
2) The code is javascript - your supplied code has php tags. I think you could edit that to have js tags in the square brackets and install the 'Allow javascript in posts and pages' plugin. Note that plugin needs you to prefix any square brackets in code with a backslash so you'll need to do that to get the data series formatted properly.
3) It does look like you have a div container outside of your code which is good. But as the other answer suggest you will need that and the id has to match the renderTo in the code.
4) If it doesn't work after these 3 steps then you could be falling foul of jQuery noConflict.Wordpress sets jquery in this mode by default.
Instead of $ in your js code you may have to replace with jQuery. The highcharts library is ok in the code you've used.
Happy to help more if required. I have since built much of this into a plugin which is much cleaner...
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.