Im using the material-UI theme in Atom (MacBook Pro, 2021). I wish to make some of the UI text bigger, ex the text on tabs, menus, buttons, welcome page and so on.
(note: I don't mean the text/code in the actual editor!).
For example, I wish to make the text of these menu options larger. (print-screen from Atom):
I can't find this option in neither the atom settings, nor the material settings. I've looked at the material less-files but I don't understand them. Searched google and SO but I haven't found a solution that works for me.
Please keep in mind that I am a beginner if you have an answer!
Atom comes with a user stylesheet that one can use to override almost all parts of the UI. For example, you can add the following to increase the font-size of all DOM nodes by 120% – except the text editor itself:
html:not(atom-text-editor) {
font-size: 120% !important;
}
If you want to make more granular changes, you will need to use more specific CSS selectors. Fortunately, you can use Atom's built-in developer tools to inspect the selectors of the editor.
There is a setting in the Theme preferences - see my screenshots to locate the font size setting.
Related
I've followed this: https://nwjs.readthedocs.io/en/latest/References/Menu/#menu
The result is a very Chromium-looking menu. The items just look... nothing like how I think of Windows menu items. (Even though there are these days a million different styles of them in this FrankensteinOS...)
Is this it? I have to use whatever Chromium thinks is a good looking menu? I cannot style them with CSS or something, at least? For example, if I want them to be "dark mode" instead of bright white? I guess I could implement my own custom Canvas-based pixel-perfect menu, but that's both a ton of work and also will never feel native or quite as "responsive".
The documentation you pointed to is for using the Native OS Menu. This will be different on Linux, OSX, and Windows, and will match the native placement and interactions for that system, including keyboard navigation. Similar to how the minimize/maximize/restore/close buttons are built in and differ on each OS.
You can add your own markup and styling to create a custom menu if you like though, and it will look and act the same on every OS. Similarly, you can create your own markup and styles for the min/max/restore/close buttons, and title bar.
https://github.com/nwutils/frameless-example
If you're not confident in HTML/CSS enough to make a responsive menu yourself, you can use frameworks, like Bootstrap, which come responsive with menu styling out of the box.
https://getbootstrap.com/docs/5.0/components/navbar/
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
Getting started with Eclipse Neon.
Pleasantly surprised to see that we can now recapture nearly all wasted space from the UI with little effort.
For example, Gtk 3.20 (on Linux) streamlines scrollbars and gutters to the point where there's no longer a need to create a custom plugin to hide space-wasting elements. To hide entire toolbar row, just a click away: Window > Appearance > Hide ToolBar. Bottom status bar? Just define override attribs and import custom css file into target theme a la #import('custom_gtk.css'):
#org-eclipse-ui-trim-status,
#org-eclipse-ui-trim-vertical2,
#org-eclipse-ui-main-toolbar {
visibility: hidden;
}
There is, however, one issue I have been unable to workaround via custom css: in split editor layouts a separate top row appears with min/max buttons. The row serves no purpose since max button is not attached to any editor panel file (i.e. clicking max button does nothing). The end result is 20-30px of wasted vertical space.
Have tried various override incantations using CSS Spy, but none have worked. Would love to find a solution to this problem as out of the box space preserving VIM-like editing is nearly at hand in Neon.
Here's E4 Bugzilla tracker issue (generally not much activity there so trying SO in hopes of finding a solution or possible workarounds).
This is a bit heavy handed but does the trick. In my eclipse plugins/org.eclipse.ui.theme.../css directory I have a custom_gtk.css file with, among other overrides, the following:
CTabFolder {
swt-maximize-visible: false;
swt-minimize-visible: false
}
Hides all min/max elements and the extraenous row in which the elements are defined (if editor tabs exist then the row remains, only min/max buttons are hidden).
(Ask to answer)
For the project I'm working on we have a custom set of icons, which I converted into a font using https://glyphter.com/ (just googled this type of service and it seemed okay).
Inside one of the block I'm inserting an icon with the class from the CSS generated by the service (like you normally do with an icon font).
And suddenly the displayed icon is wrong - though the content property is okay.
Also could not find any other interfering styles which could do that.
Sorry, no code here, got no time for that. Also the project is quite restricted in terms of sharing details.
So after half a day of looking for a problem and trying different scenarios, it appeared, that the icon font generated had the same icons for the letters in both upper and lower case. And yes, the set started on the letters, not with an extended UTF-8 table (or whatever).
So the parent element had text-transform: uppercase which changed the icon without changing the content or else.
Maybe someone will find this info helpful.
I want to style some fonts in my css using the style- sharp found in Photoshop. Does anyone know the way?
Photoshop uses a custom font rendering engine which you won't be able to emulate using CSS. Furthermore, each platform has its own rendering engine which CSS cannot control.
For WebKit there is -webkit-font-smoothing but what it does is a far cry from what you're looking for.
No luck I'm afraid. The only way I know of (perhaps someone knows otherwise) to achieve this is to save the text in question as an image. Fine for headings etc., but not for body text.
The "sharpness" of a font is usually a thing of the font renderer which is part of the operating system. You should check the font settings. In Windows, for example, try turning off ClearType.
I'm afraid it's a browser/os combination that decides how your fonts are anti-aliased. Nothing you can do about it, except save the Photoshop output as an image, set it as a background for whichever container your text appears in and apply a negative text indent on it via css.
There is solution for font smoothing.
You can use cufon.js to render your font sharply & smoothly. This js renders your text as a cufon and if you right click on it it shows image. You can use this for heading.