Atom text editor, command pallet transparent or move position - atom-editor

Is there Any way to make command pallet transparent or move from fixed position to bottom or right top in atom ?, since it is at exact middle of editor window unable to see exact usage of words(such as function, variables) in different files on click show usage.

Under the hood, Atom is basically a web browser, so you can use JavaScript and CSS to manipulate its look and behaviour. You can use the Developer Tools to inspect and edit an element in realtime.
Once you familiarized yourself with these tools, you can add your own styles to your user stylesheet.
Example:
atom-panel.modal {
float: left;
&:before {
opacity: 0.5;
}
}

Related

Trying forever. Can't change CSS font color

I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.

How to get dark themed addressbar search-results

I am using the Firefox Developer Edition theme on MacOS to reduce eye strain while programming.
However, results while typing in the location bar still pop up bright white.
Does anyone know of CSS to have these results use a dark background and light text?
Generally, if you are looking for an add-on which will change this, then a theme would be appropriate. At least one of the themes I use does style the URL Bar's auto-complete results. An extension could also change the styling, if desired. However, given that you are not wanting a completely different theme, just a minor modification to the Developer Edition theme, it is easier to do this yourself by applying CSS to the profile's chrome by placing the CSS in userChrome.css.
To do it for yourself, you need to determine the appropriate elements to style. As is often the case, the add-ons DOM Inspector combined with Element Inspector are quite useful in determining the appropriate elements to style. With those add-ons installed, opening the auto-complete drop-down and Shift-Right-Click results in seeing the DOM for what we want to change:
Thus, we can put the following in the profile's userChrome.css, which needs to be located in the [profile directory]/chrome directory:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
/* set default namespace to XUL */
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PopupAutoCompleteRichResult {
background-color:black !important;
-moz-border-top-colors:black !important;
-moz-border-top-colors:black !important;
-moz-border-left-colors:black !important;
-moz-border-right-colors:black !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
background-color:black !important;
}
#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
/*#PopupAutoCompleteRichResult .ac-url-text,*/
#PopupAutoCompleteRichResult .ac-action-text {
color:white;
}
This results in the URL Bar auto-complete having a black background with white text:
Ok, after doing quite a bit of Internet digging, I found probably the only solution, which also isn't really one.
As of writing this, there is no such Plugin/Add-on/Mod for changing the style of the search bar.
However, you could change the source code of Firefox itself. To do so start here: Mozilla Dev GUide. Its mainly written in C & C++. I mean, there really is no option for that.
There are settings, somewhere deep down in Firefox, where you can actually get such an add-on, I couldn't find it tho.
You can turn off the search bar completely, so you get your results on google, after hitting enter.
A thrid option would be, to try another browser. Just check, which browser allows you to style the search bar and apply all the other Dark Themes to that browser later on.
Hope, I didn't make it worse :/

Changing comment colour in Atom editor

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

Atom (editor): modify existing theme and save as a new one

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:

Function parameter style in atom editor

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.

Resources