I added className fc-selected to [any selected day] which took care of my background colour changes for that selected cell. Thinking that I was home free and only needed to change color for the text next, I forcefully removed a few locks of hair when, only way later, did I realize that the date events are not even in the date cell but absolutely positioned above and outside of it.
How can I target the DOM of the events for a selected date in the calendar?
PS: Basically the background color for a date cell goes dark red on selection and I need the title text to temporarily change to white.
You can set an event's
textColor: white or #FFF
http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
You can also set eventTextColor while redering event
http://arshaw.com/fullcalendar/docs/event_rendering/eventTextColor/
Actually, I tried many times and any variations of textColor or eventTextColor didn't worked at all. So, I tried changing color attributes manually;
.portlet.calendar .fc-event .fc-time {
color: white;
}
.portlet.calendar .fc-event .fc-title {
color: white;
}
By using simple javascript like this you can also set font-color of fullcalendar;
var colorStyle = document.getElementsByClassName('fc-title');
for (var i=0; i<colorStyle.length; i++) {
colorStyle[i].style.color = 'white';
}
Related
I'm using vis.js timeline and I'm trying to find a way to mark workhours (give them a different background). Using the backgrundareas with groups example I have managed to get my workhours colored for specific dates.
I do not want to use the standard blue color for background, so in order to avoid this I add a class workhours. Then I can set my custom color, but then the borders of the cells are hidden unless I also set a opacity less than 1.
I have a color scheme which I'm using, so setting opacity changes the color and my workhours does not look the same in the whole application.
I'm using this code
.vis-item.vis-background.workhours {
background: ##AFD9FE;
opacity: 0.75;
}
and where filterFromdate is my start date, durationDay is numbers of days in my timeline and startHour and endHour defines my working hours
for (i=0; i<durationDays; i++) {
items.add([
{
id: "W"+i,
start: moment(filterFromdate).add(i, 'days').hour(startHour).valueOf(),
end: moment(filterFromdate).add(i, 'days').hour(dayEndHour).valueOf(),
className : 'workhours',
type: "background"
}
]);
}
this give me
Can anyone tell me how to either get my class workhours to behave like a standard vis background class (like vis-today)?
or if there is another approach to handle background on specific hours (or days)?
Thanks to Issue 3773 I reliased that I could set the z-index, which did the trick.
So my css ended up being
.vis-item.vis-background.workhours {
background: #AFD9FE;
z-index: -1;
}
I'm using QTableView class in my GUI and I would like the selected row to have the same color whether the TableView is active or inactive.
I tried to set this CSS stylesheet to achieve this:
QTableView:!active {
selection-background-color: palette(Highlight);
selection-color: palette(HighlightedText)
}
On Linux, it works just fine, but on Windows 7, when the TableView loses its focus, the text turns black instead of staying white (the background stays blue, so that part is OK). Am I missing something here ?
You also have to style text color, for example just add:
QTableView:!active {
...
selection-color: white;
}
This works well in python
pal = tbl_list.palette()
pal.setColor(QPalette.Inactive, QPalette.Highlight, pal.color(QPalette.Active, QPalette.Highlight))
tbl_list.setPalette(pal)
I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!
I'd like an option with the TinyMCE color picker to choose transparent as the color so a character (a "bullet") will still be there and take up space but will not be visible if it's color is transparent.
There's an "X" box option that says "No color" but this seems to make the color black, not transparent.
Does anyone know how to add a transparent color option to this color picker, or even make the "X" box implement transparent instead of black?
Thanks for any ideas.
I believe I was able to do that, I did some quick tests and it appears to be working fine.
I got the latest version of TinyMCE (4.1.10_dev) to access the textcolor plugin's non minified javascript there's this instruction:
if (value == 'transparent') {
resetColor();
} else {
selectColor(value);
}
What happens here? When you choose a color it runs the selectColor, which wraps the selected text in a span with the selected color. However, when you select the no color it removes this color span (that's why it goes back to black which is the default color) instead of setting it to transparent.
So if you do this:
//if (value == 'transparent') {
// resetColor();
//} else {
selectColor(value);
//}
Instead of removing the span it will change it to 'transparent' instead.
One important thing is that tinyMCE gets the plugin scripts automatically, so it only works with the minified versions, so after you do these changes you'll have to minify the script to the plugin.min.js and put it on the textcolro plugin's folder overwriting the one there.
I hope it helps.
The × button in the colorpicker removes any custom colours, it does not add a zero-opacity colour.
As you can see when looking at the source code or trying the full example there is no support for rgba() or opacity in the included colorpicker plugin. Only rgb() and hex unfortunately.
You may need to create your own small plugin to add the ability. There are a number of alternatives, for example:
Create a CSS class which you can add to elements in the editor. Then do your colour magic in your own CSS file.
Create a new button in the toolbar which makes the element transparent.
I would personally go with option two, something like this:
tinymce.init({
selector: 'textarea',
plugins: 'nocolour',
toolbar: 'nocolour',
external_plugins: {
"nocolour": "url_to_your/nocolour.js"
}
});
And nocolour.js:
tinymce.PluginManager.add('nocolour', function(editor, url) {
// Add a button that opens a window
editor.addButton('nocolour', {
text: 'Remove Colour',
icon: false,
onclick: function() {
editor.undoManager.transact(function() {
editor.focus();
// Here is where you add code to remove the colour
editor.nodeChanged();
});
}
});
});
Rafael's solution worked for me. I just wanted to document it a bit more and show what it looks like for TinyMCE 4.1.7.
When you click the "X" in the textcolor grid the "value" variable gets "transparent," rather than a hex value from the colorMap.
The relevant code in the textcolor plugin is:
value = e.target.getAttribute('data-mce-color'); // the hex color from the colorMap square that was clicked. "transparent" if X was clicked
if (value) {
if (this.lastId) {
document.getElementById(this.lastId).setAttribute('aria-selected', false);
}
e.target.setAttribute('aria-selected', true);
this.lastId = e.target.id;
// if (value == 'transparent') { // occurs if you select the "X" square
// removeFormat(buttonCtrl.settings.format);
// buttonCtrl.hidePanel();
// return;
// }
selectColor(value);
The five lines I've commented out remove formatting for the selected text, leaving it black, which doesn't seem useful. If you wanted the text black you could select the black square in the colorMap. Falling through to selectColor(value) with value = "transparent" sets transparent as the color.
I need to use textarea in my program and I also need it to be read-only.
This is part of my main program where I create textArea:
final TextArea ta = new TextArea();
ta.setMaxSize(9*x, 7*x);
ta.setId("textarea");
ta.setTranslateX(x);
ta.setTranslateY(2*x);
ta.setDisable(true);
This is part of my css file:
#textarea {
-fx-font: 13px "Serif";
-fx-background-color: BEIGE;
}
If I delete the row: ta.setDisable(true); Css works like I want it to work. But after I set disable true, it just makes the textarea transparent, which makes the text really hard to read and the background color is not excatly what I want too.
Is there any other way to set text readonly? Or is there a way to use css after disable. I really need it to be TextArea not Label or any other type. Thank you in advance.
If you do not want the user to make changes to the textarea use the setEditable(boolean) method to false. The same method exists for most editable nodes in javafx(Textfield and PasswordField).