Styling the find/replace panel


#1

I’m using a font in my editor which for some reason doesn’t scale very well. This is fine for the editor, but atom uses the font in the find/replace panel and makes it look horrible.

Is it possible to override the style with my stylesheet? I’ve tried various things, but nothing seems to work - I think it’s because the panel seems to have it’s own stylesheet separate from the main window?


#2

Yes, the entire UI is HTML. If you open Atom in Dev Mode (using atom --dev), you can right-click any UI element and select “Inspect Element”, just like in your web browser.


#3

That’s what I’ve already tried, but the elements don’t seem to get the styles in my stylesheet applied to them.

For example, the text field for entering a search term is contained in elements with classes “editor–private”, “mini”, “scroll-view”, “editor-contents–private”, “input-block”, “input-block-item”, etc. but applying extra styles to those classes doesn’t work (even when adding !important).

There is also no element with an id that I can find.


#4

You’ll have to share what you’re trying to do. I haven’t had any problem editing my find and replace box.

This bit of styling turns the bottom section bright green:

atom-panel-container.bottom atom-panel {
    background-color: green;
}

In order to touch the text inside the Find and Replace boxes, we just do this:

atom-panel-container.bottom atom-text-editor::shadow div.line {
     font-size: 200%;
}

You probably want to style the placeholder too, so that selector needs to be modified.

atom-panel-container.bottom atom-text-editor::shadow div.line, atom-panel-container.bottom atom-text-editor::shadow div.placeholder-text {
    font-size: 200%;
}

And there we go. Pretty cool, except that those selectors are nigh unreadable. Good thing we’re working in LESS, so we can just do a little nesting…

atom-panel-container.bottom atom-panel {
    background-color: green;

    atom-text-editor::shadow {
        div.line, div.placeholder-text {
            font-size: 200%;
        }
    }
}

Piece of cake.


#5

I think it was the “::shadow” that I was missing.

It’s looking much better now… Thank you! :grin:


#6

No problem. :slight_smile: