Jacki
Jacki

Reputation: 672

visual studio code import custom css and js extension

I'd like to install custom styles in order to have different fonts for classes and attributes in visual studio code.

I installed the Custom CSS and JS Loader extension, and followed the guide but it doesn't seem to work.

Here's what I've tried. I created a file styles.css where I put this code:

.mtk1,
.mtk2,
.mtk8,
.mtk9,
.mtk10,
.mtk12,
.mtk11,
.mtk7,
.mtk3,
.mtk13,
.mtk16 {
  margin-left: 1px;
  font-family: "Indie Flower";
  font-size: 1em;

}

.mtk7,
.mtk4 {
  font-family: "Arial";
  font-size: 0.7em;
}

/*
For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
  font-family: "Indie Flower";
  font-size: 1.3em;
}

.tabs-container .monaco-icon-label-description-container .label-name,
.sidebar .monaco-icon-label-description-container .label-name,
.quick-open-row .monaco-icon-label-description-container .label-name {
  font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
  font-size: 1em;
}

Then in settings.json I added the following settings:

{
  "vscode_custom_css.imports": ["file:///home/mat/vscode_extensions/styles.css"],
  "vscode_custom_css.policy": true
}

I took the path by typing inside this directory pwd, so it should be correct path. However, it still doesn't want to apply styles, neither fontFamily nor fontSize.

Does anyone knows where the problem is?

Upvotes: 3

Views: 14530

Answers (3)

Ekaagr Chaudharee
Ekaagr Chaudharee

Reputation: 1

This is a very good css configuration for the above mentioned extension.

PS: Make sure to update the font names in the below mentioned code.

/* --------------------------------------------------------------------------- */
/* activitybar-icon-extension */
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) {
 font-size: var(--font-size-m);
 opacity: 0.50;
}

/* activitybar-icon-inbuilt */
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.codicon {
 font-size: var(--font-size-m);
 opacity: 0.50;
}

/* --------------------------------------------------------------------------- */
/* widget-find */
.monaco-findInput .monaco-inputbox {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.search-view .query-details.more h4 {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.monaco-editor .find-widget .monaco-findInput .input {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.monaco-editor .find-widget > .find-part {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

/* --------------------------------------------------------------------------- */
/* list-text */
.monaco-highlighted-label {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

/* list-line-height-compensate */
.monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row {
 transform: scale(1, 1);
}

/* --------------------------------------------------------------------------- */
/* explorer */
.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows span {
 font-size: var(--font-size-m);
}

.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows {
 margin-left: -12px;
}

.monaco-list-row[aria-expanded] {
 opacity: 0.5;
}

.monaco-list-row[aria-expanded=true] {
 font-weight: bold;
}

.monaco-list-row.selected {
 font-weight: bold;
}

/* --------------------------------------------------------------------------- */
/* sidebar-1-header */
.monaco-workbench .part.sidebar > .title > .title-label h2 {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* sidebar-2-header */
.monaco-action-bar .action-label {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* sidebar-3-header */
.monaco-pane-view .pane > .pane-header h3.title {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* tab */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a,
.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
}

/* --------------------------------------------------------------------------- */
/* statusbar-text */
.monaco-workbench .part.statusbar {
 font-family: var(--font-type-n);
 font-size: var(--font-size-n);
}

/* statusbar-icon */
.monaco-workbench .part.statusbar > .items-container > .statusbar-item span.codicon {
 font-size: var(--font-size-n);
}

/* --------------------------------------------------------------------------- */
/* z */
.mac {
 --monaco-monospace-font: var(--font-type-n);
 font-family: var(--font-type-n);
 font-size: var(--font-size-n);
}

/* --------------------------------------------------------------------------- */
:root {
 --font-size-l: 27.50px;
 --font-size-m: 22.00px;
 --font-size-n: 16.50px;
 --font-type-l: 'HarayKrsna-Extrabold-Ultra-Condensed', monospace;
 --font-type-m: 'HarayKrsna-Ultra-Condensed', monospace;
 --font-type-n: 'HarayKrsna-Extralight-Ultra-Condensed', monospace;
}

/* --------------------------------------------------------------------------- */
/* fixes border */
.monaco-workbench .part > .composite.title {
 border-bottom: 1px solid #808080FF;
}

Upvotes: 0

adrian
adrian

Reputation: 317

Extension didn't work for me but For what it's worth....while i was messing with this...if you go to the help menu, toggle the Developer Tools.... It will Check the network tab > you will see there is one css file that vscode loads up.

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

I went into this file and directly edited the css directly...

since i already had a css file that i intended to use with this extension...

@import url("file:///Users/adrian/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to by with a different font-family then the attributes. After some trial and error, this did it. Mileage may very depending on whether or not vscode is changing these classes all the time.

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}

Upvotes: 8

Skjal
Skjal

Reputation: 128

You have to run VSCode as Administrator and then Enable CSS in JS.

Example path to VSCode located in Applications: sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron

And don't forget to install all those custom fonts to your Mac device.

Upvotes: 2

Related Questions