Cufon Hover & Change of font syntax - javascript

Could someone help me rewrite this syntax below to get it right.
I want the font to be replaced by my font whilst accepting the :hover so my button will change when i hover over it.
Cufon('button', {
fontFamily: 'Disgrunged A',
hover: {
color: '#ed1c24'
}
});

You could try to add button to hoverables list
Cufon('button', {
fontFamily: 'Disgrunged A',
hover: {
color: '#ed1c24'
},
hoverables: { button:true }
});
Ref: Cufon API
hoverables
Defines which elements
:hover is used with. Defaults to links
only as IE6 can’t handle anything
else.
example : { tag: true, .. }
default : { a: true }

i don't know cufon, but i think the syntax has to be like this:
Cufon.replace('button:hover', {
fontFamily: 'Disgrunged A'
});

Related

Hide cursor on NodeJS blessed

I want to hide the cursor in my blessed application. I've tried using the following options:
cursor: {
color: "black",
blink: false,
artificial: true,
},
Inside the screen object, it didn't work. So, I've also tried using:
var cur = require('hide-cursor');
cur.hide();
which didn't work either.
Anyone got some ideas on how to do that?
Remove the cursor object:
cursor: {
color: "black",
blink: false,
artificial: true,
},
Or, try to put cursor: 'false' in your screen const. You don't need another module to remove the cursor.

How to add font family to Chart.js V3.7.0

I tried both this:
plugin: {
label: {
font: {
family: "Lato"
}
}
}
and this:
myChart.defaults.global.defaultFontFamily = "Lato";
Pieces of code to add Lato font family to my chart, but both cases didn't work.
Any better suggestions? Note that the version I use is 3.7.0.
Thanks in advance!
For global use: Chart.defaults.font.family = "Lato".
Details here.
The correct way to specify would be like this (in options):
plugins: { // not plugin
legend: { // extra layer: legend
labels: { // with an "s"
font: {
family: "Lato" // right here
}
}
}
}

How to add custom styles

I can’t add my own style, when I reload the page in the browser my styles do not add
CKEDITOR.addCss('a{color: inherit; text-decoration: none}')
CKEDITOR.stylesSet.add([{
name: 'My Custom styles',
element: 'span',
styles: {
'padding': '10px',
'border-radius': '8px',
'background-color': '#6950ab',
'color': '#ffffff!important',
'display': 'inline-block'
}
}])
CKEDITOR.replace('container');
</script>```
In a classic editor (with toolbar) you may set config.contentsCss
CKEDITOR.stylesSet.add('myStylesComboBox',[{
name: 'my span style',
element: 'span',
attributes: {
'class': 'box1',
}
},
{
name: 'my span2 style',
element: 'span',
attributes: {
'class': 'box2'
}
}]);
var ContentsCss = [
'span.box1{padding:10px;border-radius:8px;background-color:#6950ab;color: #ffffff!important;display:inline-block}',
'span.box2{padding:10px;border-radius:8px;background-color:#6770ab;color: #ffffff!important;display:inline-block}'];
CKEDITOR.replace( 'editor1',{
stylesSet: 'myStylesComboBox',
contentsCss: ContentsCss
} );
Example:
https://codepen.io/edsonperotoni/pen/JjjvZxz
References:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-stylesSet
Please use the following rule while styling in CKEditor for specific use cases (shared by CKEditor support):
Preview & Print
please change default styling either by changing the rules in contents.css file directly or by providing a different file with CKEDITOR.config.contentsCss option https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
Export to PDF plugin:
please provide different styling using https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-exportPdf_stylesheets
OR change default styling with CKEDITOR.config.contentsCss option https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss or extended it with the CKEDITOR.addCss() https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-addCss.
You can refer to the below link if you are having trouble loading the CSS file defined in the configuration - contentsCss:
ckeditor - contentsCss not loading custom styles

Title to the graph when saved as image in Echarts

I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.
Attaching a link for your reference from echarts. Which provide the option for saveAsImage
https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage
As attaching a link of echarts example which has save image icon on the right top corner
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.
I really thank the guys who can come up with the solution for the above requirement.
By default, the name of the image is the chart title.
You can set the title by using:
option: {
title: {
text: 'myTitle'
}
}
To provide a custom name, you can use the saveAsImage.name function:
option: {
toolbox: {
feature: {
saveAsImage: {
name: 'myImageName'
}
}
}
}
Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:
option: {
toolbox: {
itemGap: 20,
bottom: 20,
...
}
}
Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:
option: {
toolbox: {
iconStyle: {
borderWidth: 10,
borderColor: rgba(0, 0, 0, 0),
...
}
}
}
Toolbox documentation
option: {
toolbox: {
feature: {
saveAsImage: {
title: 'Save',
}
}
}
}

Extjs change font size for displayfield

I've a displayfield, and i would like to increase the font size.
I've configured it as follow:
{
xtype:'displayfield',
cls:'biggertext',
fieldLabel:'label',
style:{
'font-size':'32px'
},
labelStyle:{
'font-size':'32px'
}
}
but the size of the font for the label and the value field has not changed.
I've also tried to do it via CSS:
.biggertext
{
font-size: 32px;
}
but I've no changes about the font size.
What is wrong?
Thank you all
you should use some other properties for this.
e.g labelcls.
Here is a demo
{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10',
labelCls: 'biggertext',
fieldCls:'biggertext',
}
Try this.!important will overwrite the parent style
.biggertext
{
font-size: 32px!important;
}
Or
style:{
'font-size':'32px!important'
},
labelStyle:{
'font-size':'32px!important'
}
label:
labelStyle: "font-size:15px;font-weight:bold;width:60;padding:10px 0px 0px 10px;",
value:
style:"font-size:14px;padding:10px 0px 0 15px",
You've missed the ' on your cls biggertext in the ExtJS code. Also you do your styles like this:
style:{
'font-size: 32px;'
},
labelStyle:{
'font-size:32px;'
}
Also note that labelStyle used to work only if you are wrapping your label in a container with FormLayout.
It could also be that you need to add !important to your CSS. I once needed it, otherwise it would not be displayed correctly in the browser.

Categories