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 {.
Related
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.
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 have a menu called XYZ-spanish and created another one called XYZ-english. I want to apply the same CSS style to my new menu but it conditional based on the Joomla menu type name. The css it applies is in /web/templates/templatename/css/custom.css, but I have yet to find how it ties it to the menu-type name.
I have grepped through the whole directory tree with grep -r 'XYZ-spanish' * and grep -r '.scrolltojsmenurightcustom' * which is the class name is applies to the menu. However I have checked the modules and none of them have any classes applied to them. The only clue I have that is I change the menu type name the styling gets removed. I'm going bananas looking for how it's applying it? Where should I look?
I have also searched through the database looking for both words and have yet to locate anything significant.
The only thing listed in the custom css is:
.scrolltojsmenurightcustom {
color: #ff5c00 !important;
padding-top: 0em !important;
line-height: 0px;
}
This depends on which menu system are you using, is your menu an extension? or part of your template?
Also you can use a tool like Firebug or similar to inspect the source code of your page in your browser.
A tool like this will give you information about the selectors and the path where they are located, the line number and the name of the file that contains this selectors. Once you have this information you can add or change the values of the CSS.
I was given a Wordpress theme to install for a new website and then asked to make some customizations.
The site is here: http://centergrovepto.org/townsend/ (I'm not sure where the original theme came from.)
There are 3 buttons along the right side of the front page slider. "Employers", "Candidates", and "Open Positions". The buttons were initially clickable and all they did was change the current slider image.
I'm trying to make them clickable so that they open the corresponding page. If you hover over each button you can see in the status bar that the link paths are setup correctly, but when I click the button nothing happens.
I'm guessing it is a CSS issue and some layer is covering up the actual buttons, but I don't know enough CSS to figure out what the cause is. I have the Firebug plugin for Firefox installed so I can more easily inspect the CSS. I've played around with changing the z-index of various elements, but I just can't get it to work.
I actually think it's your jQuery Faded plugin. It looks as if this:
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false; //THIS LINE PREVENTS DEFAULT ACTION WHEN <a> LINK IS CLICKED
});
}
Is preventing the default action of your links. I'm not sure what will happen, but try commenting the "return false" line out. See if any unwanted side-effects happen. Otherwise, add this code to your (or what I assume is yours) custom.js file:
jQuery(".pagination ul li a").click(function()
{
window.location = this.href; //UPDATED FOR EPHRAIM
});
I'm not exactly sure why this is happining, because if you open the link in a new tab, it works perfectly. It's possible that it's a css problem, but more likely, it has to do with your HTML.
What I would try is adding a target to your link. This will tell it to open the link specifically in the window your in, which may solve the problem. (I haven't tested it myself though)
Instead of
Try changing it to one of the following:
Or, if that one doesn't work, try this one as well
Let me know if that helps!
as I've seen on your site, the 3 buttons are linked like this:
a href="/townsend/employers/"
But i think it should be like this to work because a href="/townsend/employers/" does not refer to anywhere in your server
try changing it like so:
<a href="http://centergrovepto.org/townsend/employers/">
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.