I'm trying to remove the content div only for the homepage by this line (in the rules.xml)
<drop css:theme="#content"
if-content="/html/body[#class='section-front-page']" />
It doesn't work ... why? It seems ok for me :)
You can use CSS selectors, too:
<drop css:theme="#content"
css:if-content="body.section-front-page" />
This resolves to the same XPath expression, but it's a lot easier on the eye
See: http://pivotallabs.com/users/alex/blog/articles/427-xpath-css-class-matching
To use that syntax you would have to match on all the classes for the body tag
Use:
/html/body[
contains(
concat(' ',normalize-space(#class),' '),
' section-front-page '
)
]
(works for me in FireBug)
Related
Given an Input field
<input type="text" />
Type in somer Numbers 000000000000
Now the desired result is: 000 000 000 000
There is no way to do this right now in CSS is there?
No, not in css, but it's simple in JS or PHP Justinas
No, there isn't. You'll need some RegEx and JS. BenM
With pure CSS it is not possible. Rahul Tripathi
You cannot do it in CSS. Wiglaf
With pure CSS it is not possible. However if you are using PHP or Javascript then you can have it. Like for example in PHP you can try like this:
<?php
$str = "000000000000";
echo chunk_split($str, 3, ' ');
DEMO
On a side note:
You can also check about letter-spacing which is used to give space after every character in CSS.
I have a form element generated by Zend Form as follows:
<dd id="website-element">
<input type="text" class="pre-http" value="bigshop.com.au" id="website" name="website">
</dd>
Is there any way I can precede the input element with the text 'http://', using CSS? (I want the user to enter the web site without the leading 'http://').
Thanks...
Try this:-
Use :before pseudo element
Demo
#website-element:before
{
content:"http://";
}
:before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.
So it needs to be on the parent of the textbox.
Depends: are you wanting the input value to be prefixed with http:// on submission? If so, you'll have to use Javascript for this one.
Otherwise, you could probably use something like this:
.pre-http:before {
content:"http://";
/* any other styles you'd like to apply to the text */
}
I'm writing some rules in Diazo. I want, in case the user browses the "viewer" section (a browser view, not a real plone folder), to drop the "selected" class for the "home" tab in the globalnav and put "selected" class for the "viewer" tab.
<replace css:content="#portal-globalnav" css:theme="#portal-globalnav" />
<drop if-path="viewer/"
css:content="#portaltab-index_html"
attributes="class" />
<xsl:template if-path="viewer/"
match="//li[#id='portaltab-viewer']/">
<xsl:attribute name="class">selected</xsl:attribute>
</xsl:template>
But the result it's a right li portaltab-viewer with the "selected" class, but without any content inside! I obtain an empty "li" tag in the portal-globalnav O.O
What's wrong?
Vito
You need to recurse into the content of the element with xsl:apply-templates. Try:
<replace if-path="/viewer" css:content-children="li#portaltab-viewer"><xsl:attribute name="class">selected</xsl:attribute><xsl:apply-templates select="node()"/></replace>
The lack of whitespace before the xsl:attribute is necessary as I don't think I ever got around to making Diazo ignore whitespace around xsl:* elements.
I spotted this (to me) curious css style in the default Site.css file of an ASP.NET MVC project:
.text-box.multi-line
{
height: 6.5em;
}
Is .text-box.multi-line just the name of a class that happens to have a dot in the middle of it, or is this a nesting of two classes? Or is it something else entirely? Can you explain?
And can you provide a usage example?
Edit
Thanks for all the answers. This seems to be an omission from the w3schools css reference page.
it matches an item with both classes, ie.
<textarea class="text-box multi-line"></textarea>
It will not match if the item only has 1 of the classes.
It will match if the item has those two classes plus additional ones.
It means that the element has both classes.
It will select an element with the class text-box that also has the class multi-line
This would be the same:
.multi-line.text-box {}
.text-box[class~="multi-line"] {}
An example:
<p class="multi-line text-box some-other-class"></p>
It's selecting an element like this:
<* class="text-box multi-line"></*>
Any element that has both the text-box and multi-line classes.
It will select this element:
<textarea class="text-box multi-line" />
Or any element with both the text-box and multi-line classes for that matter.
Here's a quick little fiddle to show the difference:
http://jsfiddle.net/sGn2v/
basically it'll match an element having BOTH classes!
Can I define a class name on paragraph using Markdown? If so, how?
Dupe: How do I set an HTML class attribute in Markdown?
Natively? No. But...
No, Markdown's syntax can't. You can set ID values with Markdown Extra through.
You can use regular HTML if you like, and add the attribute markdown="1" to continue markdown-conversion within the HTML element. This requires Markdown Extra though.
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
Possible Solution: (Untested and intended for <blockquote>)
I found the following online:
Function
function _DoBlockQuotes_callback($matches) {
...cut...
//add id and class details...
$id = $class = '';
if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
foreach ($matches[1] as $match) {
if($match[0]=='#') $type = 'id';
else $type = 'class';
${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
}
foreach ($matches[0] as $match) {
$bq = str_replace($match,'',$bq);
}
}
return _HashBlock(
"<blockquote{$id}{$class}>\n$bq\n</blockquote>"
) . "\n\n";
}
Markdown
>{.className}{#id}This is the blockquote
Result
<blockquote id="id" class="className">
<p>This is the blockquote</p>
</blockquote>
Raw HTML is actually perfectly valid in markdown. For instance:
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
Just make sure the HTML is not inside a code block.
If your environment is JavaScript, use markdown-it along with the plugin markdown-it-attrs:
const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);
const src = 'paragraph {.className #id and=attributes}';
// render
let res = md.render(src);
console.log(res);
Output
<p class="className" id="id" and="attributes">paragraph</p>
jsfiddle
Note: Be aware of the security aspect when allowing attributes in your markdown!
Disclaimer, I'm the author of markdown-it-attrs.
If your flavour of markdown is kramdown, then you can set css class like this:
{:.nameofclass}
paragraph is here
Then in you css file, you set the css like this:
.nameofclass{
color: #000;
}
Markdown should have this capability, but it doesn't. Instead, you're stuck with language-specific Markdown supersets:
PHP: Markdown Extra
Ruby: Kramdown, Maruku
But if you need to abide by true Markdown syntax, you're stuck with inserting raw HTML, which is less ideal.
Here is a working example for kramdown following #Yarin's answer.
A simple paragraph with a class attribute.
{:.yourClass}
Reference: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
As mentioned above markdown itself leaves you hanging on this. However, depending on the implementation there are some workarounds:
At least one version of MD considers <div> to be a block level tag but <DIV> is just text. All broswers however are case insensitive. This allows you to keep the syntax simplicity of MD, at the cost of adding div container tags.
So the following is a workaround:
<DIV class=foo>
Paragraphs here inherit class foo from above.
</div>
The downside of this is that the output code has <p> tags wrapping the <div> lines (both of them, the first because it's not and the second because it doesn't match. No browser fusses about this that I've found, but the code won't validate. MD tends to put in spare <p> tags anyway.
Several versions of markdown implement the convention <tag markdown="1"> in which case MD will do the normal processing inside the tag. The above example becomes:
<div markdown="1" class=foo>
Paragraphs here inherit class foo from above.
</div>
The current version of Fletcher's MultiMarkdown allows attributes to follow the link if using referenced links.
In slim markdown use this:
markdown:
{:.cool-heading}
#Some Title
Translates to:
<h1 class="cool-heading">Some Title</h1>
It should also be mentioned that <span> tags allow inside them -- block-level items negate MD natively inside them unless you configure them not to do so, but in-line styles natively allow MD within them. As such, I often do something akin to...
This is a superfluous paragraph thing.
<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>
And thus with that I conclude.
I am not 100% sure if this is universal but seems to be the case in all MD editors I've used.
If you just need a selector for Javascript purposes (like I did), you might just want to use a href attribute instead of a class or id:
Just do this:
Link
Markdown will not ignore or remove the href attribute like it does with classes and ids.
So in your Javascript or jQuery you can then do:
$('a[href$="foo"]').click(function(event) {
... do your thing ...
event.preventDefault();
});
At least this works in my version of Markdown...