I see that the Sublime Text theme (.config/sublime-text-2/Packages/Theme - Default/Default.sublime-theme) can be edited to make the open tab more obvious.
For that I use
{
"class": "tab_control", "attributes": ["selected", "file_medium_dark"],
"tint_modifier": [0, 255, 0, 32]
/* ... */
},
which makes the tab greener.
Is there a similar method for colouring the tab of an edited (unsaved) file/buffer?
Thanks.
After a little hunting around together with Mikko's suggestion of looking at the change log:
In Settings-User opened from Preferences | Settings add in the line
"highlight_modified_tabs": true,
This will make the tab text orange whenever there are unsaved changes to a file.
To change the color from orange, a bit of further digging around and experimentation was needed and revealed that editing the theme was one way to change the color from orange.
Theme files can be located in in the Color Scheme - Default folder accessed from the menu Preferences | Browse Packages... - you will have to make these changes for every theme that you'd like to change the text color for:
{
"class": "tab_control", "attributes": ["selected", "file_medium_dark"],
"tint_modifier": [0, 255, 0, 40],
"layer2.texture": "Theme - Default/medium_dark_selected_tab_bg.png",
"layer2.opacity": 0.7
},
{
"class": "tab_control", "attributes": ["dirty", "file_medium_dark"],
"tint_modifier": [255, 0, 0, 40],
"layer2.texture": "Theme - Default/medium_dark_selected_tab_bg.png",
"layer2.opacity": 0.7
},
{
"class": "tab_control", "attributes": ["selected", "dirty", "file_medium_dark"],
"tint_modifier": [255, 255, 0, 40],
"layer2.texture": "Theme - Default/medium_dark_selected_tab_bg.png",
"layer2.opacity": 0.7
},
It would be nice to be control the behavior of "selected" and "dirty" (=modified) separately. That might be possible with the layers, but I don't understand those well enough yet.
Addenda
(1) The above is for dark themes. For a light theme, omit the "file_medium_dark" from the attributes.
(2) The same changes apear to work in Sublime Text 3 (~/.config/sublime-text-3/Packages/Default.sublime-theme).
This is the best solution I have found:
https://coderwall.com/p/jg4kog
Inside of Sublime Text go to Preferences > Browse packages
Navigate to the User folder.
There you create a file called Default.sublime-theme
Open that file in Sublime Text and copy and paste the following JSON
object:
[{
"class": "tab_control",
"attributes": ["selected", "file_medium_dark"],
"tint_modifier": [255, 255, 255, 80]
}]
I had the same problem, and found what for me is a great solution. I replaced the graphics icons used on the tabs to make dirty tabs much more visible.
Replacing the dirty_circle, dirty_circle_light, and dirty_indicator graphics does the trick.
The details, along with some nice graphics, can be found here:
http://www.sublimetext.com/forum/viewtopic.php?f=3&t=5630
Related
I was successful at modifying the sidebar_container and tabset_control of Material Theme except the status bar. It is a bit too big for me and I want to adjust the height of it like Piatto's (also the width/height of button if possible).
Material Theme: (modified, except status bar)
Piatto Dark Theme:
How do I set height/width of the status bar? (and also buttons on it, if possible)
You can try add the following code to your .sublime-theme file. Modify the values in the "content_margin" to adjust the height.
{
"class": "status_bar",
"content_margin": [0, 0, 0, 0]
},
{
"class": "status_button",
"content_margin": [0, 0, 0, 0],
"min_size": [75, 0]
}
Or add the following in the user setting:
"material_theme_small_statusbar": true
Issue: Connector paint style gradients don't always gradient.
I am creating connections between a few HTML elements on my page. To look nice, I'm aiming to have the connection lines painted as a gradient, starting with the source point being the color of the source object's background color, and the target point being the color of the target object's background color. It's working well, but not for each connection, which is strange.
This code creates the connections, it's wrapped in a function so I can call it with each "$(object).each" iteration.
Here is the full function:
createConnection = (source_id, target_id, source_color, target_color) =>
console.log "source color : "+ source_color + " | target color : " + target_color
jsPlumb.connect({
source: source_id,
target: target_id,
anchors:["Bottom", "Top"],
connector: ["Bezier", { curviness: 60 }],
endpointStyles:[
{ fillStyle: source_color },
{ fillStyle: target_color },
],
paintStyle: {
gradient: { stops: [
[ 0, source_color ],
[ 1, target_color ]
] },
strokeStyle: "#fff",
lineWidth: 13
},
endpoint: ["Dot", { radius: 10 }],
});
(Code is written in CoffeeScript, btw)
The gradients work well in certain scenarios, but not all. Let me show you:
Here we have a scenario where each object has one child. This is where none of them work:
Console output from this:
source color : rgb(30, 47, 109) | target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150) | target color : rgb(51, 185, 191)
source color : rgb(51, 185, 191) | target color : rgb(70, 173, 125)
Notice the endpoints are working correctly, just not the connection lines.
Here is where I added an object, you can see that some of the gradients do work perfectly, some work partially, and some don't work at all. here:
Here is the console output:
(2) source color : rgb(30, 47, 109) | target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150) | target color : rgb(51, 185, 191)
source color : rgb(51, 185, 191) | target color : rgb(70, 173, 125)
The (2) shows us that the first two connections use the same colors, both worked. In this example, only the last connector didn't work.
Here is another example, with another child added to "Hyperproduct X".
Console output:
(2) source color : rgb(30, 47, 109) | target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150) | target color : rgb(51, 185, 191)
(2) source color : rgb(51, 185, 191) | target color : rgb(70, 173, 125)
In this last image, you'll notice that all of the connectors are painted correctly.
This is so weird! Why don't they work for all configurations?
Thanks in advance for any guidance or help.
I'm using the Soda Dark UI theme for Sublime Text 3 and I'd like to increae the left margin within the pane. It looks too tight, to me.
What class(s) is used to define that margin?
The class you are looking for is sidebar_container and the property is content_margin.
I see in your screenshot that you already know what file you need to look in, but maybe is usefulf for other users to know that you can create a file called Soda Dark 3.sublime-theme inside Packages/User for your overrides with the following content:
[
// Soda Dark 3 theme overrides
// Sidebar container
{
"class": "sidebar_container",
"content_margin": [10, 0, 1, 0]
}
]
The value of content_margin has the following syntax so in this case you need to change the first value for the left margin value you want:
[left, top, right, bottom]
I am showing multiple Meter Gauges on a single page, in conjunction with Bootstrap, to provide responsiveness. What is obvious is they are all calculating slightly different sizes, so I hoped to use diameter.
Here is my working code:
s1 = [322];
$.jqplot('spend',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
intervalOuterRadius: 56,
ringColor: '#222',
padding: 3,
tickColor: '#111',
ringWidth: 4,
needleThickness: 11,
shadowOffset: 10,
label: "£"
}
},
title: 'Spend'
});
If I add
diameter:200,
I get no output, and:
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
I have also tried
diameter:50,
and
diameter:500,
in case I was not providing adequate space, or too much space, but I rather doubt it, as intervalOuterRadius is set at 56, I have also assumed that
diameter:200
is correct syntax given that
intervalOuterRadius:56
(as well as various other values) is correct. I cannot find anyone else who has had this problem, and have had no response on the jqplot google group.
Oh yeah, and I'm primarily writing for IE8 atm but it will need to be used on ie11 in time.
I set the font size of tab_labels bigger in default theme,so i edit the theme package like this
{
"class": "tab_label",
"fg": [0, 0, 0, 255],
"shadow_color": [255, 255, 255, 80],
"shadow_offset": [0, 1],
"font.italic": false,
"font.size": 17.0 <---what i insert
},
but unfortunately I can only see the half part of the characters in labels now(only upper part because font seems too big)
(so sorry I dont have enough rep to post image),how can I fix that problem.
Unfortunately this isn't possible as far as I know of.
You can set the tab_height to a larger value, but it still cuts off the text:
http://wes.io/Qzm0/content
There is a thread about this on the sublime forum:
http://www.sublimetext.com/forum/viewtopic.php?f=3&t=8889