I have a chart with a title like so:
{
xtype:"cartesian",
axes:[{
type:"numeric",
position:"bottom",
fields:"ABC",
title:"BLAH",
....
...
}]
}
previously in with ext 4 I was using css to style the tspan el
tspan{
fill:"#fff";
}
but in ext6 the same doesnt work nor can I inspect the tspan element like I was able to in ext 4.
I also tried:
title:"<font color='#fff'><BLAH></font>"
this did not work and in place of the title it shows the above font tag
how can I change my chart title to white?
thx
If given a String, the 'text' attribute of the title sprite will be set, otherwise the style will be set.
use the config style to set the text color, just add
style: {
color: #fff
}
you can read more here http://docs.sencha.com/extjs/5.1/5.1.2-apidocs/#!/api/Ext.chart.axis.Axis
same on ext 6
Related
I'm learning JS right now, and I trying to do the following:
I'm creating an html grid, each cell is marked with a cell class which doesn't give it a background color. When I mark the cell (i.e by clicking), the JS code adds it a colored class, which gives it background color:
.colored{
background-color: black;
}
Now, I'm trying to take it a step forward and give the user control over the background color of the cells by using HTML's input (type color).
I'm getting the color the user picked, and then I want to change the cells background colors - and here is my problem.
I want to get the css rule for colored class and change it to the value supplied by the user.
I tried changing it by using (colorPicker is the input element):
colorPicker.addEventListener('input', (e) => {
cells.forEach((cell) => {
if(cell.classList.contains('colored'))
cell.style.backgroundColor = e.target.value;
})
})
The above change only the cells which currently have colored class, and not the colored ruleset itself - so the cells which will be marked later won't get the color change.
I've come across ways to change the css ruleset directly by using document.styleSheets, but I'm looking for a more elegant way to change the colored class css.
Is there such a way?
You could implement the same behavior with CSS variables. But instead of changing the style of a specific element you can change the value of the property.
A simple version can be used like so:
const colorPicker = document.querySelector('.color-picker');
colorPicker.addEventListener('input', (event) => {
// Retrieve chosen color
const color = event.target.value;
// Overwrite CSS variable
document.documentElement.style.setProperty('--color-red', color);
}, false);
:root {
--color-red: #ff0000;
}
.colored {
background-color: var(--color-red);
margin: 0 0 0.25em;
}
<div class="colored">Am I red?</div>
<div class="colored">Should I be red?</div>
<div class="colored">Red is my color?</div>
<div class="colored">All I want is red?</div>
<div class="colored">Roses are red?</div>
<input type="color" class="color-picker" />
I would like to keep this button in the toolbar, keep its actions unchanged, keep the tooltip appear, but limit the label property to the tooltip only.
Inside the a.ui.addButton("Source"... of CKEDITOR.plugins.add("sourcearea",... in the ckeditor.js, the label option is defined like in the the other plugins that receive no permanent label on the toolbar. Tried
a.ui.addButton("Source", {
label: "",
command: "source",
toolbar: "mode,10"
});
which doesn't satisfy me 100%, as the tooltip is also removed.
CKEditor 4.x
I fixed this issue just by styling, maybe this could help you, if you still didn't figured out how this could be done
span.cke_button__source_label {
display: none;
}
I have a different font colors in my th tags in html table in which I do want to have my function align the data vertically, but when I transforms the data to be Vertical, I LOSE that font color.
Could have 12 different font headers dynamically generated from the database
Fiddle:
http://jsfiddle.net/bthorn/y8ct6b5u/
<table class=mytable>
<th class=vertical bgcolor=#C0C0C0 align=center> <font color=#FF0000 size=2> Test this out</font>
</th>
</table>
Note:
Font color can be something other tha "#FF0000"
Could be #FFFFFF or #000000 or whatever ... thus I NEED to capture it.
Someones fiddle that I forked:
Someone else tried to say to do
newInnerDiv.css("background-color");
When I said that I do not want the code to be hard coded with their first/second answer of
newInnerDiv.css("color", "red");
http://jsfiddle.net/bthorn/p1w73oyj/
Just add a CSS class to the table which contains the style attributes. As a general rule of thumb, you should never use HTML attributes like color and bgcolor. HTML is there to tell the browser what to show; how to display it (colours, sizes, formats, etc.) is CSS' task.
Here's a working fiddle: https://jsfiddle.net/gb4pxfx5/1/.
Notice that I've created a CSS class called mytable which keeps the background and text colors, and since the class is kept upon transformations, the text color remains the same:
table.mytable {
background-color: #C0C0C0;
color: #FF0000;
}
Edit: if you want to change the style dynamically, you can either use jQuery's css() method or switch between predefined CSS classes. Here's an example of the latter, from https://jsfiddle.net/9f73zmb2/:
var changeColor = function()
{
table.removeClass(curr_class);
curr_class = curr_class === 'red' ? 'orange' : 'red';
table.addClass(curr_class);
window.setTimeout(changeColor, 1000);
}
changeColor();
I am trying to change the default document settings for a batch of InDesign documents – that is, the styles, swatches etc. that are 'active' (marked blue) in an open document with nothing selected.
But I have a hard time figuring out how to change the default cell style.
Stroke swatch, Paragraph style and Character style are simple:
app.activeDocument.pageItemDefaults.strokeColor = "Black";
app.activeDocument.textDefaults.appliedParagraphStyle = app.activeDocument.paragraphStyles.item ("[Basic Paragraph]");
app.activeDocument.textDefaults.appliedCharacterStyle = app.activeDocument.characterStyles.item ("[None]");
Cell style, however, is not so easily accessed, even though it is really just a simple mouse-click for a user. There is no 'appliedCellStyle' property.
How can I do this?
I think defalut cell style is "None", though selected other cell style in GUI
if you want apply default cell style as "None", there are no need to do.
when create a table without applying table style, the cells are always applyied 'None'.
please try this code.
var table = app.activeDocument.textFrames.add().tables.add();
alert(table.cells.firstItem().appliedCellStyle.name);
thank you
mg
How to set the some default CKEditor styles(Presented in Styles combo box) at the current position through javascript.?
For example if the cursor in one position, i have to set the 'Marker: Yellow' style for that position after typing any character it should change to Yellow. Is it Possible?
I'm not sure if I understood you, but isn't you just want to exec command applying (or removing) e.g. bold style? If yes you can do this by:
editor.execCommand('bold');
If you've got empty selection (caret) placed somewhere in the text, before executing this command, editor will create empty <strong>^</strong> element, so when user starts to type, the text will be bolded.
Update
Styles are applied in a little bit different way.
var style = new CKEDITOR.style(
{ name: 'Blue Title', element: 'h3', styles: { 'color': 'Blue' } });
style.apply(editor.document);
That will apply Blue Title style to the current selection. You can find other styles definitions in _source/plugins/styles/styles/default.js (http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/styles/styles/default.js) or you can get them in the code:
editor.getStylesSet(function(stylesDefinitions) {
// stylesDefinitions is an array
});