Having css file where the structure is like this:
#something > div {
...
}
When it is saved, it removes the spaces around > and it makes it look like this:
#something>div {
...
}
Is there a way to avoid this in VS Code?
I haven't encountered this in VS Code. But I did find this setting in Preferences>Settings that may be the solution.
I do not have it checked and I don't have the same issue you report. Perhaps another setting elsewhere causes it.
Replace space -
--space--- > --space--- replace to = >
Related
I have a stylesheet with the following code:
.author-name:before {
content:"by: ";
}
When I run this through YUI Compressor, I get:
.author-name:before{content:"by:"}
This is a problem because it wipes out intended whitespace. I thought using the YUI Compressor special comments, like this:
.author-name:before {
/*!YUI-Compressor */content: "by: ";
}
... might help, but it seems not to. Additionally, the comments themselves got wiped out. My impression based on the was that comments in JavaScript that start with /*! get preserved, but that's not actually happening.
Short of post-processing my build process to unminify, is there a way to do this? We're currently using version 2.3.5 of YUI compressor, and running with the flags --charset utf8 -v -o
So my question, in short, is, is there a way to get YUI Compressor to respect spaces in content: values, or a way to add CSS comments before and after a block I don't want minified?
As a workaround, try using unicode entity instead of space character itself:
.author-name:before {content: "by:\00A0"; }
\00A0 in particular is non-breaking space.
I tried your css using version 2.3.4 and 2.4.6 and both preserve the space inside the string. So it's either a very specific bug (can't find anything in the bug tracker) or something else is going wrong. Are you sure it's a ascii space character and regular apostrophes (not the Windows smart ones or something)?
When I run a test on the same css replacing ascii quotes with unicode character 201C, a left double quotation mark, the space is removed. The reason is quite simple: the parser doesn't recognize it as a string and therefor it strips white space.
You might want to try the latest version from here http://yuilibrary.com/download/yuicompressor/ anyway. In case your current version is installed using some package manager: just extract the .jar file from the archives 'build' folder.
You might add a margin to the content:
.author-name:before {
content: "by:";
margin: 0 .35em 0 0;
}
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 {.
I want that the user should be able to select an textstyle in RTE like Detail, Important, Name of person and so on. So I would like to define a CSS and this option should be shown in RTE. The CSS style should be a span and only setting a color.
Currently I have the following code:
RTE.classes{
highlight{
name = test
value = color:#0A8AD2;
}
}
RTE.default{
ignoreMainStyleOverride = 1
useCSS = 1
contentCSS = fileadmin/templates/css/rte_formats.css
classesCharacter := addToList(highlight)
classesParagraph := addToList(highlight)
proc.allowedClasses := addToList(highlight)
}
The content of the CSS file is
span.highlight, p.highlight {
color:#0A8AD2;
}
But the new added style isn't shown in the drop down (textstyle). I also enabled "additonal inline elements" in th rtehtmlarea configuration. I also tried to set showTagFreeClasses and so on without success. Then I read about caching problems. I deleted the RTE cache as well as the browser cache. Still no result. What can be wrong?
You are basically on the right track!
I have experienced quite some problems using inlineStyle. One of them being that you have to explicitly undefine the contentCSS to make the inlines work (only setting ignoreMainStyleOverride = 0 is not enought!):
RTE.default.contentCSS >
I personally prefer a dedicated external CSS file. The important thing to know is that the TYPO3 RTE really parses this CSS file and only offers those classes that are actually found in there!
So you have to use the contentCSS parameter to define a CSS and this CSS must really contain the classes that you want to make available to the user. Here is how you must define it:
# TS-Config
RTE.default.ignoreMainStyleOverride = 1
RTE.default.contentCSS = fileadmin/templates/css/rte_formats.css
The CSS file must exist at the give URL and it must contain a definition for the CSS class that you want to provide (as said the CSS file is really parsed and missing classes will not show up in the dropdown selector):
/* content of rte_formats.css */
/* span. needed for RTE.default.classesCharacter */
/* p. needed for RTE.default.classesParagraph */
span.highlight, p.highlight{ color:#0A8AD2; }
And one more hint:
I recommend not to overwrite the allowedClasses with your own class name(s), but append to them:
RTE.default.proc.allowedClasses := addToList( highlight, myOtherClass, myThirdClass )
Good luck!
I'm working on a site for one of my in-laws, who insisted on using Joomla so that he could update the content himself in the future. That being said, one of the things that I developed for him was a character generator for a game that he and his brothers created. That is working fine. The issue is that they want a way to print the final sheets off when finished, and to do so without all of the menus, banners, etc. I was told that the simplest way to handle that was to pass ?tmpl=component in the URL to strip everything out, which is also working.
The problem that I am running into is that the CSS in the Joomla template is causing the tables to behave in a way that I cannot figure out how to correct. The page consists of nested tables, with widths defined in terms of % (currently), but it seems that the specifically defined widths are being ignored in favor of the widths hugging the largest cell. To see what I'm talking about:
The trouble page: http://www.basementgames.com/tools/character-generator.html?s=36&tmpl=component
What the page should look like: http://www.basementgames.com/char_gen.php?s=36
This is the exact same code in both places, with the first being inside Joomla, and thus subject to the CSS of the template. I don't know much about CSS, and I'm driving myself crazy trying to figure out what to override to make the first example look like the second. Any thoughts?
You can run this script on the page and it will remove the offending print.css file on page load:
<script>
if (window.location.href.indexOf('/character-generator.html') > 0 &&
window.location.href.indexOf('tmpl=component') > 0) {
(function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
if (links[i].href.indexOf('/print.css') > 0) {
links[i].href = '';
}
}
})();
}
</script>
http://jfcoder.com/test/character-generator.html?tmpl=component
Note, it only runs on the character-generator.html page with a tmpl=component in the query string. It also has to run after the link elements, as well, so it should be inserted into the body tag or at the very bottom of the head tag. Since you have MooTools available, you could also use DOMReady().
Hopefully simple question: I'm trying to set the alternatingItemColors on a datagrid via some values that I set in a CSS file but nothing seems to work.
the CSS file looks something like this:
.FACS0 {color: #B0B0B0;}
.SACS0 {color: #A6A6A6;}
.AICS0
{
alternatingItemColors: #B0B0B0, #A6A6A6;
}
I tried a variety of different things. First I tried to load AICS0 directly, i.e.
dataGrid.setStyle("alternatingItemColors", "AICS0");
but this leads to a run time error
TypeError: Error #1034: Type Coercion
failed: cannot convert "AICS0" to
Array.
I then tried
dataGrid.setStyle("alternatingItemColors", ["FACS0", "SACS0"]);
this runs fine but all rows are set to black.
Note: this
dataGrid.setStyle("alternatingItemColors", [0xFF00CC, 0x112200]);
works just fine - unfortunately this won't work for me, i.e. I need to be able to load data from a CSS file.
thank you!
Use the styleName property
dataGrid.styleName = "AICS0"
If you want ALL of your DataGrids to have the same alternating colors, use this in your CSS:
DataGrid
{
alternating-item-colors: #B0B0B0, #A6A6A6;
}