I want to change the font size for editing in brackets from the default size to 16pt.
I go to view--> theme--> edit font size to 16pt or another size, but it doesn't change.
Go to view->themes->fontsize
it works
Try the keyboard shortcut Ctrl++
I. EDITOR FONT
run brackets as admin (sudo brackets or in win right click...)
Debug -> Open preference file -> ctrl+f "size"
Save both files -> go to view--> theme and there is changed font size
II. brackets UI (menu fonts) too Small on Ubuntu 16.04 64 bit
See https://github.com/1beb/ui-too-small - it works for me.
Go to Brackets>view >then select increase or decrease font size from dropdown menu. Continue until you get the size font you want. To see your changes go to Brackets>view>themes
Like previously mentioned, you can achieve this with the ui-too-small plugin.
Personally I don't like the default settings of this plugin either but you can change the setting by editing the main.js file which you can find by navigating to:
Help > Show Extensions Folder > Navigate to user > Navigate to ui too small > open main.js
I personally like the following settings (Material Design):
define(function (require, exports, module) {
"use strict";
var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
ExtensionUtils.addEmbeddedStyleSheet("#sidebar *, #main-toolbar *, #titlebar *, #problems-panel *,"+
"#find-in-files-results *, #e4b-main-panel *, #status-bar *,"+
"#main-toolbar *, #context-menu-bar *, #codehint-menu-bar *,"+
"#quick-view-container *, #function-hint-container * { font-size: 16px !important;"+
" line-height: 30px !important; }"+
".sidebar li { min-height: 30px !important;}"+
".sidebar-selection, .filetree-selection { min-height: 30px !important; margin-top: 5px;}"+
""+".jstree-icon{margin-top:10px !important} .filetree-selection-extension{margin-top: 5px; height: 30px !important;} .jstree-rename-input{ margin-top: 2px !important; height: 30px !important; padding-bottom: 0px !important;} "
);
});
View -> Theme -> Font-size: '24px'.
If you don't write px at the end, it will not accept.
Good luck!
Related
I'm building a website using Contact Form 7 for WordPress and am having issues styling the select menu. Specifically, I cannot move the arrows or add padding to the dropdown so it's not so tight.
I've tried using this CSS to add spacing to the dropdown items (and some other CSS trickery) but it has no effect:
options {
padding: 20px 10px!important;
margin: 20px 10px!important;
line-height: 36px!important;
border-bottom: 10px solid tan!important;
}
Do you know if there's a way to control the styling behavior of CF7's select menu (arrow and options dropdown)?
Thank you!
Demo Website:
https://miles.birdhouse-demos.com/connect/
CSS styling for <select/> fields is very limited and does not allow you to achieve this. You will need to use a hybrid field plugin that constructs dropdowns with HTML lists that can be styled, such the Hybrid HTML Dropdown plugin, which can be styled and can be loaded on your page to convert your existing <select/> fields into hybrid ones,
<script type="text/javascript">
(function(){
let sel, hyd;
document.addEventListener('DOMContentLoaded', (e) => { //instantiate on document ready.
sel= document.querySelector('#my-select-list');
hyd = new HybridDropdown(sel,{});
})
})
</script>
Alternatively, you can install the Smart Grid-layout extension for CF7 which has a dynamic-dropdown field tag you can use instead of the CF7's default dropdown, and has as the option to display as a Hybrid Dropdown field for you.
Try this
It's possible to customize the dropdown arrow with this code:
select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 2px;
}
Here is a list about what you can do with this code:
Remove completely the arrow, to do so, simply remove this line: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
Customize the arrow size. You need to add the following line to the code given above: background-size: 30px 30px;
You can change the value in px.
Change the arrow, to do so, replace the URL in the following line of code: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you have any questions, let me know.
Thanks.
Credit: Kevin - From: https://www.jotform.com/answers/2449062-how-can-i-remove-modify-change-the-dropdown-arrow-using-css
I want to create custom css unit, that I'll be able to use in sass with node.js. Is there any guide about creating sass plugin for this? Just for example, I want to create unit "dpx", that will work as double pixel, so "width: 20dpx" will be processed to "width: 40px".
Other solution (not sass plugin), that can work with node is also acceptable.
Use a SASS function that accepts a font-size and returns the value doubled.
#function dpx($size) {
#return $size * 2;
}
div {
font-size: dpx(20px); // output: font-size: 40px;
}
As a simplified version of the current answer, you could also write the following:
$d: 2px;
div { font-size: 20*$d; }
I know this is an old question, but since I found it, other people will find it too.
In such case as yours a good solution would be to make a 1rem equal to 2px.
You can do it this way:
html {
font-size: 2px;
}
now each 1rem will be equal to 2px. If you want to make sure this doesn't break your current page, you can always add
body {
font-size: 8rem;
}
to set the global font-size to 16px (just a guess since this is a default value).
I'm using atom editor version 1.0 stable in ubuntu 14.04.
my question is,
How can I change the background colour of currently selected window tab...
(means current tab..)
by editing style.less file?
I tried,
.tab{ background-color:black; }
to change the tab color,
but,
this code only changed all tab colors except current tab color.
So my question is, how can I change the color of current tab in atom editor by editing style.less file?
.tab-bar .tab[data-type="TextEditor"]::after {
background-color: rgba(20,28,30,0.8);
}
I found this solution by opening developer tools Ctrl+Shift+I, and finding an element by using magnifier tool.
None of these worked for me. Here was my solution (Atom 1.22.1):
.tab-bar .tab.active[data-type$="Editor"] {
background-color: #167373;
}
You have to copy this code and paste in your styles.less file, that's it.
//My awesome tab
.tab-bar .tab.active[data-type="TextEditor"]::after {
background-color: black;
border-bottom: whiTe;
}
.tab-bar .tab.active[data-type$="Editor"] .title {
background-color: black;
z-index: 2;
}
Often I like to open multiple panes and have tabs in all of them. With multiple panes comes multiple active tabs. The other answers here will style the "active" tab in all panes, and not specifically target the tab you have selected.
The problem is selector specificity.
Here's one way to specifically target only the tab you have selected, no matter how many panes you have open:
Open your Atom command palette (on a MAC shift+cmd+p) and search for 'style'.
Select the option for 'Application: Open Your Stylesheet'.
Add this style:
.pane.active {
.tab.active {
background-color: #00BCD4;
}
}
Save the style.less sheet and see your changes!
Note: This was tested while using the Atom Material UI theme, though it shouldn't matter which theme you're using.
that's my solution for atom 1.23.1
File > Stylesheed > styles.less
.texteditor.tab.sortable.active::before, .texteditor.tab.sortable.active, .texteditor.tab.sortable.active::after {
background-image: -webkit-linear-gradient(top, #35404a, #4A7FB2);
}
a beautiful blue gradient.
On selection of tab add a class="tab active"
and below style to your style.less file
.tab.active {
background-color:black;
}
Extending this for other tab types (e.g. settings, git, search results), I'm currently enjoying:
// mine tab color customizations:
.tab-bar .tab.active {
background-color: #00593c;
}
.tab-bar .tab.active[data-type$="Editor"] {
background-color: #103a3a;
}
at style.less file
I need to provide tinymce a css file to take the styles from, but if I set in any file something like
body{
font-size: 14px;
}
it will set the webapp's body to that style and not only tinymce's input box.
How do I give tinymce a content.css file with the asset pipeline involved?
the proper format for this is to write
body.mceContentBody {
font-size: 14px;
}
or in TinyMCE 4.x (class name changed)
body.mce-content-body {
font-size: 14px;
}
and the tinymce (if using the gem) should be
<%= tinymce :content_css => asset_path('application.css')%>
Eclipse seems to be completely oblivious of EL expressions inside CSS. When I format my stylesheets, this happens:
.tooltip:hover span.info {
...
border-color: #{theme.get('borderTooltip')};
border-style: solid;
...
}
turns into
.tooltip:hover span.info {
...
border-color: #{theme.get('borderTooltip' )
}
;
border-style
:
solid
;
...
}
Is there anything I can do to prevent this and still use the formatter?
Go to the Eclipse preferences Window -> Preferences. And enter formatter into the search box on the upper left. I don't know which plugin performs the formatting in your case maybe you find the right one here and can change its configuration.