Old Newspaper Dashboard
Dashboard

Old Newspaper Dashboard

Install
scanime
12th Dec, 2023
16 installations 10 likes

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.


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 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.


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

To make a more modern/cleaner looking newspaper, use the following lines to turn off grayscale:

section.content > div.dashboard-widgets { filter: grayscale(0); }

Latest version 1.3

Released 1 year ago on 12th Dec, 2023

  • Updated for Kanka 2.0!
  • Newspaper styling only applied to dashboards with a newspaper title header.
  • The film grain does not work currently.
  • Newspaper header no longer uses separate entity. 
    • NOTE: This means you'll need to update any newspaper header and change it from an entity preview to a header.

CSS rules

#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) { 
  --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');   
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) { background: url(https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/newspaper.jpg); background-size: 100% 100%; box-shadow: inset 0 7px 14px -1px rgb(50 50 50 / 75%); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets { font-family: 'Lora', serif;filter: grayscale(1); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget-header a:not(.widget-image) { font-family: 'Lora', serif; }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget {background: none;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box {border: none; position: relative;background: url(https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/newspaper.jpg);background-position: center;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-header {border: none;padding-bottom: 5px;padding-left: 0;padding-right: 0;display: flex;flex-direction: column-reverse;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-body {padding: 5px 0 10px 0;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-body > div > div.entity-content p { text-align: justify; text-justify: inter-word; }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ) { background: var(--adstrip1); background-size: cover; background-position-y: top; background-position-x: center; background-repeat: repeat-y; }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ):nth-of-type(8n+1) { background-image: var(--adstrip2); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ):nth-of-type(8n+2) { background-image: var(--adstrip3); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ):nth-of-type(8n+3) { background-image: var(--adstrip4); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ):nth-of-type(8n+4) { background-image: var(--adstrip5); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ):nth-of-type(8n+5) { background-image: var(--adstrip6); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ):nth-of-type(8n+6) { background-image: var(--adstrip7); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:not( .widget-header ):nth-of-type(8n+7) { background-image: var(--adstrip8); }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget-header i.ra.ra-skull { display: none; }
/* Entities with images */
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-header a.widget-image {transition: none;border-radius: 0;background-size: cover;background-position-y: calc(24pt + 10px);width: 100%;position: relative;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-header a.widget-image img { aspect-ratio: 4/3; object-fit: cover; }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-header a.widget-image:after {
  /* content: ''; */ /* too messy for now */
  background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/grain-2b.png);
  display: inline-block;
  height: calc( 100% - 25pt);
  /* margin-top: calc( -800px + 10px + 24pt); */
  position: relative;
  width:100%;
  top: calc( -100% + 20pt);
}
@media (min-width: 991px)  {
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-6 div.widget > div.bg-box > div.panel-heading.panel-heading-entity:after,
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-9 div.widget > div.bg-box > div.panel-heading.panel-heading-entity:after,
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-12 div.widget > div.bgbox > div.panel-heading.panel-heading-entity:after {
    height: calc( 400px - 10px - 48pt);
  }
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-header a:not(.widget-image) {background: none;color: #636b6f!important;text-shadow: unset;padding: 0;font-weight: 700;font-size: 175%;} 
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.widget > div.bg-box > div.widget-header a:not(.widget-image):hover { color: var(--link-hover); }
@media (min-width: 991px)  {
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-6 div.widget > div.panel > div.panel-heading.panel-heading-entity,
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-9 div.widget > div.panel > div.panel-heading.panel-heading-entity,
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-12 div.widget > div.panel > div.panel-heading.panel-heading-entity {
    background-position-y: calc(48pt + 10px);
  }
}
/* Newspaper header */
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > .widget h3.widget-header-text.newspaper-title {font-family: 'UnifrakturMaguntia', cursive;font-size: calc( 500% + 2vw );color: #636b6f;margin: 0;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > .widget-header:has( h3.widget-header-text.newspaper-title ) {margin-top: -2.5rem;margin-bottom: -2.5rem;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets .widget-header:has( > .newspaper-header ) { padding-top: 0; padding-bottom: 0; width:calc(100% + 1.25rem); border: none; border-top: 1px solid #555; border-bottom: 1px solid #555; }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets .widget-header:has( > .newspaper-header.right ) {width: 100%;}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets .widget-header > .newspaper-header { margin: 0; font-size: 1rem; color: #636b6f; font-family:'Lora',serif; }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets .widget-header > .newspaper-header.left { text-align: left; }
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets .widget-header > .newspaper-header.right { text-align: right; }
@media (max-width: 992px) { #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets .widget-header > .newspaper-header { font-size: 0.75rem; } }
/* Custom Headlines */
div.widget.widget-header > h3.newspaper-headline { 
  -webkit-transform:scale(1.5,1); /* Safari and Chrome */
  -moz-transform:scale(1.5,1); /* Firefox */
  -ms-transform:scale(1.5,1); /* IE 9 */
  -o-transform:scale(1.5,1); /* Opera */
  transform:scale(1.5,1); /* W3C */  
  letter-spacing: 0.1vw;
  overflow: hidden;
  text-overflow: ellipsis;  
  font-family: 'Lora', serif; 
  font-weight: 800;  
  text-transform: uppercase; 
  font-size: calc(16px + 6 * ((200vw - 320px) / 680));
  width: calc( 100% / 1.5 );
  margin-left: calc( 25% / 1.5 );  
  color: #636b6f;
}
body.sidebar-collapse div.content-wrapper div.widget.widget-header > h3.newspaper-headline { font-size: calc(16px + 6 * ((280vw - 320px) / 680)); }
@media (max-width: 992px) { div.widget.widget-header > h3.newspaper-headline { font-size: calc( 100% + 1.5vw ); } }
/* Fake old time ads */
/*
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.row {  overflow: hidden; align-self: stretch; }
div.widget > .newspaper-article:after
{
  background-image: var(--adstrip1);
  background-repeat: repeat-y;
  background-position: top center;
  content: '';
  display: inline;
  height: 1000%;
  position: absolute;
  background-size: contain;
  overflow: hidden;
  width: 100%;
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:nth-of-type(2) > .newspaper-article:after {
  background-image: var(--adstrip2);
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:nth-of-type(3) > .newspaper-article:after {
  background-image: var(--adstrip3);
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:nth-of-type(4) > .newspaper-article:after {
  background-image: var(--adstrip4); 
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:nth-of-type(5) > .newspaper-article:after {
  background-image: var(--adstrip5);
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:nth-of-type(6) > .newspaper-article:after {
  background-image: var(--adstrip6);
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.widget:nth-of-type(7) > .newspaper-article:after {
  background-image: var(--adstrip7);
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets > div.row:nth-of-type(even) > div:nth-of-type(4) div.panel.widget-preview.newspaper-article:after {
  background-image: var(--adstrip8);
}
*/
/* Don't show ads on single column */
@media (max-width: 992px) { #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.panel.widget-preview.newspaper-article:after { background: none; height: unset; content: unset; } }
/* Headlines/title links */
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets h3.panel-title > a { font-family: 'Lora', serif; font-weight: 800; font-size: 150%; color: #636b6f; }
@media (min-width: 991px)  {
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-6 h3.panel-title > a, 
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-9 h3.panel-title > a,
  #campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.col-md-12 h3.panel-title > a { font-size: 300%; }
}
/* Circle links */
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.entity-content a.entity-mention { background: url(https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/circle.png);
    background-size: 100% 100%; background-position: center center; padding: 5px; margin: -5px;  
    font-family: 'Lora', serif;
    color: black; 
}
#campaign-dashboard > section.content:has( h3.widget-header-text.newspaper-title ) div.dashboard-widgets div.entity-content a.entity-mention:hover { background: url(https://raw.githubusercontent.com/scanime/kanka/main/css/left-field/circle.png);
    background-size: 100% 100%; background-position: center center; padding: 5px; margin: -5px;  
    font-family: 'Lora', serif;
    color: black; 
}
/* Custom Headlines */
div.widget-header-text .widget-header > h3.newspaper-headline { 
  -webkit-transform:scale(1.5,1); /* Safari and Chrome */
  -moz-transform:scale(1.5,1); /* Firefox */
  -ms-transform:scale(1.5,1); /* IE 9 */
  -o-transform:scale(1.5,1); /* Opera */
  transform:scale(1.5,1); /* W3C */  
  letter-spacing: 0.1vw;
  overflow: hidden;
  text-overflow: ellipsis;  
  font-family: 'Lora', serif; 
  font-weight: 800;  
  text-transform: uppercase; 
  font-size: calc(16px + 6 * ((200vw - 320px) / 680));
  width: calc( 100% / 1.5 );
  margin-left: calc( 25% / 1.5 );  
  color: #636b6f;
}
body.sidebar-collapse div.content-wrapper div.widget.widget-header > h3.newspaper-headline { font-size: calc(16px + 6 * ((280vw - 320px) / 680)); }
@media (max-width: 992px) { div.widget.widget-header > h3.newspaper-headline { font-size: calc( 100% + 1.5vw ); } }

Font @import rules

@import url('https://fonts.googleapis.com/css2?family=Lora&family=UnifrakturMaguntia&display=swap');
 Install

User comments & reviews