Latest version 1.2
Released 1 year ago
Fix for faint text in dark mode.
Old Newspaper Dashboard en
Installations 9
Likes 4
Extra! Extra! Read all about it! The headlines will astound you when you turn your campaign dashboard into an old fashioned black and white newspaper. It can be used for any campaign that needs a slightly aged black and white newspaper look. Create mastheads, headlines, and turn your entities into articles! Pictures in the newspaper become black and white with a little wear and tear. Empty spaces are filled with classic newspaper ads, and links are circled in pencil.
See it in action in my campaign Left Field.
How To Use
There's a few steps to set up your dashboard. If you have any questions, feel free to ask me (scanime) on the Kanka Discord.
To create your masthead or newspaper title, add a widget and select Text Header. The custom widget name should be the title of your newspaper. Set it to 100% width. Click on the Advanced tab, and under CSS class, enter "newspaper-title" (without the quotes). Make sure this new widget is at the top.
Optionally, to create a folio or newspaper header (to show price, date, volume, location, etc.), you'll first need to create a new note entity. This note entity can be whatever you want, but must be visible to whoever is viewing the dashboard. Create a table that has three columns and one row. To do this, click the code view button that looks like < / > and paste this in:
<table class="table">
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
You can put whatever you'd like inside the table where it says One, Two, and Three. Price on the right, date on the left, or put the newspaper's city in the middle with the volume and issue in the last column. It's up to you! Once that's saved, you want to go back to your dashboard settings and add an Entity Preview widget. For the Entity, select the one you just made. Set the width to 100% and place a checkmark next to Display Full Entry. Click on the Advanced tab, and under CSS class, enter "newspaper-header" (without the quotes). Make sure to move the entry so it's under your masthead.
To create a newspaper headline, create a new Text Header widget. The custom widget name will be your headline. Set it to 100% width. Click on the Advanced tab, and under CSS class, enter "newspaper-headline" (without the quotes).
Articles are regular entity previews and can be set to any width. However, make sure to place a checkmark next to Display Full Entry and to go to the Advanced tab and enter "newspaper-article" (without the quotes) under CSS class.
Advanced Customization
To make bigger changes, you'll need to create a bit of CSS. To do this, go to Campaign and then Theming. Click the button for New Style and name it whatever you'd like.
Changing the Ads
The ads used in this theme were made for my campaign, and grabbed from Nebraskan newspapers published in 1947, when my campaign takes place. You can replace them with your own, but it requires a little bit of CSS know-how explained below.
Use the following lines, but replace the URLs with links to your own images:
:root {
--adstrip1: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip01.webp');
--adstrip2: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip02.webp');
--adstrip3: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip03.webp');
--adstrip4: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip04.webp');
--adstrip5: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip05.webp');
--adstrip6: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip06.webp');
--adstrip7: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip07.webp');
--adstrip8: url('https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/strip08.webp');
}
The eight different ad strips are alternated between the entities on the dashboard. If you don't have eight, you can duplicate it and use it more than once. The ad strips I created are about 2000 pixels tall by 700 pixels wide and contain multiple ads. You can use different sizes if you'd like, because the theme will resize it to fit the column.
Removing Grayscale & Photo Aging
To make a more modern/cleaner looking newspaper, use the following lines to turn off grayscale and photo aging:
section.content > div.dashboard-widgets { filter: grayscale(0); }
section.content > div.dashboard-widgets div.widget > div.panel > div.panel-heading.panel-heading-entity:after { background-image: none; }
