This is what it shows in the config file:
"*":
core:
disabledPackages: [
"atom-terminal"
]
telemetryConsent: "no"
themes: [
"atom-visual-studio-code-ui"
"atom-dark-syntax"
]
editor:
fontSize: 17
"exception-reporting":
userId: "1c14e-9c52-f7ffba987750"
"platformio-ide-terminal":
core:
shell: "C:\\WINDOWS\\System32\\wsl.exe"
Also, the terminal looks like this
As you can see the blue color is barely visible. Also, I'd like to change the cursor to 'underline'.
Thanks!
Atom is built on top of the Chrome browser, you can use the built-in inspector to determine the styles of any element in the GUI. platformio-ide-terminal uses inline-styles and no "strong" CSS selectors.
Yet, you can override at least some of the styles. Use the inspector to get the selector of the element you want to change, that override the style in Atom's user stylesheet (styles.less).
Example:
.platformio-ide-terminal.terminal-view .xterm > .terminal > div > span {
color: #text-color-info !important;
}
PS: I've used what is usually the default blue of a UI theme (see ui-variables for details)
Related
I'm using FontAwesome in the app and I've not installed PrimeIcons.
So now when I'm using the PrimeNg's tree, I don't have any "chevron" displayed to open/close each item.
I cannot find a way in a documentation to override it(like a lot of their other component.
How can I replace their pi pi-fw pi-chevron-down by something like fa-solid fa-chevron-down(same for the chevron-left)?
I'm not sure how to target a CSS element to then apply another css on it?
Or did I miss a way of customizing this element?
(it's ok if it's in a global style)
Your .scss file, maybe could be better to set only related to involved components:
:host ::ng-deep {
.pi {
font-family: 'FontAwesome';
}
.pi-chevron-down:before {
content:"\f107"
}
}
in order to override other icons, please refer to fontawesome related cheatsheet
So i've opened up my Atom stylesheets which is named : styles.less and made some changes so my stylesheet now looks like :
tree-view {
background-color: #101;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
color: white;
background-color: #101;
}
// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
border-color: red;
}
I'm trying to change the colour of the panels at the top and maybe a few other things. Is there anyway I can find out the class/ID names for elements in Atom for me to style?
One way is to open atom's developer tools.
On OSX -> View - Developer - Toggle Developer Tools
Where you can inspect the elements and find what you need.
Also see How to make Developer Tools appear?
You can view the StyleGuide from the menu > Packages > StyleGuide > show
or just click , Ctrl(Command) + Shift + G ,
there you will find all the class/ID names.
I do not want to create the entire theme from the scratch.
I want to use the existing theme.
I want to make some minor style changes (like color) for a few elements.
I don't want to save the changes in the original theme but in its copy.
For example.
I've installed the Bade3 Notepad theme.
I like the notepad++'s highlighting but in find out the grey string are too light.
According to Syntax Highlighting Guide for Atom Syntax Highlighting Guide for Atom I've run Atom in Developer Mode.
I've opened file that contains some quoted string.
Right click some quoted string and select Inspect Element
In the Styles tabs I change the color value in
.string.quoted.php {
color: #8b8b8b;
}
The changes are applied to the real example code so I can adjust color.
Let's say I'm fine with #107000
Now I wish to save this changes.
You can achieve this through your personal style sheet without creating or editing a theme.
Your "stylesheet Ctrl-Shift-P and typing Application: Open Your Style Sheet.
A file will open in Atom that looks similar to this:
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow {
// Add Your Styles Here
}
In the area between atom-text-editor::shadow { (line 13) and the closing } (line 15) add you changed styles:
.string.quoted.php { color: #8b8b8b; }
Save the Stylesheet and check it is working as expected in your editor, no need to reload or restart the editor.
Note: if you have the Use Shadow DOM check box unchecked in Atom Settings, accessed through Ctrl-,, then you will need to put your styles between atom-text-editor { (line 7) and the closing } (line 10). Try and work with Atom with the Shadow DOM enabled as the option to disable it will go away in future versions.
Here is a short animation to go through the steps I took to get this to work in Atom 1.8 Beta:
I'm trying to style the title of the title label in a Spark Window Application. I think if I can find the correct CSS selector I can set it but I haven't been able to find it.
WindowedApplication {
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}
WindowedApplication > TitleBar {
fontSize: 24; /* this doesn't work */
}
Here is more info on the Spark Window Application,
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd8.html
Update:
It looks like the styles are defined inline in MacTitleBarSkin. So even if I could style them using CSS there is nothing more specific than inline styles. I tried to remove the styles in the MacTitleBarSkin but they don't seem to be removing. PS I'm using Flex 4.14RC.
The title from the WindowedApplication itself can not be changed programmatically. It is based on the OS settings.
If you do want to customize it, you will have to customize the complete application container (including close/maximize/minimize buttons).
You can achieve this by setting <systemChrome></systemChrome> to "none" in your application descriptor.
It looks like this will work but you have to copy the skins into your project and then remove the styles on the titleText label in MacTitleBarSkin:
windowChrome|MacTitleBarSkin s|Group s|Label#titleText {
fontSize: 12;
color: red;
}
See this post on how to import skins into your project.
I'm using Simple Dialog 2:
I have the dialog box below:
$('<div>').simpledialog2({
mode: 'button',
themeHeader: 'b',
headerText: 'Confirm',
headerClose: true,
buttonPrompt: message,
buttons : {
'OK': {
click: function () {
$.mobile.changePage(url, {changeHash: false});
}
},
'Cancel': {
click: function () {
},
icon: "delete",
theme: "c"
}
}
})
Screenshot:
I want to text-align the message to left and have some space from left and right side of the button. How can I achieve it?
Thanks.
you can use Firebug or another developer tool to examine the CSS to manipulate...
see docu
Overriding themes
The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it's easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.