We Keep Coding

SweetAlert2 - How to change title and text color?

I would like to change title and text color in SweetAlert2.
My alerte :
Swal.fire({
icon: 'warning',
title: 'Attention...',
text: 'Change color of this text',
background: '#1e2122',
confirmButtonColor: '#ff6600',
confirmButtonText: 'OK',
iconColor: '#ff6600',
})
I have seen this topic but not work for me.
it is necessary to use customClass ?
Could you help me please ? :)
Thanks.

Try using customClass in the SWAL configuration to give a custom class name to the title or the container and provide the text color in that class.
SWAL customClass Configuration
Your configuration when you invoke SWAL should contain the customClass key with value like
customClass: {
title: 'custom-title-class',
}
On your root CSS file
.custom-title-class {
color: green;
}
Similarly other styles can also be overridden using their respective entries.

You can directly use "swall-text" class and give it whatever styling you like.
.swall-text{
color: red;
}
here are the docs not only text, but we can customize everything on the popup modal https://sweetalert.js.org/docs/#theming

How to remove old tinymce style_format classes when changing / updating format

I have created some custom style formats, that add a class to a block level element. The problem is that when I apply one style it keeps the old class and adds the new class.
How do I remove the old class when switching to another format?
mce_options_article = {
// ...
formats: {
p_grey: { selector: 'p', classes: 'grey' },
p_red: { selector: 'p', classes: 'red' }
},
style_formats: [
{title: 'Paragraph Color', items: [
{title: 'Grey ', format:'p_grey'},
{title: 'Red ', format:'p_red'},
]},
]
// ...
}

Use attributes instead of classes.
This is what I did:
mce_options_article = {
// ...
formats: {
p_grey: { selector: 'p', attributes: {'class':'grey'} }, // use attributes
p_red: { selector: 'p', attributes: {'class':'red'} } // use attributes
},
style_formats: [
{title: 'Paragraph Color', items: [
{title: 'Grey ', format:'p_grey'},
{title: 'Red ', format:'p_red'},
]},
]
// ...
}

The solution of using formats and then referencing them in style_formats didn't work for me (using TinyMCE v4.x), I think because I was trying to define 2 sets of styles for H tags - one with a class and one without. It resulted in all of the styles being disabled (I'm not entirely sure why).
I ended up adding an event handler for ExecCommand in the setup:
setup: function (editor) {
editor.on('ExecCommand', function (e) {
if (e.command === 'mceToggleFormat' && e.value.startsWith('custom')) {
var format = e.target.settings.style_formats.filter(obj => { return obj.name === e.value; })[0];
e.target.selection.getSelectedBlocks()[0].className = format.classes ? format.classes.join(' ') : '';
}
});
}
This seems to work ok, but doesn't always seem to highlight the current format when the 'Format' dropdown is shown, although I think that this is due to the style formats I have defined, rather than the above code.
I hope this helps someone out with the same issue that I had, but obviously test it thoroughly with your code before using it.

How to add html label to cytoscape graph node

I use cytoscape.js for show relations between nodes.
I want to create different stylish labels for one node.
I want more complicate stylish labels, then in the cytoscape.org official example.
How can i do it?
Sample image of my problem:

I solved my problem with extention for create html labels for cytoscape.
Extention on github: cytoscape-node-html-label
Extention demo: demo
cy.nodeHtmlLabel(
[
{
query: 'node',
tpl: function(data){
return '<p class="line1">line 1</p><p class="line1">line 2</p>'}
}
]
);
.line1{
font-size: 10px;
}
.line1{
font-size: 12px;
}

First, there must be an area to draw the graph. Add a tag to index.html, then within the body section, add a div element named "cy", like so: . This creates the body of the webpage, which in turn holds a div element named cy. Naming the element makes it easy to later access and modify this element for styling and passing to Cytoscape.js.
index.html should now look like this:
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src='cytoscape.js'></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Next, the style of the graph area must be slightly modified via CSS (putting a graph into a 0 area div element is rather uninteresting). To accomplish this, add the following CSS code between and :
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
How about making the graph look nicer? Cytoscape.js provides a multitude of styling options for changing graph appearance. The initialization of the graph may be modified to change default style options, as follows:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}],
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red'
}
}]
});
Next up is displaying labels in the graph so that nodes can be identified. Labels are added via the 'label’ property of style. Since labels are already provided (via the id property of data), we’ll use those. If other data properties are provided, such as firstname, those could be used instead.
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}]
The final common component of a graph in Cytoscape.js is the layout. Like style, elements, and containers, layout is also specified as a part of the object passed to cytoscape during construction. To the existing cy object, add (after elements):
layout: {
name: 'grid'
}
check this out, it will help you - http://blog.js.cytoscape.org/2016/05/24/getting-started/

jsfiddle using dojo not picking up styles for unknown reasons

I'm attempting to copy an existing jsfiddle
require([
"dojo/dom",
"dijit/Dialog",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane) {
(new Button({
label: 'Show dialog',
onClick: function() {
var layout = new BorderContainer({
design: "headline",
style: "width: 400px; height: 400px; background-color: yellow;"
});
var centerPane = new ContentPane({
region: "center",
style: "background-color: green;",
content: "center"
});
var actionPane = new ContentPane({
region: "bottom",
style: "background-color: blue;"
});
(new Button({ label: "OK"})).placeAt(actionPane.containerNode);
(new Button({ label: "Cancel"})).placeAt(actionPane.containerNode);
layout.addChild(centerPane);
layout.addChild(actionPane);
layout.startup();
var dialog = new DijitDialog({
title: 'dialog title',
style: {
//width: '400px',
//height: '400px',
},
content: layout
});
dialog.containerNode.style.backgroundColor = "red";
dialog.startup();
dialog.show();
}
})).placeAt(document.body);
to a new jsfiddle
require([
. . .
})
that uses a newer version of dojo but the EXACT same code. I've added the external resource "claro.css" for the appropriate version of dojo that I'm using in the Frameworks setting, and the same LOAD TYPE in the JavaScript settings, but my fiddle is clearly missing styles since it is not rendering like the original: the dialog box and BorderContainer are missing borders, background colors, and essentially all styles.
This is even more important since the same thing is happening (styles not being applied) to a dialog dijit in an application that I'm working on.
What am I missing in my fiddle??

You are missing the claro body tag. Click on Settings icon on HTML and add this to the body tag.
<body class="claro">

Cufon Hover & Change of font syntax

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'
});