I want to put headers in unordered way. This is how you can do it in markdown:
h1
h3
#h1
###h3
##h2
This way h3 is not the following size (h2) but two sizez smaller (h3).
How to do it with rst?
From docutil's documentation on Sections:
Rather than imposing a fixed number and order of section title adornment styles, the order enforced will be the order as encountered. The first style encountered will be an outermost title (like HTML H1), the second style will be a subtitle, the third will be a subsubtitle, and so on.
...
...a document must be consistent in its use of section titles: once a hierarchy of title styles is established, sections must use that hierarchy.
So you cannot do this directly with reStructuredText. You will get a SEVERE: Title level inconsistent: warning.
Correct, Sphinx will enforce the hierarchy. you could instead use the .css directive to format titles more flexibly.
Related
I have this strange code:
<h1>Firmware 0.6 <span="postdate">April 02, 2015</span>
</h1>
How can I change only this certain span that has ="postdate" in it with CSS?
The problem occurs in a widespread template in the posttime of for example: http://luebeck.freifunk.net/2015/01/07/announce-0.6.html
the main source in github is corrected already, But I wonder how to fix such with only access to the CSS file.
That's not valid HTML.
If you validate it using an HTML validator, you will receive the following:
an attribute specification must start with a name or name token
An attribute name (and some attribute values) must start with one of a restricted set of characters. This error usually indicates that you have failed to add a closing quotation mark on a previous attribute value (so the attribute value looks like the start of a new attribute) or have used an attribute that is not defined (usually a typo in a common attribute name).
For what it's worth, you can technically select it by escaping the =/" characters.
Unfortunately, this will also select all succeeding elements due to the syntax error in the HTML.
span\=\"postdate\" {
color: red;
}
<span>Other span</span>
<span="postdate">April 02, 2015</span>
<p>Some paragraph</p>
<span>Everything appearing after the invalid span will get selected due to the syntax error!</span>
Ignoring the weirdness and considering it just another span there's usually another way to select it as it has a unique place in the DOM (though what that is may be unpredictable with dynamically created content such as you get in a CMS).
I'm guessing you've thought to target any ancestor items with an id attribute or determine if there's a way to target it through ancestors without affecting sibling spans or spans that sit within a similar structure elsewhere? Basically - does it sit within a unique structure in some way?
If not then you could also try to target it through span:nth-child(5). There's also a fist-child and last-child. This may help uniquely target it within the overall structure. https://css-tricks.com/useful-nth-child-recipies/
You could also try to enter an inline script in the html view of the wysiwyg (a bad CMS may allow this!) which will allow you to check the content of spans and do something to if it matches (like add a class or id for a styling hook).
I am using Joomla3.2 for my site development. I wish to reduce the size of the article's title in particular pages without affecting other pages.
By default it will take <h1> and I want to reduce this into <h4>.
I would also like to reduce the size of the read more button size in the article.
First of all, the usage of <h1> for the article's title vs <h4> is not a matter of size alone; but most importantly it tells search engines what the page is about.
What you want is simply to apply a different style to the <h1> in some particular pages.
In order to achieve this you might
add a css suffix to the specific menu items that are linked to
the articles whose title is too large;
add the Itemid parameter in the <body> tag in your template
Whichever you choose, in the end you'll have a means of discriminating the articles - be it the page class or the Itemid - which you will use in your css to apply a smaller font-size.
So for example your selectors may be:
body.item-113 h1, body.item-116 h1
or
.someCustomClassYouAddedToTheMenuItem h1
Basically what I'm trying to do is copy this style (from a word doc) but using rst.
I was thinking I might need a custom directive which I can can include the header and style the internal checkboxes.
Ideally I would like to be able to do something like:
.. handson::
The title
- Check one
- Check two
The bulltet items inside the handson block would be styled as checkboxs but the rest of the document would just have normal bullet points.
I had a look at the custom directive stuff but I'm not sure if that would be the best way to tackle this. I'm also using rst2pdf if that has any impact on the results.
If you don't want to go down the route of creating a custom directive, you could use a normal admonition block and "fake" the check boxes. Your markup could be standard reStructuredText:
.. admonition:: The title
- Check one
- Check two
You can then include some custom CSS markup within your reStructuredText file to target list items in admonitions:
.. raw:: html
<style>
.admonition ul { list-style-type: none; }
.admonition li:before { content: "\2610"; }
</style>
Here the CSS targets any list item element which is a child of any element with the class "admonition" and replaces the list item bullet points with simulated check boxes using the Unicode Ballot box character, ☐.
Docutils applies an additional class to generic admonitions which is a concatenation of "admonition" and the admonition title. So in the above example we could be more specific with the element we target with the CSS rule:
.admonition-the-title ul { /* ... */ }
This could be used to target a single admonition within your document.
Credit goes to these two answers to the SO question How to create a checklist in reStructuredText (reST)?
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.
I have been trying to use the new collection in plone 4.2.1 to filter a set of documents. I can not use the 'and' operator to get the result I need.
For example I have the following documents:
document1, tag 'yellow'
document2, tag 'yellow', 'red'
document3, tag 'red'
How do I filter the collection to show only document 2?
It's not possible with the new-style-collections, because of the missing and/or-operators. :(
It is not possible (the way you want), but I have made a (very ugly) hack (which also has some minor bugs (basically if the tag contains spaces) in collective.ptg.quicksand
1) the tags are added to the content as (css) classes
2) A javascript (or css file) hides those without the right class.
This would mean that document1 has 'div class"yellow"' and document2 has
div class="yellow red". Then you hide all the divs with css (or javascript) and shows document2 by
.red.yellow {display: block} or similar.
You can see the idea here :http://products.medialog.no/galleries/quicksand
(although here I have not made any tags containing both (red and yellow), but that should be just to remove the "split" in the init py file, line 82 here:
init.py">https://github.com/collective/collective.ptg.quicksand/blob/master/collective/ptg/quicksand/init.py
When selecting block styles in the wp editor (p, h1, h2, etc.) is there a way to change the text in the dropdown? Like instead of showing Heading 2, it will show Subhead. I think this is more user friendly for those who don't know HTML.
Not 100% certain what you mean - I see "Heading 2" rather than H2, and I'm fairly sure I'm using a standard install:
If it's those names you want to change, I don't know of a way to change them without changing the core files: wp-includes/js/tinymce/langs/wp-langs-en.js (for example); it's the block starting tinyMCE.addI18n("en.advanced"