writemonkey
Templates get over-ridden
WM3 Beta8 I've been developing my own css templates starting with one of the templates that came with WM3, however it seems that some of my css is over-ridden.
For example I've tried setting the color and style of links without being able to affect the way they appear in the preview and html. I've included a bit of the html output to show the a tag formatting first in the css then in a
Am I right about the fact that you over-ride some of the css styling?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.onload = function() {
var el = window.document.getElementById('wrapper');
var timestamp = new Date().toLocaleString();
el.innerHTML = timestamp + '</br><br>' + el.innerHTML;
};
</script>
<style type="text/css">
html {
font-size: 16px;
}
body {
line-height: 1.4em;
font-size: 100% !important;
/* Sans-serif fonts */
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
/* font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; */
-webkit-font-smoothing: antialiased;
margin: 30px 0 0;
padding: 0;
}
a {
color: #308bd8;
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
... a lot of css went here ...
}</style>
<style type="text/css">@media screen {html, body {font-size: 1em!important; max-width: 70%; margin-left: auto; margin-right: auto; }} @media print {html,body {font-size: 1em!important; max-width: 100%; margin-left: 0em; margin-right: 0em;}}body {padding: 1em!important; background-color:#ffffff !important; color: #090909 !important; max-width: 90%!important; overflow-wrap: break-word; word-wrap: break-word;} img {max-width: 85%!important;} a {color: #090909 !important; text-decoration: none;} .inline-comment {border-left: .4em solid #F2D400!important; background-color: #F2E6AA!important; border-radius: 2px; padding: .2em; margin-left: .1em; margin-right: .1em;} .block-comment { font-size: 1em!important; background-color: #F2E6AA!important; border-left: .5em solid #F2D400!important; border-radius: 3px; padding: .4em; }</style>
<title>Mark Ch09_2-13 Sermo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous"><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous" onload='renderMathInElement(document.body, {throwOnError: false, strict: false, displayMode: false, delimiters: [{left: "$$$", right: "$$$", display: true}, {left: "$$", right: "$$", display: false}]});'></script>
</head>
<body style="font-size:.8em;">
<div id="wrapper">
</div></body>
</html>```
Yes, you can open plugins/preview/preview.js and find parts of the code with css in it. You can edit or remove those css rules. There may be unforeseen problems doing that but if you are careful enough ...
i.
Ok, in preview.js I removed !important from the a element in wmColorsCSS and changed line 444 to reverse the order of loading wmColorsCSS and templateCSS to allowing the template to have the last say. The new line is this:
return '<!DOCTYPE html><html>\n<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<script>\n' + templateJS + '\n</script>\n' + wmColorsCSS + '<style type="text/css">\n' + templateCSS + '</style>\n' + num + '\n<title>' + (monkey._currentDoc && monkey._currentDoc.nam ? monkey._currentDoc.nam.substring(0, 20) : 'WM export') + '</title>\n <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous"><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous" onload=\'renderMathInElement(document.body, {throwOnError: false, strict: false, displayMode: false, delimiters: [{left: "$$$", right: "$$$", display: true}, {left: "$$", right: "$$", display: false}]});\'></script>\n </head>\n<body style="font-size:.8em;">\n<div id="wrapper">\n' + content + '\n</div></body>\n</html>';
This worked - (so far).