Is there any way to have standard Windows/system native scrollbars in Sublime Text 3 or do I have to get myself used to these tiny little ones?
For me, a person with medium eyes problems, current scrollbars are just to tiny and I'm having problems, from time to time, with catching them. I heard, that eveything is configurable in Sublime Text 3, so I'd like to ask, if scrollbars can be changed as well?
As Miles Zhang suggests,
you can try some third part themes
... you can find more themes from Package Control
And you can change the size of the scroll-bars for most of them as well. Create a file in your packages directory with the same name as your theme.
I like to use Cyanide theme, so I would create a new file in (packages dir)/User/Cyanide.sublime-theme. then set the attributes you want. In this case, you want to set scroll_bar_control : content_margin.
My Cyanide.sublime-theme file looks like this:
[
{
"class": "scroll_bar_control",
"attributes": ["horizontal"],
"content_margin": [3, 4] //makes horiz scrollbar taller
},
{
"class": "scroll_bar_control",
"content_margin": [1, 3] //makes vert scrollbar taller
},
{
"class": "tab_label",
"parents": [{"class": "tab_control", "attributes": ["selected"]}],
//"fg": [30,30,30],
"fg": [255,131,0] //change highlighted tab color
}
]
Most of my info was learned here
I don't think you can change the scrollbars to system native style, but you can try some third part themes that with bright color scheme.
For example: Numix Theme. You can find more themes from Package Control.
Related
I have installed tailwind css and followed the documentation, but the intellisense works in a weird way: if I use tab to autocomplete className, then if my cursor is inside the brackets, the intellisense doesn't work, but once I click off and on again then the intellisense starts working.
I also updated settings.json and added
{
"tailwindCSS.includeLanguages": {
"typescript": "typescript",
"javascript": "javascript",
"html": "HTML"
}
"editor.inlineSuggest.enabled": true,
"emmet.triggerExpansionOnTab": true,
"tailwindCSS.emmetCompletions": true,
"editor.quickSuggestions": {
"strings": true
}
But nothing seems to help, to use intellisense I first need my caret to go outside of the quotes, and then go back inside.
Video
Here you have where I found solution,
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/392
but if you're too busy to dig in here solution is
ctrl + space in quotation marks
, it works for me.
I found this question looking for solution and I've found it so here you have.
Have fun c:.
I am using Angular SlickGrid and want to center or right-align the text in the column headers. Not all columns the same way.
I figured out, there is a headerCssClass property in the column definition, but all the way I tried, this style never seems to get applied.
For the column-definition:
{
id: 'sourceNumber',
name: 'SourceNumber',
field: 'SourceNumber',
sortable: true,
width: 150,
headerCssClass: 'text-right',
cssClass: 'text-right'
},
In the CSS file:
.text-right {
text-align: right;
}
It works fine for the cell contents. But the text in the header is still left align.
What am I doing wrong?
For aligning grid cell, I typically use the Formatters that I created for that purpose alignCenter and alignRight (see all Formatters in the Formatters - Wiki), you could also use the extra CSS class like you did.
If you keep the extra CSS class, then there's an extra float: left on the .slick-column-name class that you will probably have to cancel out and that is probably what is blocking (or cancelling) your CSS. However I must say, it's on the left for a reason, it's not ideal to move it to a different position (especially on the right) because you might conflict with the header menu & sort icons (you will for sure if you align right)
.slick-column-name {
float: none;
}
Also note that the column definition name property also accepts HTML code (it might not be documented though), but even then you will probably have to cancel the float first
this.columnDefinitions = [
{ id: 'firstName', field: 'firstName', name: '<span style="color: blue">First Name</span>' },
];
Lastly, you should also take a look at all the SASS variables (which also have CSS variable equivalent names), you can see all the variables in this _variables file, there's a lot of variables available but it doesn't seem to include any for the header alignment (we can add variables for that in the future), there's also this CSS Styling - Wiki that has info in that regard.
Please note that I'm the author of Angular-Slickgrid
If you have sorting turned on, then the issue would be the float attribute of the slick-column-name/slick-sort-indicator. It prevents the alignment.
add the following to styles.scss
.slick-column-name { float: none; }
In these demos, there are logos on the splash screens.
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
I don't know what I am doing wrong in my manifest - I have an icon but it is not showing up on my splash screen.
My manifest looks like this:
{
"short_name": "Weather Service",
"name": "Weather Service",
"icons": [
{
"src": "logo.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#FAFAFA",
"theme_color": "#512DA8"
}
Do I need more than 1 image for it to appear on the splash screen?
PWA is recommend to alway put icon at 192px as a minimum
If you want to ensure that an icon will always be displayed consider that 48dp is the minimum image size we will display, which if you take the maximum density display currently supported (4x) then 48 * 4 = 192px. This is lucky because we need to 192px image for Add to Homescreen to work! Yay. Therefore, I would recommend always having 192px as the minimum sized icon and create 3 other versions at 256px, 384px and 512px. However, if you want to ensure that the user is not downloading too much data for the splash screen, especially on a low density device then you can go lower and Chrome will try to fetch the most appropriate image.
https://developers.google.com/web/updates/2015/10/splashscreen
You can also validate your icons by using the "Add to homescreen" action under Chrome's dev tools (Application -> Manifest). This identified a 192x191px image which was causing it to fail for me.
I'm using the Brackethighlighter plugin for ST3 and am looking for the setting that controls the outline colors used when matches are found. The white is a bit much and distracts me when I can't read the wrapped lines very well. It's worse when the wrap is closer together or the tags are very long (very common in Angular).
For example:
Not that bad here, but my question is, is it possible to change the white outline to either a darker non-black background color? Or, at least, change the white to a more subdued hue?
Was able to finally figure it out with some User space preference updates and overrides:
https://gist.github.com/notbrain/058b263f145a1a0216c5
Add this to a new USER bh_core.sublime-settings:
{
"bracket_styles": {
"default": {
"icon": "dot",
// BH1's original default color for reference
// "color": "entity.name.class",
"color": "brackethighlighter.default",
"style": "highlight"
}
}
}
And add this to whatever theme you're using (or modify as you see fit). This overrides the default, but you can also just override individual styles.
<!--appended to default to work with bh_core.sublime-settings brackethighlighter.default style-->
<dict>
<key>name</key>
<string>Bracket Tag</string>
<key>scope</key>
<string>brackethighlighter.default</string>
<key>settings</key>
<dict>
<key>background</key>
<string>#351501</string>
<key>foreground</key>
<string>#D4F20D</string>
</dict>
</dict>
I not a web developer, but I use sublime text to code, and I wrote a small highlighter plugin for myself, the color and style of highlight is decided by scope and flags in "add_regions(key, [regions], , , )" which is a API from Sublime text.
I check the plugin you mentioned, if I found it correctly Brackethighlighter, it mentions that it has properties for setting color and style, you can check that out. In my experience, scope "comment" is usually a bit darker than the pure white one~
Hope it helps.
When you start a new project in Sencha Architect, it gives you this off white background (#eeeeee). Naturally, like any site or app, you can swipe higher or lower than the actual content, so this off white color shows.
I want to change this background color. I'm able to change the Containers or Panels so that isn't the problem. I also tried applying a Cls to the Viewport or using the Style or HTML config of the Viewport with no luck.
Does anyone know the Cls for this so I can override it or have any other ways to do this? It's like it's the final background behind everything.
There's one css var defined to change default background color. It's $page-bg-color.
You can find it inside nearly at bottom-
....\touch\resources\themes\stylesheets\sencha-touch\default_variables.scss
Default value is set for #eee. As it's a css var, it might have referenced in various places. So adding a class with custom background to each and every element will not be good. Better override it through scss itself.
You'd need to define your own *.scss file and compile it. In this *.scss file, you can override almost every css property. In your case, set $page-bg-color:#whatever and recompile it.
Hope you are familiar with using compass and scsss, if not then there's quick start guide on http://vimeo.com/36917216.
If you wants to use Cls means
Ext.define("VUCFyn.view.MemberHome", {
extend: 'Ext.Panel',
xtype: 'memberhome',
fullscreen:true,
config: {
cls : 'booked-seats', // inside config use like this
and You have specify the design in index.html file
.booked-seats {
background-color: #DEFCE2;
},
Try it will work .. i tried like this..