I was able to change color of comment content with
atom-text-editor::shadow .comment {
color: #E4F4FD;
}
But the color of comment marker stayed unchanged:
How do I change the color of comment marker?
If you place your cursor immediately to the left of the character you want to style and then press Ctrl-Alt-Shift-P all of the scopes for that character will be displayed in an information box:
You can then incorporate this into your stylesheet as you have with the body of the comment:
atom-text-editor::shadow {
.comment {
color: #E4F4FD;
}
.punctuation.definition.comment {
color: #E4F4FD;
}
}
Because it is LESS, it is possible to nest classes which will make your style sheet much cleaner.
Using ATOM version 1.58.0 on Windows 10, I get a depreciation warning. The short version is:
Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--.
I had to use:
// Change the color of the comments
atom-text-editor .syntax--comment{ color:#9DA5B3; }
atom-text-editor .syntax--punctuation.syntax--definition.syntax--comment{ color:#9DA5B3; }
Related
I'm trying to apply GTK+ 3 CSS rules to widgets used in the Eclipse UI, specifically for a ComboBox right now. For example: say I want to make the background color of a selected text in a combobox to be red. The Style rule applied to the combobox widget would be
*.entry:selected { background-color: #FF0000; }
I have proven that rule using the Gtk+ CSS Inspector tool in Ubuntu and that works there but I do not find a way to apply that rule in code for ComboBoxes.
Inside SWT, there are places where CSS is used on Linux, such as this snippet to set the background color, however, adding the above rule to the CSS override does not have any apparent impact (yes, the background color does work).
#Override
void setBackgroundColor (long /*int*/ context, long /*int*/ handle, GdkRGBA rgba) {
// CSS to be parsed for various widgets within Combo
background = rgba;
String css = "* {\n";
if (rgba != null) {
String color = display.gtk_rgba_to_css_string (rgba);
css += "background: " + color + ";\n";
}
css += "}\n";
// Cache background color
cssBackground = css;
String finalCss = display.gtk_css_create_css_color_string (cssBackground, cssForeground, SWT.BACKGROUND);
//Injected code to make selected text red
finalCss += "\n.*:selected {background-color: #FF0000}";
if (entryHandle == 0 || (style & SWT.READ_ONLY) != 0) {
// For read only Combos, we can just apply the background CSS to the GtkToggleButton.
gtk_css_provider_load_from_css (OS.gtk_widget_get_style_context(buttonHandle), finalCss);
} else {
if (OS.GTK_VERSION >= OS.VERSION(3, 16, 0)) {
// For GTK3.16+, only the GtkEntry needs to be themed.
gtk_css_provider_load_from_css (OS.gtk_widget_get_style_context(entryHandle), finalCss);
} else {
// Maintain GTK3.14- functionality
setBackgroundColorGradient (OS.gtk_widget_get_style_context (entryHandle), handle, rgba);
super.setBackgroundColor (OS.gtk_widget_get_style_context (entryHandle), entryHandle, rgba);
}
}
// Set the background color of the text of the drop down menu.
OS.g_object_set (textRenderer, OS.background_rgba, rgba, 0);
}
I’ve tried various combinations of selectors and so far have not found a way to have the “selection” background color of the text to take effect.
Here is a link to the corresponding ComboBox class from SWT where it deals with CSS -- see the setBackgroundColor method.
https://github.com/eclipse/eclipse.platform.swt/blob/master/bundles/org.eclipse.swt/Eclipse%20SWT/gtk/org/eclipse/swt/widgets/Combo.java
I have proven that code runs and also managed to change the background for the entire combobox by changing the css rule there. However, if I inject my new rule it gets ignored.
Any help would be appreciated. Thanks!
I would like to change grid color on Chartist.js from default grey. I tried to override ct-grid-color setting, but probably did something incorrectly. Can anyone please suggest how to do it?
Just insert in your CSS.
.ct-grid{ stroke: red;}
grid lines:
.ct-grids line {
color: steelblue;
}
.. and don't forget the labels! ..
grid labels:
.ct-labels span {
color: steelblue;
}
The reason why targeting only ".ct-grid" won't work is due to css specificity. Basically the more specific the css, the more important it becomes so ..
.ct-grids line { } > .ct-grids { }
If it's a little confusing, a nifty little tool is Keegan Street's css specificity calculator.
How in jquery do I get/set the title attribute of a bootstrap tooltip.
<span data-toggle="tooltip" title="a,b,c,d">Something</span>
... and ...
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('.CustomToolTip').each(function () {
alert($(this).attr('data-toggle'));
alert('[' + $(this).attr('title') + ']');
//$(this).attr('title', $(this).attr('title').replace(/,/g, ','));
});
});
and I have tried:
...
$('.CustomToolTip').on('show.bs.tooltip', function () ...
...which implies I am using the incorrect attribute or code!!??!!
In reference to Why doesn't break word work on a long string with commas? my eventual purpose is because my title has no spaces and can be quite long I need to append to the comma a non-whitespace space (char U+2008 in Unicode, or ​) (the line I have commented out). In reality the title is set in the VB.NET code-behind and is a asp.net Label control that gets rendered as a span tag and if I do a replace in the VB.NET code a funny character appears (well at least in IE) in the front-end. So I decided to do it in jQuery client side as other's have suggested however, my title attribute is blank (NB: the first alert box call shows value of "tooltip" the second is blank between the square brackets)!
For e.g. say my tooltip is a fruit list "apple,banana,cherry,date" and my max-width is a width of 11 characters then my tool tip is rendered as:
apple,banan
a,cherry,da
te
however; what I wont is:
apple,
banana,
cherry,date
i.e. it does not break in the middle of a word.
My css is:
.CustomToolTip + .tooltip.right > .tooltip-inner {
max-width: 400px;
background-color: #333333;
color: #bbbbbb;
word-wrap: break-word;
border-radius: 8px;
}
.CustomToolTip + .tooltip.right > .tooltip-arrow {
border-right-color: #333333;
}
Can someone please point my mistake out for me - thanks?
Get title Attribute
$('[data-toggle="tooltip"]').attr("title");
Set title Attribute
$('[data-toggle="tooltip"]').attr( "title", "New Value" );
For Reference: http://api.jquery.com/attr/
If your goal is just to convert white space, a trick is to convert them (server side) to
Or actually change the CSS of the tooltip popup.
As usual if you search hard enough you find what you are looking for. Credit goes to #yann-chabot changing the title of a popover with bootstrap and jquery and I found this useful site that is all about uni-code space characters as well https://www.cs.tut.fi/~jkorpela/chars/spaces.html.
The solution was to use the 'data-original-title' attribute and not the 'title' as follows :
...
var newTitle = $('.CustomToolTip').attr('data-original-title');
newTitle = newTitle.replace(/,/g, ',\u200A');
$('.CustomToolTip').attr('data-original-title', newTitle);
I decided to use Unicode 200A for the space character because it gave me less space!! I believe it is something to do with the font you are using and it is giving me in my case approximately 1 pixel of space after the comma, enough for the "word-wrap: break-word" css to work - hooray!
Can anyone please tell me how to hide the right arrow for the QMenu items. I tried using the stylesheet. But it didn't works.. Please Help.
MyStylesheet.qss
QMenu::right-arrow[hide="true"]
{
image: url(Resources/MenuRight.png); //am using an unavailable image so that it will return empty.
}
and in code i have set the property as,
menuItem->setProperty("hide", true);
but in the stylesheet(shown below) if i remove the dynamic property, then it is working fine. the background color of the right arrow changes to red.
QMenu::right-arrow
{
background-color: red;
}
You can use the menu-indicator property in the stylesheet of the item.
Here with a QPushButton:
QPushButton::menu-indicator{ width:0px; };
I am having a strange issue. The titles that I specify in toolbar or in Ext.Msg.alert is automatically truncated and a '...' is appended.
How to get rid of this? I want full titles in Toolbar, message boxes and everywhere else.
It's a bug in Webkit which are reported in sencha's forum that you can refer it here or here:
Use this in your css or .sass file as a solution:
.x-title{padding:0 .3em;}
.x-title .x-innerhtml{padding: 0;}
Or:
.x-title .x-innerhtml:after {
display: inline-block;
content: '';
width: 0.3em;
}
The problem is because of ellipsis property assigned to .x-title by default. You need to change that to to clip property.
Give a cls property to your config.
For example :
cls : 'textFormat',
Then in a css file :
.textFormat .x-title .x-innerhtml{
text-overflow : clip !important;
}
This code will override the existing code for the particular toolbar.