Thread:ChrisN34/@comment-27075564-20190703153858/@comment-27075564-20190721222457
Thanks and sure :) So first, change the link color in theme design to this hex color (it's a slightly softer yellow than what they use on the official site):
#ebe152
Then you need to put the following at the top of the CSS stylesheet (this imports a font make it use a more "digital" style to match the games' theme and sets it to be used as the default font for pages/headers):
@import url('https://fonts.googleapis.com/css?family=Play:400,700');
.WikiaPage .page-header {
font-family: 'Play', sans-serif;
font-weight: 400; /* This changes the header on every article */
}
.WikiaArticle {
font-family: 'Play', sans-serif;
}
And then you can throw all this in wherever, usually just at the bottom of the CSS. The hlist stuff and navbox are for navbox styles I'm working on upating (hlist essentially makes it a lot easier to list things in the navbox without having to manually copy/paste the circle everywhere).
/* siderail headers and wiki activity summary headers */
.WikiaRail .module h2, .dark_text_2 {
color:#27d1f4;
}
.WikiaArticle h2 {
border-bottom: none !important;
background-image:url("https://vignette.wikia.nocookie.net/cyberpunk/images/d/de/Cyber_small_header_bottom_yellow.svg");
background-repeat: no-repeat;
background-position: 25% 105%;
background-size: 100% 8px;
color: #27d1f4;
}
.WikiaArticle h3 {
color:#27d1f4;
}
/* prevent h2 style from affecting the TOC box */
#toctitle h2 {
background-image: none;
}
/*** portable infobox ***/
.portable-infobox {
position: relative;
margin-right:5px;
margin-top:5px;
border:1px solid #ffef00;
border-radius:10px 0px 0px 10px;
background-color:#111111;
padding-bottom:4px;
-moz-box-shadow:0px 0px 5px rgba(255,239,0,0.75);
-webkit-box-shadow:0px 0px 5px rgba(255,239,0,0.75);
box-shadow:0px 0px 5px rgba(255,239,0,0.75);
}
/* fixes it so right border overlaps any infobox images */
.portable-infobox::after {
content: "";
position: absolute;
width: 8%;
height: 100%;
top: 0px;
right: 0px;
background-image: url("https://vignette.wikia.nocookie.net/cyberpunk/images/6/60/Cyberpunk_2077_razor_vertical_edge.svg");
background-repeat: repeat-y;
background-size: 32px 1080px;
}
/* edits portable infobox headers and titles to center */
.pi-title {
background-color: transparent !important;
border-radius: 10px 10px 0px 0px;
color: #27d1f4;
border-bottom: none !important;
margin-top: 5px !important;
text-align:center;
background-image: none !important; /* prevents h2 article header from adding image to infobox headers */
}
.pi-header, .pi-horizontal-group .pi-header {
background-color:transparent;
color: #27d1f4;
border-bottom: #ffef00 solid 1px !important;
margin:5px 15px !important;
text-align: center;
font-size: 15px !important;
background-position: 0% 130% !important; /* fixes h2 article header from adding image for infobox */
}
/* captions */
.portable-infobox .pi-caption {
text-align: center;
line-height: 150%;
}
/* spacing between infobox rows */
.pi-item-spacing {
padding: 3px !important;
}
/* Eliminate border between rows */
.pi-border-color {
border-bottom-style: none !important;
}
/* portable infobox data labels (not input fields) */
.pi-data-label {
padding: 3px 5px 3px 1px;
text-align: right;
border-right:1px #ffef00 solid;
color: #27d1f4;
}
.pi-data-value {
padding-top: 3px;
padding-right: 12px;
}
/* removes the vertical line on smart groups */
.pi-smart-group .pi-smart-data-label, .pi-smart-group .pi-smart-data-value {
border: none !important;
}
/* to keep right border of infobox from possibly covering up text */
.pi-smart-group .pi-smart-data-label:last-child, .pi-smart-data-value:last-child {
padding-right: 14px !important;
}
/* removes data label background from smart groups and keeps them centered*/
.pi-smart-data-label {
background-color: transparent !important;
text-align: center;
}
/* all portable infobox images, including tabber images */
.pi-image {
background-color: transparent !important; /* will revert to default otherwise */
padding: 0.12em 0em .1em 0em !important; /*add a little padding around images so they don't go edge to edge*/
}
/* portable infobox thumbnail images only */
.pi-image-thumbnail {
background-color: transparent !important; /*will revert to default otherwise */
}
/* portable infobox thumbnail galleries fix */
.portable-infobox .pi-image-collection-tab-content {
background-color: transparent !important; /* makes it so whatever the infobox background is set to, it'll flow consistently behind the images, like patterns */
}
/*** tabber for portable infobox and images ***/
/* the whole tab row */
ul.pi-image-collection-tabs {
margin-bottom: 0.01em; /* this fixes it so the image doesn't overlap the tabs */
}
/* all tabs */
.pi-image-collection {
text-align: center;
font-size: 14px;
}
/* activated tab */
ul.pi-image-collection-tabs li.current {
background-color: transparent !important;
border: 0px none;
color: #ffef00;
}
/* activated hover tab */
ul.pi-image-collection-tabs li.current:hover {
background-color: transparent !important;
border: 0px none;
color: #27d1f4;
}
/* inactive tab */
ul.pi-image-collection-tabs li {
border: 0px none;
margin: 0px 4px;
}
/* inactive tab hover */
ul.pi-image-collection-tabs li:hover {
background-color: transparent !important;
border: 0px none;
color: #27d1f4;
}
/*** end code for tabber for portable infobox ***/
/* section edits for different panels in infobox. Not this is only for the new style that was added to the backend called "section" and may not be in use*/
.pi-section-label {
text-transform:none;
height:20px;
}
/* remove hyphenations from infobox so no splitting words */
.portable-infobox .pi-navigation,
.portable-infobox .pi-header,
.portable-infobox .pi-caption,
.portable-infobox .pi-data-value,
.portable-infobox .pi-data-label {
-webkit-hyphens:none;
-moz-hyphens:none;
-ms-hyphens:none;
hyphens:none;
}
/* === Tables of all kinds === */
/* default table (article-table) */
.article-table {
background-color: rgba(255, 255, 255, 0.05) !important;
}
.article-table th, .article-table td {
border-bottom: 1px #333333 solid;
}
.WikiaTable th, .WikiaTable td {
border-bottom: none;
}
.article-table th {
background-color: rgba(255, 255, 255, 0.15) !important;
}
/* removes the invisible tfoot html off tables so no extra space at bottom of tables */
.listing tfoot, .article-table tfoot, .WikiaTable tfoot {
display:none;
}
/*** custom table so just need to list the class and not change each one on site ***/
/**************************************/
/* quick list of classes */
/* */
/* metadata - image meta tab */
/* filehistory - image hist tab */
/* TablePager - ListFiles ListUsers */
/**************************************/
.WikiaTable, table.mw_metadata, #mw-imagepage-section-filehistory table, .TablePager {
margin:auto !important;
border:1px #394147 solid;
border-collapse:separate !important;
border-spacing: 2px !important;
}
/* cells */
.WikiaTable th, .WikiaTable td, table.mw_metadata th, table.mw_metadata td, #mw-imagepage-section-filehistory table th, #mw-imagepage-section-filehistory table td, .TablePager th, .TablePager td {
padding: 5px !important;
}
/* header */
.WikiaTable th, table.mw_metadata th, #mw-imagepage-section-filehistory table th, .TablePager th {
background:#074754;
text-align:center;
}
/* alternating rows */
.WikiaTable tr:nth-child(odd), table.mw_metadata tr:nth-child(odd), #mw-imagepage-section-filehistory table tr:nth-child(odd), .TablePager tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.15) !important;
}
.WikiaTable tr:nth-child(even), table.mw_metadata tr:nth-child(even), #mw-imagepage-section-filehistory table tr:nth-child(even), .TablePager tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* sets arrow colors for tables */
table.jquery-tablesorter.sortable th.headerSort .chevron:first-child {
border-color: transparent transparent #111111 !important;
}
table.jquery-tablesorter.sortable th.headerSort .chevron {
border-top-color: #111111 !important;
}
/* custom class for custom tables where background is too dark for default color */
table.lightheader th {
color: #e5e5e5 !important;
}
/* sets arrow colors for light header tables */
table.lightheader.jquery-tablesorter.sortable th.headerSort .chevron:first-child {
border-color: transparent transparent #e5e5e5 !important;
}
table.lightheader.jquery-tablesorter.sortable th.headerSort .chevron {
border-top-color: #e5e5e5 !important;
}
/* special code for file history table and metadata table on image description pages so it looks like the listing table class*/
.WikiaArticle .mw_metadata th, .WikiaArticle .mw_metadata td, #mw-imagepage-section-filehistory table th, #mw-imagepage-section-filehistory table td {
border: none;
}
/* special fix for metadata table to not override custom table header colors where needed */
.WikiaArticle .mw_metadata th {
background:#074754;
}
/* fix for listfile page as 2px is too much spacing */
.TablePager {
border-spacing:0px !important;
}
/* fix to remove listfiles weird hover issue */
.TablePager td {
background-color: transparent !important;
}
/* fix to remove too much padding around listfiles table */
.TablePager {
padding: 1px !important;
}
/* Style for horizontal lists (separator following item).
@source mediawiki.org/wiki/Snippets/Horizontal_lists
@revision 9 (2016-08-10)
@author [[User:Edokter]]
*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
display: none;
}
/* Generate interpuncts */
.hlist dt:after {
content: ": ";
}
.hlist dd:after,
.hlist li:after {
content: " · ";
font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
content: ")";
font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li:before {
content: " " counter(listitem) "\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
content: " (" counter(listitem) "\a0";
}
/* [[Template:Navbox]] and wide variant */
/* Default skin for navigation boxes. */
table.navbox { /* Navbox style */
border: 1px solid #4a4a4a;
width: 99% !important;
margin: auto;
margin-top: 5px;
margin-bottom: 5px; /* to keep glow going around the bottom */
clear: both;
font-size: 85%;
text-align: left;
padding: 1px;
border:1px solid #ebe152;
background-color: #111111;
-moz-box-shadow:0px 0px 5px rgba(255,239,0,0.75);
-webkit-box-shadow:0px 0px 5px rgba(255,239,0,0.75);
box-shadow:0px 0px 5px rgba(255,239,0,0.75);
}
/* slight different spacing for more than one navbox on a page */
table.navbox + table.navbox {
margin-top:-5px; /* for stacked navboxes, remove the glow between */
margin-bottom: 5px !important;
}
.navbox-title { /* Title style */
background-color:#074754 !important;
color: #e5e5e5;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 10%;
}
.navbox-group { /* Group style */
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
background-color: #074754;
}
.navbox .navbox-group a {
white-space: normal;
}
.navbox-list {
padding: 5px;
border-left: 2px solid #111111;
background-color:rgba(255,255,255,0.05) !important;
}
.navbox-subgroup .navbox-title {
background: transparent !important;
}
.navbox-subgroup .navbox-group {
padding-bottom: 5px;
border-left: 0;
background: transparent !important;
}
.navbox-subgroup .navbox-group a {
white-space: normal;
}
.navbox-subgroup .navbox-list {
background: transparent !important;
}