I am using the following code block to format text:
'formats': {
'format_code': {
'block': 'pre',
'styles': {
'color': '#000000',
'backgroundColor': '#f0f0f0',
'fontFamily': 'monaco,consolas,courier new,monospace',
'fontSize': '1.0em',
'width': '80%',
'minHeight': '5.0em',
'maxHeight': '15.0em',
'overflow': 'auto',
'border': '1px solid #999999',
'padding': '1.0em'
}
}
This code block was given to me. Now I would like to change it to use a CSS class.
Can anyone advise me how to do this. I am not familiar with tinyMCE.
The CSS is almost identical. The camelCase properties are dash seperated in CSS and the font containing a space must be quoted.
.myClassSelector {
color:#000000;
backgroundColor:#f0f0f0;
font-family:monaco,consolas,"courier new",monospace;
font-size:1em;
width:80%;
min-height:5em;
max-height:15em;
overflow:auto;
border:1px solid #999999;
padding:1em;
}
I assume you want to add it to the drop down Styles in TinyMCE. If you want to add it to the Format drop-down then that requires a different configuration option.
If you want a new Style in the drop-down then you need to put the CSS class rule above in a .css file and configure TinyMCE as follows:
tinyMCE.init({
theme:'advanced',
content_css:'path/to/css/file',
style_formats : [
{title : 'My Style', block : 'div', classes : 'myClassSelector'}
]
});
Related
I'm using Video.js together with Vue.js and Electron.js and I'm trying to change the outline of the video player to something a bit better looking than the standard yellow outline but the outline just stays as it is.
My Video Component:
<template>
<div id="video-container">
<video class="video-js" id="video-player" ref="video"></video>
</div>
</template>
<script>
import videojs from "video.js";
export default {
name: "Preferences",
props: ["item"],
methods: {
getPath: function () {
return this.item.dir + "/" + this.item.name + "." + this.item.fileType;
},
},
mounted: function () {
let options = {
autoplay: false,
controls: true,
fluid: true,
playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
controlBar: {
pictureInPictureToggle: false,
},
};
this.player = videojs(this.$refs.video, options).src(this.getPath());
},
};
</script>
<style scoped>
#video-player {
outline: none;
}
</style>
I've also tried !important, #video-player:hover and using the video-container div to change the outline but so far nothing worked.
The outline looks like this:
Video Box outline
button outline
If I understand what you are saying, you are talking about the bowser focus, that blue line around the focus component.
you need something like
.video-js:focus {
outline-style: none;
}
if still not working you can add !important or add this too
.video-js:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
Normally we don't remove this for the simple reason that could be hard to use Tab around the components. But if you are ok with that go for it!
EDIT (10/02/2021):
So for the video JS, you can actually use your custom class and overwrite the Video-js CSS class in order to do that you will need to create this 3 follow classes in your CSS.
.vjs-matrix.video-js {
color: #00ff00;
/*put other stuff you need here*/
}
/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
border-color: #00ff00;
/*put other stuff you need here*/
}
/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
background: #00ff00;
/*put other stuff you need here*/
}
And for your HTML
<video class="vjs-matrix video-js">...</video>
Try to play around with this and see if fix your problem!
Source (videojs)
I know how to style the content of dialogs independently of one another by appending a class to the div and then referencing both classes in the CSS .ui-dialog.myClass{}. What I want to do is style the headers of the dialogs independently of one another and I just can't seem to make it work.
.ui-widget-header.error-dialog{
background: red;
}
.ui-widget-header.success-dialog{
background: green;
}
so on and so forth... Appending the class attached to the div of the dialog of interest doesn't seem to do the job.
<div id="error-dialog" class="error-dialog" title="ERROR"></div>
<div id="success-dialog" class ="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
For example, I'm trying to change the background color of the gray bar that contains ERROR, it is possible I'm just not using the right UI CSS classes:
This is what the HTML looks like when I inspect the element, I have a feeling I'm just not styling the right classes. The div highlighted in blue is where the header color is controlled. All classes listed are automatically assigned to the dialog, I have not edited any of them. If you do edit them, it will affect all dialogs, not just the specific dialog I want.
So I had my classes mixed around and implemented the dialogClass option when instantiating a dialog instead of specifically put the custom class in the HTML. It is worth noting that dialogClass is a bit of a misnomer as when you set that option, you're actually putting the id of your target dialog, not a class. This appears to work how I want it to.
HTML:
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
JS:
var errorDialog = $("#error-dialog").dialog({
autoOpen: false,
height: "auto",
width: 1000,
modal: true,
dialogClass: 'error-dialog',
buttons: [{
id: "error-ok",
text: "Ok",
click: function () {
errorDialog.dialog("close");
}
}]
});
var successDialog = $('#success-dialog').dialog({
autoOpen: false,
height: 200,
width: 400,
modal: true,
dialogClass: 'success-dialog',
buttons: [{
id: "success-ok",
text: "Ok",
click: function () {
successDialog.dialog("close");
}
}]
});
CSS:
.error-dialog .ui-dialog-titlebar {
border: 1px solid black;
background: red;
}
.success-dialog .ui-dialog-titlebar{
border: 1px solid black;
background: green;
}
Not sure why you would need the .ui-widget-header.
Basically whatever you have as your class you put in front of your css with a . in front in your example it would be:
.error-dialog{
background: red;
}
.success-dialog{
background: green;
}
JS Fiddle: https://jsfiddle.net/9acb42v8/
I'm wanting to extend the tinymce toolbar with a font family selector that displays the font family names styled with that font-family. To do this I need to wrap each font name markup with a class or inline css. I've scoured the tinymce API documentation and am struggling to find a way to add custom HTML in an menu item.
The closest I've gotten is an un-styled button that opens a panel with a custom HTML selector, but it's not ideal. I'd really like to add an select directly to the toolbar that is styled with the font families.
This might help you. It doesn't use the toolbar, but instead adds an extra menubar item with custom menuitems.
HTML
<form>
<textarea></textarea>
</form>
JavaScript
It works by adding menuItems to the menu. We can then provide the classes option to the menuitem. This allows us to target each menu item separately via css class selectors. E.g. If we supply classes: "monospace". TinyMCE converts this into .mce-monospace as the class selector. However tinymces css rules will override unless you select a bigger css precedence.
tinymce.init({
selector: "textarea",
menu: {
mynewmenu: {
title: 'Select Font Family',
items: 'arial | monospace | timesnew'
}
},
menubar: 'mynewmenu',
setup: function(editor) {
editor.addMenuItem('arial', {
text: 'Arial',
classes: "arial",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
editor.addMenuItem('monospace', {
text: 'Monospace',
classes: "monospace",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
editor.addMenuItem('timesnew', {
text: 'Times New Roman',
classes: "timesnew",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
}
});
CSS
This is how I got the style to override via css.
.mce-menu-item.mce-monospace > span {
font-family: monospace;
color: olive;
}
.mce-menu-item.mce-arial > span{
font-family: Arial;
color: red;
}
.mce-menu-item.mce-timesnew > span{
font-family: Times New Roman;
color: green;
}
Notice if you just use .mce-monospace > span The precedence value is not big enough, while with .mce-menu-item.mce-monospace > span has a bigger precedence value and overrides tinymces css.
Have a look at this example Demo
I have been using w2ui grid for displaying information in a table. It has worked great, but I did not particularly like how the table looks. So I was looking to style it. Is there a way to style the table without directly editing the css for w2ui?
As mentionned by TheUknown, I believe that it is more convenient to simply write As mentionned by TheUknown, I believe that it is more convenient to simply write your css rules.
But you can also use the 'style' common property on many elements such as your grid, columns or records.
See this example :
jsfiddle link
$('#myGrid').w2grid({
name : 'myGrid',
columns: [
{ field: 'fname', caption: 'First Name', size: '30%', style : 'border: 1px solid blue' },
{ field: 'lname', caption: 'Last Name', size: '30%', style : 'font-weight: bold' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' },
],
records: [
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe#gmail.com', sdate: '4/3/2012', style : 'border: 1px solid green' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe#gmail.com', sdate: '4/3/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe#gmail.com', sdate: '4/3/2012' }
],
style : 'border: 1px solid red'
});
You can add class onRender event or onRefresh event. This apply for w2ui widgets: layout, grid, toolbar, sidebar, tabs, form.
$('#myGrid').w2grid({
name : 'myGrid',
columns: [
{ ... },
],
records: [
{ ... }
],
onRender: function(event) {
event.onComplete = function() {
$('[name="myGrid"]').addClass('grid-custom');
}
},
});
This is an old question, but still somewhat relevant since this library is still being used by a lot of people.
My solution to this was to create a separate stylesheet called "w2ui-overrides.css" and then override the classes that are defined in the supplied w2ui stylesheet.
For instance, the default border style for the sidebar context menu is
.w2ui-overlay > div {
border-radius: 4px;
position: relative;
border: 3px solid #777777;
}
But I didn't care for that, so I added this to my overrides css:
.w2ui-overlay > div {
border-radius: 2px;
border: 1px solid #777;
}
And so on, for all of the styles I wanted to change. I use the Chrome developer tools to find the class names and selectors that I need to override.
I'm using Exjts 4 and i want to change the button text color. Here is my code:
{
xtype: 'button',
text: 'My Button',
style:{
color: 'red'
}
}
In case someone needs it. I do not know if it's a dirty solution but it works
{
xtype: 'button',
text: '<div style="color: red">My Button</div>',
}
Davor Zubak shed light on a solution although it failed in my complex application. I achieved what I want by this:
Button's cls: 'myButton'
In my css file, define:
.myButton .x-btn-inner {
color: red;
font-family: Georgia;
font-size: large;
font-weight: bold;
}
This way it only overrides the ExtJS theme for the particular buttons who have 'myButton' cls.
There is some strange behavior in Extjs 4.2.0, but there is an override possible. Give your button a class using cls:'yourClassName' property and then in CSS make a full path to span holding the text, like so: .yourClassName div a span. Also give your css property a !important value to successfuly override base class.
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
},
cls: 'foo'
});
and in css simply:
.foo div a span
{
color:#ff0000 !important;
}
Here is a example.