Sublime Forum

Change popup and phantom styles in Emmet 2 plugin

#1

I was trying to change the popup and phantom styles (font-size, font-family and background-color) for the new Emmet plugin. I opened an issue asking to the author and Sergey added an option to overwrite styles directly in the emmet settings. With this option you can’t change the font-family and if you change your color-scheme you need to change that setting to match your new cs.

Sergey review and said he was following the recommendations from the documentation:

Plugins that use minihtml are encouraged to set a unique id attribute on the <body> tag of generated HTML to allow color schemes to override default plugin styles.

I tried changes in my color scheme but I was able to change only background-color of the popup not the phantom.(font-family didn’t work)

According to this you require escapes. It is correct? because I have tried with escapes and without and it doesn’t works.

I have the following content in my .sublime-color-scheme file

   "globals":
    {
        "popup_css": "#emmet-preview-popup {background-color:color(var(--background));font-size:28px;font-family:Operator Mono Book}",
          // "popup_css": "#emmet-preview-popup .markup-preview{background-color:color(var(--background));font-size:28px;font-family:Operator Mono Book}",
        "phantom_css": "#emmet-preview-phantom{background-color:color(var(--background));font-size:28px;font-family:\"Operator Mono Book\"}",
    },

With this settings:

  • the font-size of the phantom changes but the font-size of the popup doesn’t.
  • the background-color of the popup changes but the background-color of the popup doesn’t.
  • the font-family doesn’t change in neither case. I have tried with and without escapes for the font-family and with other monospaced fonts

I think this is the file of the emmet plugin that have the css styles (lines 561…594)

Thanks for your help

0 Likes
#2

The .sublime-color-scheme format is derived from JSON, so for escaped qoutes, I think you need to escape the backslash itself too: font-family:\\\"Operator Mono Book\\\". Maybe that works for the font-family then.

However, I’ve experienced override styles not working in popup_css and phantom_css earlier, when the same attribute is set in the plugin’s code as well. That seems to be the case here with font-size, because it’s used in the emmet popup CSS too. I’ve filed a bug report at https://github.com/sublimehq/sublime_text/issues/2935 a while ago.

Also maybe it’s necessary to target the used CSS class here? (I’m not sure how the CSS specifity is evaluated in minihtml). #emmet-preview-popup .markup-preview {...}

0 Likes
#3

Hi, thanks four your answer.

I have tried in the .sublime-color-schme and Emmet.sublime-settings files and in neither case did it work:

"popup_css": "#emmet-preview-popup{font-family:\\\"Operator Mono Book\\\"}",

and

"popup_css": "#emmet-preview-popup .markup-preview{font-family:\\\"Operator Mono Book\\\"}",

About the specificity I changed the background with #emmet-preview-popup .markup-preview and #emmet-preview-popup and it worked in both ways.

I have color schemes in the .tmTheme format and I have rules changing the font to Operator Mono, for example I changed the font of the popup that show the scopes:

#show-scope a{font-family:"Operator Mono Book"}

0 Likes
#4

Interesting. It surprises me that you are able to change the font for the show-scope link popup, because a value for font-family is already set for it in the plugin’s CSS. According to my linked bug report this will prevent overrides for it in "popup_css" to take effect. Indeed I cannot change the font when I try it myself, maybe it behaves different in .tmTheme color schemes, because I tried it from a .sublime-color-scheme…? Does it mean that you are also able to change the font-size for the show-scope link?

Actually I don’t understand why it wouldn’t work for the emmet plugin then, because there is no font-family set in its plugin code at all. Very strange.

I’ve also tried a quoted font name in .sublime-color-scheme with another popup, and contrary to what I wrote before, the multiple backslashes don’t seem to be necessary, so only \" as you tried first should work in that file format.

0 Likes
#5

Indeed I cannot change the font when I try it myself, maybe it behaves different in .tmTheme color schemes, because I tried it from a .sublime-color-scheme …? Does it mean that you are also able to change the font-size for the show-scope link?

I am sorry, I just remembered that I modified the css rules in the symbol.py file in order to be able to modify the font-family and the font-size.

0 Likes
#6

Actually I don’t understand why it wouldn’t work for the emmet plugin then, because there is no font-family set in its plugin code at all. Very strange.

I extracted the Emmet package and tried setting the font directly in the file abbreviation.py and it doesn’t work:

 <body id="emmet-preview-phantom">
        <style>
            body {

            font-family: "Operator Mono Book"
               
            }

            .error { color: red }
            %s
        </style>
        <div class="main">%s</div>
    </body>
0 Likes