Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
4919bf6
creates and implements generic markup less class
HarvsG Jul 18, 2020
b5d5537
How to give custom CSS to externally rendered html
HarvsG Jul 18, 2020
273f6b0
Clarifies sources of CSS styling of markup
HarvsG Jul 18, 2020
5794c70
further clarification of sources of markup styling
HarvsG Jul 18, 2020
67b494d
rename _markdown to _markup
HarvsG Nov 19, 2020
e6f256c
remove defunct import
HarvsG Nov 19, 2020
82936c5
fix orphaned reference
HarvsG Apr 17, 2021
66d6337
remove comments
HarvsG Apr 17, 2021
29a2f09
fix header navigation
HarvsG Apr 17, 2021
dabed52
Merge branch 'master' into markup
6543 Apr 18, 2021
2bef1fe
Merge branch 'master' into markup
techknowlogick Apr 19, 2021
4e26e5c
Merge branch 'master' into markup
6543 May 5, 2021
416b54d
patch by @silverwind
6543 May 5, 2021
ead5a0b
Update docs/content/doc/advanced/external-renderers.en-us.md
6543 May 5, 2021
a122a98
more renames markdown -> markup
silverwind May 5, 2021
551a47c
do not suggest less customization
silverwind May 5, 2021
306f936
add back tokens
silverwind May 5, 2021
ae0b526
fix class whitespace, remove useless if-clause
silverwind May 5, 2021
32da837
Merge branch 'main' into markup
6543 May 5, 2021
944eb6c
remove unused csv-data rules
silverwind May 5, 2021
6eaea23
Merge branch 'main' into markup
6543 May 5, 2021
17cb028
Merge branch 'main' into markup
6543 May 6, 2021
4a2eed4
Merge branch 'main' into markup
techknowlogick May 7, 2021
0d47208
Merge branch 'main' into markup
techknowlogick May 7, 2021
91d9894
use named exports and rename functions
silverwind May 7, 2021
5fb5599
sort imports
silverwind May 7, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
do not suggest less customization
  • Loading branch information
silverwind committed May 5, 2021
commit 551a47c304e2be8c1fef332b33f165009c4fb842
73 changes: 19 additions & 54 deletions docs/content/doc/advanced/external-renderers.en-us.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,67 +102,32 @@ there were significant problems with this method of configuration necessitating
## Customizing CSS
The external renderer is specified in the .ini in the format `[markup.XXXXX]` and the HTML supplied by your external renderer will be wrapped in a `<div>` with classes `markup` and `XXXXX`. The `markup` class provides out of the box styling (as does `markdown` if `XXXXX` is `markdown`). Otherwise you can use these classes to specifically target the contents of your rendered HTML.

And so you could write some Less:
```less
.markup.XXXXX {

html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
color: #444;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.7;
padding: 1em;
margin: auto;
max-width: 42em;
background: #fefefe;
}

p {
color: orangered;
}
}
```
which is equivalent to:
And so you could write some CSS:
```css
.markup.XXXXX html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
.markup html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

.markup.XXXXX body {
color: #444;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.7;
padding: 1em;
margin: auto;
max-width: 42em;
background: #fefefe;
.markup body {
color: #444;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.7;
padding: 1em;
margin: auto;
max-width: 42em;
background: #fefefe;
}

.markup.XXXXX p {
color: orangered;
.markup p {
color: orangered;
}
```
Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.less` or `custom/public/css/my-style-XXXXX.css`

Then to import it, add it to the custom header or footer. `custom/templates/custom/header.tmpl`
```html
<link rel="stylesheet/less" type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.less" />
<script src="//cdn.jsdelivr.net/npm/less" ></script>
```

or if using pure CSS

Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.css` and import it using a custom header file `custom/templates/custom/header.tmpl`:
```html
<link rel="stylesheet/less" type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
<link type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
```