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.
Related
I have read this document https://www.tiny.cloud/docs/advanced/creating-custom-notifications/ but i have not found where i can change the text color, icon color, background color. Currently the background and text are so light that users cannot read anything in the notification box, so i need to make some changes. But i have not been successfull.
First I added this code to my site css. (it is what i see in the console)
.tox .tox-notification--info {
background-color: #d2cbcb; /* off white */
border-color: #000000;
color: #000000;
}
.tox .tox-notification--info p {
color: #000000;
}
.tox .tox-notification--info svg {
fill: #000000;
}
And no effect even after hard cache clear. Then i put that same code in a custom css file and used the tinymce content_css: like so
content_css: 'sbc_custom.css',
if found the file but still no change. I can change the values in the console only. How do i get the css to work? (i am using TinyMCE version 5)
The proper way is to build a custom skin either by building it yourself as outlined in the docs, or use the TinyMCE 5 skin tool. The TinyMCE styles are written in LESS and you basically modify variables to customize the look and feel of TinyMCE. To style the notifications, the following variables are available to you.
If you're using the skin tool, switch to the advanced mode and copy & paste the following into #notification-warn-background-color: red; at the end of the existing variables which should turn the yellow notification red in the preview.
I'm developing an application using Bootstrap 3. I use Sass/SCSS to customize the Bootstrap variables neatly.
I'm currently styling the "tabs" component and I can't seem to figure out if there is a specific variable that controls its text color, or if it's been inherited from somewhere else.
What's a good way to determine the "source" of a CSS rule that comes from Bootstrap? I use Chrome on OSX.
I just inspected the tab on the bootstrap site and searched for the .nav-tabs class in the bootstrap scss files. So in the _navs.scss file, search for "tabs" and you'll see the variables.
It looks like $nav-tabs-active-link-hover-color might be what you're looking for - it's the active tab's text color. The anchors in the non-active tabs appear to be default anchor tag color.
You can find that variable in the _variables.scss file. The variables are usually named according to the component that uses them (i.e. $nav-tabs-active-<whatever>).
// Active state, and its :hover to override normal :hover
&.active > a {
&,
&:hover,
&:focus {
color: $nav-tabs-active-link-hover-color; // ****** here
background-color: $nav-tabs-active-link-hover-bg;
border: 1px solid $nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}
I would like to change the colour of comments in the Atom editor. From a bit of googling, I found I can put the following in my .atom/styles.less file:
atom-text-editor::shadow .comment {
color: #ffffaa;
}
That's great - now I have bright yellow comments that demand to be noticed rather than fading into the background. The trouble is that it now looks like the below
As you can see, the text colour of the comments has changed, but the comment delimiters and links within comments remain in the default almost-invisible-grey, which looks a bit silly.
My questions are (1) how can I change the colour of these items, and more importantly (2) where can I look up how to change the colour of these items?
Please note that I am not a web programmer and know nothing of CSS or any related technologies. I am therefore looking for a fairly step-by-step solution, in contrast to solutions found, for example, in the answers to this question, which assume a substantial amount of background in the inner workings of this stuff.
Using 1.14.4:
// This styles comment text
atom-text-editor .syntax--comment {
color: #53FFA1;
}
// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
color: #008C3F;
}
To find out the CSS classes of any element you want to style, follow these steps in the editor:
Use your cursor to highlight the element you want to inspect. I'm following your example of a double slash (i.e. a comment) here.
Press Ctrl+Alt+Shift+P (or Cmd+Alt+P on OS X). A pop-up will tell you all classes of that element. Usually, it's the last line of that notification that is of interest for us. For //, it is comment.line.double-slash.js.
Disregard the last dot and everything following it, since keeping it would apply your changes to a specific file type only (js in this case). Now prepend a dot. The remaining string is the element we want to style: .comment.line.double-slash.
Open the .atom/styles.less by opening the command pallette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on OSX) and searching for "Application: Open Your Stylesheet".
Append these lines to .atom/styles.less, if not already present:
atom-text-editor::shadow {
// custom comment styling goes here
}
Inside the brackets you can place CSS/LESS code for any element you want to customize.
atom-text-editor::shadow {
.comment.line.double-slash {
color: #ffffaa;
}
}
Additional advice: you can enumerate element identifiers as a comma-and-space-separated list, if the same changes should apply to them. So if you want to make links the same color as comments, there are two possibilities:
.comment.line.double-slash {
color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
color: #ffffaa;
}
or
.comment.line.double-slash, .markup.underline.link.hyperlink {
color: #ffffaa;
}
With long class names as they are used here, I'd prefer the first option for readability. But that's up to your choice.
The syntax is changed in 1.14.
Now, you need to use this for changing the comment color
atom-text-editor .syntax--comment {
color: #228B22;
}
An update to #Hexaholic's now out-dated answer:
Find the CSS class of the element you want to style
Launch the Developer Tools window using Ctrl+Shift+i (Windows; command: window:toggle-dev-tools)
Activate the Element Inspector (Ctrl+Shift+C from within the developer tools window, or click the cursor icon)
Hover over the element you wish to style
Identify the appropriate style name: each style name begins with a dot and proceeds to the next dot. This example applies the styles .syntax--comment, .syntax--block and .syntax--bibtex.
Apply custom CSS
Open the custom stylesheet .atom/styles.less ("Application: Open Your Stylesheet" in the command finder (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P, OSX)
Enter the appropriate CSS. For example, to colour all comments:
atom-text-editor .syntax--comment {
color: #ffffaa;
}
Or to colour all comments also tagged as bibtex:
atom-text-editor .syntax--comment.syntax--bibtex {
color: #ffffaa;
}
As usual with CSS, more specific comments (as the latter) will override more general classes (as the former).
Further reading
Atom's guide to Further Customization
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:
Is it possible in Atom-editor to configure the styles that would function parameter has right color inside the function? See below
function greeting(hello (hello is red color)) {
// body...
console.log(hello (hello should be red color, now is it grey) );
}
greeting("HELLO JACK!")
My JavaScript parameters show up grey, but regardless this method should work.
Open Atom to the JavaScript file you want to change colors in
Press Ctrl+Shift+I (Command key if on Mac) to open Developer tools.
Click somewhere inside the Dev tools, then press Ctrl+Shift+C to toggle the 'element select' tool.
Select the element you would like to change the color of (you're hello inside console.log())
Looking at the DOM tree in the dev tools, you can see the classes are meta arguments js.
Open the styles.less file in the root of your Atom directory (where all the application files are)
Apply the red color CSS rule to the element of that class:
atom-text-editor::shadow .meta.arguments.js {
color: #e06c75;
}
You will have to add these two lines to make sure the parentheses stay gray:
atom-text-editor::shadow .punctuation.definition.arguments.begin.bracket.round.js {
color: #abb2bf;
}
atom-text-editor::shadow .punctuation.definition.arguments.end.bracket.round.js {
color: #abb2bf;
}
Then save the file, and your syntax highlighting should update. If not, press Ctrl+Alt+R to reload the window.