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 Magical Kitties.
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 also use Text Header. You can have at least one and as many as three to create your folio. Create the text header like you did for the masthead, and under the Advanced tab, you'll want to set it to "newspaper-header left" for your first entry (if you want it left aligned). For an entry aligned in the middle, use "newspaper-header center" (without the quotes) and for a right aligned entry, you would use "newspaper-header right" instead. Make sure to set the width for your folio entries to be equal to 100%. So if you have three of them, your first could be 25%, the second 50%, and the last one 25%. You can see an example in my campaign using the link above.
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.
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.
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.
To make a more modern/cleaner looking newspaper, use the following lines to turn off grayscale:
section.content > div.dashboard-widgets { filter: grayscale(0); }
Released 11 months ago