My source is xml (not HTML) and I can’t modify it.
This would be easy if CSS had a parent selector.
This XML
<p>Have you heard <quote>I never saw a purple cow</quote>? It is a silly poem.</p>
<p>
It goes like this. <quote><l>I never saw a purple cow.</l>
<l>I never hope to see one.</l>
<l>But I can tell you anyhow,</l>
<l>I’d rather see than be one.</l></quote> Isn’t that silly?
</p>
and this CSS
quote::before {content:"“"}
quote::after {content:"”"}
/* For lines inside quotes */
quote > l {display:block; margin-left:2em}
produce this output
Is there some trickery to produce the same result but without the two quotation marks I’ve circled?
(It would also be OK if the quotation marks were not eliminated but moved, the opening one to the beginning of the first line and the closing one to the end of the last line of the poem.)
https://jsfiddle.net/mccaskey/ujvny0o1/21/
Related
this is my first question here, hope I am doing this right :)
I am trying to change the colours of the calendar on this page:
https://realsailing3.vanbruben.de/dehler-41-shelter.
But the classes are as long as
.monthly-fluid .ext_month_day_nox, .monthly-fluid .ext_month_day_nox_r, .ext_month_day_nox.morning_occ_nox
or
ext_month_day_nox no_start nocuscol
or
.monthly-fluid .cur_month_day_nox.arrival_day
I have tried to separate them with a dot but i get the message "dont use adjoining classes"
Any idea of how I can change these colours?
Thank you very much!!
code picture
try to add !important with that property.
.monthly-fluid td.reserved_nox {
background-color: #f0c2c2 !important;
}
It shouldn't matter how long the classes are. If you've used an email client such as Outlook before, classes act the same way as tags do in Outlook. You can "categorize" each element as cur_month_day_nox or no_start or nocuscol, or any combination of them. Then when the element is styled using CSS, the file will describe how elements will appear based on their categorizations. Each description is called a "rule."
We want to look for a rule which modifies the background-color, since our objective is to change it the color of the day. While the element is selected in the Inspector, If you look on the right pane called Styles and scroll enough, you'll find the following CSS rule:
.monthly-fluid .cur_month_day_nox {
background-color: #c2dfd0;
}
This style "selects" any elements which have the class .cur_month_day_nox, which is all the green days with the exception of today (at the time of writing, that's February 1st). So, you can double click the color value and change it. You should see all the green days change instantly.
Edit: For a weird reason, the class names are different on your end, but regardless the approach is the same.
By default the Atom editor highlights the opening and closing curly brackets by a dotted undeline which is hard to see. I want this highlighting to be more obvious by changing this highlight to set a background color to the opening and closing curly brackets. How can I do that? (I am working on a .js file if relevat)
I have searched google and found some links but nothing addresses this issue specifically. I have searched the atom editor documentation too to no avail.
I found the styles.less file where this can be done but have no clue how to target this character to style it.
//Example
// style the background and foreground colors on the atom-text-editor-element itself
//This is a made up name for targeting character:
atom-text-editor-curly-brackets {
background-color: blue;
}
I want to be able to find the opening or closing curly bracket at a quick glance when I position my cursor on either end by highlighting the curly bracket character with a color background.
have you checked this discussion out?
https://discuss.atom.io/t/set-colour-of-bracket-and-matched-bracket/39018/2
The selector for that is:
.bracket-matcher .region {
// your styles here
}
Add it to your user stylesheet (.atom/styles.less).
seems like you won't be able to easily style the brackets themselves (make them green etc) but setting a colorful background behind them seems possible
!
I have a Rmd file hosted by blogdown
I want to indent the first line of each paragraph, and have tried various things like indent:True inside the header, etc.
None of them seem to work and was wondering if anyone knew of a solution?
Thanks,
I assume that you have read this appendix of the blogdown documentation about CSS. If not, please read it first.
Using CSS, you can use the text-indent property.
For instance, you can add this CSS rule:
p {
text-indent: 2rem;
}
It indents the first line of each paragraph.
I am using recess (https://github.com/twitter/recess) to compress the CSS file
div {
color: red
border: 1px solid red
}
p {
color: blue
}
# recess test.css --compress (No output)
As you can see, there is missing colon in the CSS file so recess failed to output anything, but in a real browser it is perfactly ok if only part of the CSS contains error
e.g.
http://jsfiddle.net/VDQLU/ (see the bule color in p, not affecting by error above)
Q. Are there any way to compress the file anyway with recess? Or using other tool?
The reason recess fails, is because that is invalid css. (You probably know that). And the reason it works anyway on the browser you use, is because browsers assume some web developers just wont use correct syntax and also they want to be compatible with legacy websites, not because the semicolons are optional on css, or because css parsers are supposed to have a quirks mode!.
I would use a sed line to clean the css file, and from now on, use correct css code. Here is an example sed line: (backup your css file first!)
sed -i '/{/,/}/ { /[}{]/ !{ /\/\*.*[^(\*\/\t )][\t ]*$/,/\*\// !{ s/\([^(\*\/);\t ]\)[\t ]*$/\1;/ }}}' yourcssfile.css
This sed line will:
Add ;, only to the lines that end without semicolons; that is, if you do have some lines that end with semicolons, you wont end with two semicolons one after another (like ;;)
Check also for commented lines, be on one line like: /* some comment */, or multiple lines.
That does NOT mean the change is automagically done flawlessly; you would probably have to do some manual fixing (and perhaps manual hacking the sed line), but if your css file looks like your example, it should work almost perfect.
Any sort of CSS compression will remove line breaks from your CSS.
Though a browser may understand your code now, without line breaks to help it process the incorrect code, it would just have a single string.
Any compressor that did compress that code wouldn't be doing you any favours as it almost certainly wouldn't be understood by any browser once the line breaks were removed.
Please use the div style like this.
div {color: red;border:solid red;}
its a good solution for your result.
Page in question: http://secantmedical.com/biomedical-textiles/biomedical-textiles.php
The heading area with the words "Biomedical Textiles" is set very simply with a CSS class that mirrors the page name, in this instance the class is "biomedical-textiles". Other examples include "medical-applications", "design-and-development", etc. You get the gist.
Exclusively in IE6, every main page after Biomedical Textiles has a blank heading area. The dimensions are kept in place, but the background is not being applied. The same is true for all subpages. The first child of Biomedical Textiles, Textile Science, has the header applied correctly and all other subpages have a blank heading area.
I can vouch simply by viewing the source that the classes are being applied correctly; couple that with the fact that the headings appear fine in every other browser. In the CSS file, the classes that are working appear first in their respective groups. When I swap one of the later ones to the top, that one works and every proceeding one does not. I have no idea why this is. Any assistance would be greatly appreciated.
The CSS in question is on lines 83-123 of style.css. Thanks in advance!
The way you have your selector written in your CSS written for those bg images, ie6 doesn't recognize it. You have it written:
#l2-header.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }
It doesn't recognize the id.class. If you aren't using the class anywhere else just use the class without the id in front of it. Just use:
.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }
That should fix it.