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:
Related
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
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 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
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.
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.