I'm trying to make a spoiler notice template in Fandom, with an expandable text section below it. I've hit a wall trying to get the variables and #ifeq statement to work.
The way this is supposed to work, the first parameter is the story type and controls the #ifeq statement. If the user puts "short story" into parameter 1, it wraps the title (parameter 2) in double quotes (""). Any other input (it defaults to "novel") italicizes it. The third param is a text section, what you're flagging as a spoiler, that defaults to hidden using built-in MediaWiki classes (from here).
{| style="width:100%; margin-top:1em; border:1px solid #999; font-size:90%; text-align:center;"
|-
! style="padding:0.2em 0.5em; background-color:red;" nowrap="nowrap" class="color1" | ''SPOILER WARNING<nowiki>!!!</nowiki>''
|-
| This section contains spoilers for the {{{1|novel}}} {{#ifeq: {{{1|}}}|short story|{{{1}}} "[[{{{2|{{PAGENAME}}}}}]]"|{{{1}}}{{{''[[{{{2|{{PAGENAME}}}}}]]''}}. Expand at your own risk.
|-
|}<div class="mw-collapsible mw-collapsed">
{{{3}}}
</div>
Source: https://aeon14.fandom.com/wiki/Template:Spoiler
Okay, I found the problem. It turned out I had some extraneous brackets in there, plus I had mistakenly left a second copy of parameter 1 in both fields. This is the fixed code:
{| style="width:100%; margin-top:1em; border:1px solid #999; font-size:90%; text-align:center;"
|-
! style="padding:0.2em 0.5em; background-color:red;" nowrap="nowrap" class="color1" | ''SPOILER WARNING<nowiki>!!!</nowiki>''
|-
| This section contains spoilers for the {{{1|novel}}} {{#ifeq: {{{1|}}}|short story|"[[{{{2|{{PAGENAME}}}}}]]"|''[[{{{2|{{PAGENAME}}}}}]]''}}. Expand at your own risk.
|-
|}<div class="mw-collapsible mw-collapsed">
{{{3}}}
</div>
Related
Is it possible to somehow tell pandoc to carry the names of styles from original HTML to .docx?
I understand that in order to tune the actual styles, I should be using reference.docx file generated by pandoc. However, reference.docx is limited to what styles it has to: headings, body text, block text, etc.
I'd like to:
specify "myStyle" style in the input HTML (via a "class" attribute, via any other HTML attribute or even via a filter code written in Lua),
<html>
<body>
<p>Hello</p>
<p class="myStyle">World!</p>
</body>
</html>
add a custom "myStyle" to reference.docx using Word,
run a html->docx conversion an expect pandoc generate a paragraph element with "myStyle" (instead of BodyText, which I believe it sets by default), so the end result looks like this (contents of word/document.xml inside the resulting output.docx was cut for brevity):
<w:p>
<w:pPr>
<w:pStyle w:val="BodyText" />
</w:pPr>
<w:r>
<w:txml:space="preserve">Hello</w:t>
</w:r>
</w:p>
<w:p>
<w:pPr>
<w:pStyle w:val="myStyle" />
</w:pPr>
<w:r>
<w:txml:space="preserve">World!</w:t>
</w:r>
</w:p>
There's some evidence styleId can be passed around, but I don't really understand it and am unable to find any documentation about it.
Doc on filtering in Lua states you can access attrs when manipulating a pandoc.div, but it says nothing about whether any of the attrs will be interpreted by pandoc in any meaningful way.
Finally, found what I needed – Custom styles. It's limited, but better than what I arrived earlier, and of course much better than nothing at all :)
I'll leave a step-by-step guide here in case anyone stumbles upon a similar question.
First, generate a reference.docx file like this:
pandoc --print-default-data-file reference.docx > styles.docx
Then open the file in MS Word (I was using a macOS version) you'll see this:
Click the "New style..." button on the right, and create a style to your liking. In my case I made change the style of text to be bold, in blue color:
Since I am converting from HTML to DOCX, here's my input.html:
<html>
<body>
<div>Page 1</div>
<div custom-style="eugene-is-testing">Page 2</div>
<div>Page 3</div>
</body>
</html>
Run:
pandoc --standalone --reference-doc styles.docx --output output.docx input.html
Finally, enjoy the result:
i understand v-cloak is used to display nothing when a new page is loaded.
in my rails app, when i try to switch page (i am using vue component in Rails View), there is a short glimpse of Vuejs codes displaying curly braces before another new page is load. i am entirely baffled and not sure if this is turbolink related as there is no error message found in browser console, or in the rails git logs.
this short glimpse of Vuejs displaying curly braces before another page is loaded, is really annoying, can anyone help on this?
v-cloak is used to do this.
official API：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
tips: written [v-cloak] in #import loaded css file can't work for this problem.
another way: around target tags.
Apart from using [v-cloak] which is a generic way of completely hiding an element until Vue inits, two more usable "tools" are v-text and v-html directives, coupled with computed properties delivering the strings the above directives expect from more complex logic.
Not only do they hide the content until init time, but they can also serve as selectors for the unparsed template elements, as they get removed from the element once Vue parses it. So you could apply backgrounds, width, min-heightto those elements, without the need to spiff your layout with preload classes and remove them on mounted().
An important note here is that transitions won't work on those elements, because Vue purposefully rebuilds the entire DOM of the template once it mounts. If it didn't, enter animations wouldn't work as expected. So there can be no transition from h2[v-text] to h2, because the element is completely replaced. But you can take that into account and start your enter transition from how the [v-text] element was styled.
It's probably not the solution you're looking for (it's more designer's work than programmer's, really) and it's definitely not a magical one liner: it has to be solved on a page by page basis.
But this is how pre-loaders are done (the technique is the same in any modern FE framework, it's just that sometimes you need to spiff your markup with preload classes and remove them on mounted, ngAfterViewInit or componentDidMount).
To be able to style this at your own pace, simply disable JavaScript (or don't init Vue, if you prefer) so you set every detail right. But don't overdo it.
Here's a basic example showing you don't need a whole lot of detail to get a decent effect. It's a matter of roughly matching element heights and coding in some striped CSS backgrounds, really (throw in a blur filter, if you want to get really fancy):
Vue.config.productionTip = false;
Vue.config.devtools = false;
setTimeout(() => {
new Vue({
el: '#app',
data: () => ({
Message: 'Message',
Description: `<p>I'm baby tousled echo park pabst polaroid synth marfa. Migas small batch paleo pop-up street art, chia sriracha cronut ramps succulents portland. YOLO normcore taiyaki organic. Green juice helvetica single-origin coffee polaroid swag selvage schlitz. Artisan la croix unicorn cardigan meh everyday carry wolf thundercats.
<p>Iceland hoodie vice, chicharrones gentrify dreamcatcher ethical jianbing blog truffaut pinterest VHS flannel selfies bushwick. Flannel activated charcoal bespoke master cleanse, chambray tumblr four loko helvetica chicharrones ugh aesthetic irony godard. Beard farm-to-table mumblecore wolf typewriter try-hard shoreditch church-key scenester tousled letterpress yuccie bitters. Selfies +1 man bun, jianbing hell of tote bag crucifix flexitarian. Cronut mumblecore knausgaard meditation authentic lumbersexual listicle pok pok coloring book pitchfork gentrify. +1 offal cronut, flexitarian glossier shoreditch biodiesel stumptown tumeric seitan polaroid.
<p>Narwhal williamsburg adaptogen, four dollar toast retro chillwave occupy kombucha YOLO marfa franzen kogi biodiesel street art next level. Viral blog taxidermy twee echo park roof party. Hammock street art tumeric selvage sartorial. Paleo hashtag activated charcoal, heirloom quinoa cred blog ethical.`
})
})
}, 1000)
#app h2[v-text] {
width: 200px;
background-color: #f8f8f8;
height: 1em;
}
#app div[v-html] {
min-height: 250px;
background-image: repeating-linear-gradient(
180deg,
#fff,
#fff 10px,
#f5f5f5 10px,
#f5f5f5 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2 v-text="Message"></h2>
<div v-html="Description"></div>
</div>
When applying this technique, do not use images, as they require loading as well. Work with CSS only and make sure that CSS is available in <header> (or at least before the app element). Last, but not least, keep in mind your preload has to match your app at all screen widths.
I use kss-node and trying out the simplest project. It just uses the example from the Quickstart guide.
The css is in source/style.css
// Hard rules
//
// Markup: <hr>
//
// Style guide: hard-rule
hr {
border-top: 5px solid #999;
}
I then run
npm-exec kss-node --source source --destination styleguide --css ../source/style.css
The first problem was that the --css option needs the relative path from where the styleguide later is.
But the hr element still looks the same and not 5px thick.
The file is included in the html but Dev Tools says "0 rules" are applied
Could it have something to do with the "//" comments you are using in the css file? Try using a preprocessor and a styles.scss file as the source and then include the styles.css file that sass generates which won't have invalid "//" comments in them.
This seems to working
`
/*
Hard rules
Markup:
Style guide: hard-rule
*/
`
https://github.com/rcaracaus/kss-test
I reread the the documentation to kss-node. The recommended way seems to create a kss template and add the stylesheet in there.
I took the repo of Robert and executed
npm-exec kss-node --init my-template
Then I added following line to my-template/index.html
<link rel="stylesheet" href="../source/styles.css">
Apparently the styles.css file won't be copied to the styleguide directory.
Although this doesn't answer my original question. I feel like it should work without a custom template.
But this works for me.
For this website ( http://carbondirect.net/ ) on the homepage, bottom right I want Sewage Odor Control to link to the page Activated Carbon and jump to the Sewage Odor Control section, but it is not working. It links to the Activated Carbon page, ignoring the anchor.
Based on some research, I tried adding this CSS, but it is still not working:
#sewage-odor-control {
position: fixed;
z-index: 10001;
display: inline-block;
}
Did I do anything obviously wrong? If you are able to take a look, thank you.
Here is the relevant code from your site:
<div class="et_pb_toggle et_pb_toggle_close">
<h5 class="et_pb_toggle_title">SEWAGE ODOR CONTROL</h5>
<div class="et_pb_toggle_content clearfix">
<span><a id="sewage-odor-control"></a></span>
Wet wells and sewage-pumping stations need to be vented to atmosphere, the vapor that is exchanged is contaminated with H2S and mercaptan. They are highly odorous, pungent and extremely objectionable. Specialist impregnated carbon are used to remove H2S to the level below the odor threshold value. The patented products (US patent#6,858,192) invented by our factory are unique catalytic activated carbon not only with high capacity on absorption, but also hazard free during the handling and disposal of spent carbon.</p>
<p>IMP-KOH, HiCOR
</div> <!-- .et_pb_toggle_content -->
</div> <!-- .et_pb_toggle -->
A couple weird things going on:
Line #5: have a closing </p>, but no opening <p>
Line #6: have an opening <p>, but no closing <\p>
Also, your anchor is not 'visible' when you first go to the site because the section is toggled closed (et_pb_toggle_close), so maybe that is causing a problem. What happens if you add the anchor the the header (which is readily visible)?
<h5 id="sewage-odor-control" class="et_pb_toggle_title">SEWAGE ODOR CONTROL</h5>
The only thing you need is adding id="sewage-odor-control" to the target element:
<div id="sewage-odor-control" class="et_pb_toggle et_pb_toggle_close">
I'm developing a pure Material Design application using Angular Material framework.
However, I don't understand how to set containers' background colors (e.g. a login form with a blue background).
I could do it using CSS of course but I wonder if there's a built-in directive / theme option to do this.
I am pretty sure I have seen this somewhere in the docs, but I cant find it now. You have to do two different things:
set .backgroundPalette('indigo') same way as you set primary theme
create container
I have check it on 0.8.1 version of angular-material and it works ok.
Feel free to ask, if you have any additional questions.
For example:
app.config(function ($mdThemingProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('indigo')
.accentPalette('pink')
.warnPalette('red')
.backgroundPalette('blue-grey');
});
and in your template:
<md-content>
<p>Some text</p>
</md-content>
You can set any color from the palette with md-colors directive.
https://material.angularjs.org/1.1.4/api/directive/mdColors
The format will be [?theme]-[palette]-[?hue]-[?opacity] where ? means optional parameter.
But from my experience you have to specify the theme even if it's default:
<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>
On a sidenote, ignoring the "without css" part of the question, I see that the Material Angular creators uses plain old css to create a background color, see this codepen (you also find this via the Getting Started section: "Fork a codepen").
html
<div id="content" ng-view flex> </div>
css
.demo #content {
background-color: rgb(255, 244, 220);
padding:30px;
font-weight:600;
border: 1px solid #aeaeae;
border-top:none;
}