I have problems with the use of ! in my CSS code.
If I take the example in the Emmet documentation :
p!+m10e!
Should produce:
padding: !important;
margin: 10em !important;
On my side, it doesn't work. p!+m10e works, but p!+m10e! does not. The final exclamation point seems to be a problem.
I did another test with dn! to display display: none !important;, the problem is the same.
Do you have an idea?
Enabling Trigger Expansion on Tab seems to have solved the problem on my machine.
The solution lies in disabling text-suggestions. In fact, I think the fact that IntelliSense shows the !important and !default
when you type an exclamation mark, makes Emmet mess up.
So I disabled this:
"editor.suggest.showWords": false
If you prefer the UI, you can also find it by doing the following:
Navigate the menus: click on - File > Preferences > Settings (or
press Ctrl + ,)
Type Show Words in the search box at the top
Uncheck the setting Editor > Suggest: Show Words
A few observations, this may help future readers:
CTRL + Space forces the non-suggested(intellisense) expansion.
"emmet.triggerExpansionOnTab": true also expands non-suggested option.
If you type dn!i it will give you suggestion dn: i !important; then you delete 'i' then hit enter/tab, it expands as expected.
I think the bug https://github.com/microsoft/vscode/issues/120245 still hasn't been resolved completely. Otherwise you could've typed 'dn!important` and it would've expanded as expected.
Related
I haven't used ST for some months and I am quite certain that it used to comment/uncomment the entire CSS selector when using ctrl+shift+/ ("toggle block comment") with the cursor inside said selector, but nothing actually selected.
Is anybody aware of what could have caused this behaviour to be replaced with simply adding /* */ around the cursor?
I've tried using SCSS mode(which is what I usually use) and vanilla CSS mode.
Thank you!
There are two bindings for toggling comments, and the one you're using is the one meant for block comments when you probably mean to be using the one for line comments instead. That's not something that's been changed in recent memory.
The keys involved are different depending on platform, but for our purposes here:
Ctrl+/ is bound to toggle_comment with block set to false
Ctrl+Shift+/ is bound to toggle_comment with block set to true
Potentially confusing here is the notion that the /* */ style comments of CSS are actually block comments, which might make you think that you need the second binding.
Actually, the value of the argument controls what gets commented with whatever comment delimiters the support package for the language defines. It's possible for a language (such as C++) to define different comment delimiters for different styles, but that's not required.
When block is set to true, the commented area is the selected text, whereas when it's false it's the line the caret(s) are sitting on.
So, assuming the sample css:
body {
color: red;
}
If the cursor is sitting on the : and you use Ctrl+Shift+/, the result is the following, because the selection is wrapped but the selection is empty (which visually looks like the selection is wrapping the caret).
body {
color/**/: red;
}
On the other hand, with the cursor in the same place and using Ctrl+/ the result is:
body {
/*color: red;*/
}
What I was actually looking for was Emmet's "toggle comment" command which, in the case of CSS, toggles commenting the entire selector. I believe it's with an update to the respective package that the behaviour changed and stopped hooking into ctrl+shift+/, but I could be wrong.
I ended up adding a keyboard shortcut for said command in Preferences > Key Bindings, like so:
{
"keys": ["alt+/"],
"command": "emmet_toggle_comment"
},
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I was wondering if there's something in the extension's API of vscode that can make the command palette looks like the one from Atom ?
I like the way Atom open it in the middle of the screen and the style of it.
Can we apply a custom CSS sheet in an extension or do something to achieve that ?!
Thanks a lot !
I've had this question, too.
I've tried VS Code a number of times, but I really didn't like how the Command Palette looks. It's all squished up with no padding and… ugh!
So, I spent some time looking into this, and I finally found a way to hack the VS Code command palette to look more like Atom.
Here is how my command palette looks now:
These are the steps I took:
Install Monkey Patch
Install Customize UI
Add the following declarations to your settings.json (customize as you see fit):
"customizeUI.stylesheet": {
".quick-input-widget": "width: 650px; margin-left: -325px;important;top:50px !important; padding:15px !important;background-color:rgb(41 46 53)!important;border-radius:10px!important;",
".quick-input-widget .quick-input-header": "padding:0px!important;margin-bottom:10px;",
".quick-input-widget .monaco-inputbox": "padding:10px !important;border-radius:5px!important;",
".quick-input-widget .monaco-list-rows": "top: 0 !important;max-height:670px;min-height:300px;",
".quick-input-widget .monaco-list-row": "position:static!important;border-bottom: 1px solid #333942;padding:5px!important;height:auto!important;",
".quick-input-widget .quick-input-list-entry": "position:relative;padding:0 5px 0px 15px;",
".quick-input-widget .quick-input-list-entry .codicon[class*=codicon-]": "font-size:12px;",
".quick-input-widget .quick-input-list-entry .monaco-action-bar": "position:absolute;left:0;",
// ".quick-input-widget .quick-input-list-entry .quick-input-list-label": "max-width: 80%;",
".quick-input-widget .quick-input-list .quick-input-list-entry.quick-input-list-separator-border": "border-top-width:0px!important;"
},
It doesn't match Atom exactly:
The main problem with this method is keyboard scrolling is wonky. The "end" of the command palette list ends up beyond the overflow limit of the containing div. As such, when you arrow down, you have to keep arrowing-down PAST the end of the visible div in order to get the list to move. I can live with this. Someone else smarter at hacking VS Code might be able to figure this out.
Atom dims the rest of the screen when you invoke the command palette. I don't see a way to do this right now. It might be possible using Money Patch to add some custom javascript (adding a class or a pseudo element) which would allow this to happen but I'm not going to try.
There might be other problems, but for now — this seems to work well enough!
Edit: text for clarity.
This is currently neither possible, nor planned, neither from an extension nor from within configuration settings.
I suggest to open issues on the command palette VS Code has to improve it if needed (https://github.com/Microsoft/vscode/).
Using PHPStorm 3.0:
Is there a way to tame auto-completion in css files?
I've disabled everything in "Preferences > Editor > Code Completion", yet I still observe the following behavior:
Say I'd try to type
.list {
}
When typeing ".list" and pressing the space key to add a { bracket, PHPStorm automatically expands .list to
.list-style-type:
;
This happens with almost every other word that also occurs as a css property even in comments
Any ideas on how to stop this without altering PHP/JS auto complete behavior?
It seems you set Space shortcut for live template expanding (Settings | Live templates). If so, this behaviour is by design.
Go to Editor > General > Code Completion.
Uncheck Insert selected variant by typing dot, space, ect.
After doing this, your example of .list { will no longer insert .list-style-type: when pressing space before the {.
Is there a CSS editor which automatically expands one-line declarations as multi-line declarations on focus ? To clarify my thought, see example below:
Original CSS:
div#main { color: orange; margin: 1em 0; border: 1px solid black; }
But when focusing on it, editor automatically expands it to:
div#main {
color: orange;
margin: 1em 0;
border: 1px solid black;
}
And when it looses focus, editor again it automatically compresses it to one-line declaration.
Thanks.
If you are using Visual Studio you should be able to do a close approximation of this:
You can change how CSS is formatted
via the Tools -> Options menu.
Check 'Show all settings' if it is unchecked.
Go to Text Editor -> CSS -> Format and pick the semi-expanded option
Ok you changes.
Then ctrl+A, ctrl+K, ctrl+D should re-format your document
When you are finished editing just go back to the options and pick the compact CSS format then ctrl+A,ctrl+K,ctrl+D to re-format again.
Hope this helps.
I've not heard of one. If you're on a Mac I can definitely recommend CSSEdit. It does auto-formatting very nicely, amoungst other things.
EDIT: I originally said "though as the comment says it's a great idea" but, thinking about it, is that what you really want? I can see that it would be good to have expansion/contraction onClick (in which case TextMate - again Mac - though CSS suport isn't as good as CSSEdit), but onFocus?
Sorry. I don't know of any IDEs that explicitly do that.
But, there are quite a few external options:
CSSTidy (download)
Clean CSS (in-browser)
CSS Optimiser (in-browser)
others... (Google Search)
da5id, I actually don't care about implementation details (onclick or onhover, though onclick seems better when you say it ;), I'm just curious if there are any editors which supports this kind of feature in any way.
PS. I'm not on Mac but Windows.
Its not exactly what you want but try the windows port of textmate E Text Editor, for on click folding of css rules, auto formating and most other textmate functionality.
You can do that with the scripting language of your favorite editor.
For example in SciTE:
function ExpandContractCSS()
local ext = string.lower(props["FileExt"])
if ext ~= "css" then return end
local line = GetCurrentLine()
local newForm
if string.find(line, "}") then
-- On one line
newForm = string.gsub(line, "; *", ";\r\n ")
newForm = string.gsub(newForm, "{ *", "{\r\n ")
newForm = string.gsub(newForm, " *}", "}")
else
-- To contract
-- Well, just use Ctrl+Z!
-- Maybe not, code to come if interest
end
if newForm ~= nil then
ReplaceCurrentLine(newForm)
end
end
GetCurrentLine and ReplaceCurrentLine are just convenience functions from my collection, I can give them (and do the contraction part) if you are interested.
It's a good question. I'd love to see this in a CSS editor. TopStyle does this, but it isn't automatic; you have you use a hotkey.