AuthorTopic: Temporary Forum Skin!  (Read 6711 times)

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Temporary Forum Skin!

on: August 14, 2015, 10:58:37 am
As a stopgap solution to the aesthetically displeasing default SMF theme, I spent the last 5 hours writing a pure CSS fix to revert the forum to its previous, glorious skin.
Currently you can use a plugin like Stylish and add the following code:

Code: [Select]
/* ############################## Pixelation ################################# */

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("wayofthepixel.net") {
  a:link
  {
    color: #000000;
    text-decoration: underline;
  }
  a:visited, a:hover
  {
    color: #323232;
    text-decoration: underline;
  }

  /* Navigation links - for the link tree. */
  .nav, .nav:link, .nav:visited
  {
    color: #A79F99;
    text-decoration: none;
  }
  a.nav:hover
  {
    font-weight: bold;
    color: #C7C4B5;
    text-decoration: underline;
  }

  /* Tables should show empty cells. */
  table
  {
    empty-cells: show;
  }

  /* By default (td, body..) use Tahoma in black. */
  body, td, th
  {
    color: #000000;
    font-size: small;
    font-family: verdana, arial, sans-serif;
  }
 
  /* Remove Background Image */
 
  #wrapper, #header div.frame, #header, #content_section div.frame, #content_section, body, .navigate_section,
  .catbg, tr.catbg th, tr.catbg th.first_th, tr.catbg th.last_th, h3.catbg, div.cat_bar,
  div.title_barIC h4.titlebg, div.title_barIC, .buttonlist ul li a span, .buttonlist ul li a,
  .buttonlist ul li a span:hover, .buttonlist ul li a:hover, .buttonlist ul li a.active, .buttonlist ul li a.active span,
    .roundframe, span.upperframe, span.upperframe span, .buttonlist ul li a:hover, .buttonlist ul li a:hover span,
    h4.titlebg, div.title_bar, .dropmenu li a.active, .dropmenu li a.active span {
    padding: 0;
    margin: 0;
    background: none
  }
 
  /* Background Colors */
 
  .windowbg, .stickybg, .lockedbg, .description, .roundframe,
  span.upperframe, #display_jump_to { background-color: #A79F99 }
  .windowbg2, .stickybg2, .lockedbg2, #upshrinkHeaderIC { background-color: #BBB3A9 }
  .user, .news p { background-color: #C4C1B8 }
  .button_submit { background: none; background-color: #fff }
  .pagesection, #boardindex_table h3.catbg, h4.titlebg { background-color: #c0c0c0 !important }
  div.cat_bar, .pagesection .buttonlist ul li a { background-color: #828181 }
 
 
  body {
    background-color: #443D49;
    width: 111.11%;
    margin-left: -5.555%
  }

  /* Header */
 
 
  #header {
    position: relative;
    padding: 12px 30px 4px 30px;
  }
 
  #smflogo { display: none }
  h1 { width: 100% }
  h1 a { display:block; background: #414955 url(https://web.archive.org/web/20100611213950im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/smflogo.gif) no-repeat; width: 100%; height: 72px; text-indent: -150px }
 
  #upshrink {
    left: 0;
    height: 0;
    font-size: 0;
    position: relative;
    content: "I'm just fake content :)"
  }
  body:not(:-moz-handler-blocked) img:before {
    width: 50px;
    display: block;
    padding:125px;
  }
  img[src*="upshrink"]::before {
    position: absolute;
    top: 50px;
    left: -50%;
    display: block;
    background-color: red;
    width: 500px;
    height: 500px;
    content: 'hsatnastronei';
    background-image: url(https://web.archive.org/web/20090321204021/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/upshrink.gif);
  }
 
  #upper_section { padding-bottom: 15px; margin-bottom: 0 }
  #upper_section > div:first-child { display: none }
 
  .user, .news h2 {
    border-top: 12px solid #80888B;
    margin-top: 30px;
    position: relative
  }
  .user, .news p { padding: 5px }
  div#upper_section div.user { overflow: visible }
  .user::before, .news h2::before {
    display: block;
    position: absolute;
    top: -18px;
    left: 0;
    height: 18px;
    width: 100%;
    background: url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/english/userinfo.gif) no-repeat;
    content: '';
  }
  div#upper_section div.user .avatar { margin: 12px }
  div#upper_section div.user ul { margin-top: 3.5em }
 
  .news { position: relative }
  .news h2 { height: 0; color: transparent;  }
  .news h2::before {
    background-image: url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/english/newsbox.gif);
  }
  .news a:link { border: none; vertical-align: bottom; display: inline-block; position: relative }
  .news a:link::before { display: block; position: absolute; content: ''; width: 100%; height: 100%; box-shadow: inset 0 0 5px -1px #333; }
  div#upper_section div.news p {
    margin: 0;
    display: block
  }
  #search_form {
    position: absolute;
    bottom: -40px
  }
 
  /* Board */
 
  #content_section {
    background: none;
    background-color: #443D49;
    padding: 7px 20px 14px
  }
  #content_section .navigate_section ul { border: none; color: #A79F99; padding: 3px }
  .navigate_section a { font-weight: bold; color: #A79F99; text-decoration: none }
  .pagesection { border: 2px #828181 solid; padding: 3px; color: #000; font-weight: bold; margin-bottom: 7px }
 
  h3.catbg, h3.catbg2, h3.catbg3 {
    text-indent: 1em;
    font-weight: bold;
    background-color: transparent;
    color: #000000;
  }
  tr.catbg th, tr.catbg th a:link, tbody .subject strong{ color: black; font-weight: normal }
  table.table_grid td { border-color: #828181 }
  .table_grid tr.catbg, .topic_table table thead { border: none }
  .topic_table td.lockedbg2 { background-position: 98% 10px }
 
  h3.catbg, .table_list tbody.header td a, .poster h4 a {
    font-size: 13px;
    color: #000;
  }
  #forumposts .cat_bar { padding: 2px 5px 0; margin: 0 }
  tbody.header {
    display: table;
    box-sizing: border-box;
    width: 100%;
    background-color: #828181;
    padding: 2px 2px 0
  }
  table { border-spacing: 1px; box-sizing: border-box }
  .table_list tbody.content td.info a.subject { color: #000 }
  .catbg .unreadlink, .catbg .collapse { display: none }
 
  tbody.content {
    display: table;
    box-sizing: border-box;
    margin-top: -1px;
    width: 100%;
    padding: 5px;
    background-color: #828181;
    padding: 0 2px 2px
  }
 
  /* Pagelinks */
 
  .pagesection .buttonlist ul li a { display: block; padding: 3px 7px; margin: -3px 5px 0; text-decoration: none }
  .pagesection .buttonlist ul li a:hover { display: block; padding: 3px 7px; margin: -3px 5px 0; text-decoration: none }
  .pagesection { overflow: visible; height: 2.3em; position: relative }
  .pagesection .nextlinks { position: absolute; margin-top: -2.3em; right: 0 }
  .nextlinks_bottom { position: absolute; right: 0; margin-top: 3.5em }
  .nextlinks a, .nextlinks_bottom a { color: #A79F99 }
  .pagesection .buttonlist ul, .pagesection .pagelinks { height: 2.3em; box-sizing: border-box; vertical-align: middle; padding: 4px }
  .pagesection .buttonlist ul { overflow: hidden; margin-bottom: 0 }
 
  .table_frame .table_list td.info, .table_frame .table_list td.icon, .table_frame .table_list td.stats { border-right: 1px solid gray }
 
  .description, #display_jump_to { border: none }
 
  #footer_section, #posting_icons, span.clear.upperframe, span.lowerframe, #upshrink_ic,
  img.new_posts { display: none }
 
  div.roundframe { border: none; padding: 0}
  div.innerframe {
    background: none;
    border: none;
    background-color: #828181;
    padding: 2px 2px 0
  }
  div.roundframe div.cat_bar h3.catbg, div.roundframe div.cat_bar { background: none; text-align: center; text-decoration: none; font-weight: normal }
  div.title_barIC h4.titlebg { padding-left: 10px; border: 1px solid #828181; border-width: 0 1px }
  h4.titlebg img { display: none }
  #upshrinkHeaderIC p:first-of-type {
    padding: 5px;
    border: 1px solid #828181;
    position: relative;
    padding-left: 75px;
    height: 60px;
    margin: 0
  }
  #upshrinkHeaderIC p:first-of-type::before {
    top: -1px; left: -1px;
    box-sizing: border-box;
    position: absolute;
    display: block;
    margin: 0;
    border: 1px solid gray;
    width: 65px;
    height: 72px;
    content: '';
    background: #A79F99 url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/icons/info.gif) center no-repeat
  }
  #upshrinkHeaderIC p:first-of-type a[href$="recent"] { display: block; margin-top: 7px; color: darkgreen }
  #upshrinkHeaderIC p:first-of-type > a[href$="stats"] { display: block; float: left; margin-top: -33px; margin-left: 19.5em }
 
  #upshrinkHeaderIC p.last { text-align: center; border: 1px solid #828181; border-bottom-width: 3px }
  #upshrinkHeaderIC .inline.stats {
    padding: 5px;
    border: 1px solid #828181;
    border-width: 1px 1px 0;
    position: relative;
    padding-left: 75px;
    margin: 0
  }
  #upshrinkHeaderIC .inline.stats::before {
    top: -1px; left: -1px;
    box-sizing: border-box;
    position: absolute;
    display: block;
    margin: 0;
    border: 1px solid gray;
    width: 65px;
    height: 73px;
    content: '';
    background: #A79F99 url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/icons/online.gif) center no-repeat
  }
  #upshrinkHeaderIC .inline.smalltext { border: 1px solid #828181; border-width: 0 1px; padding: 5px; padding-left: 75px }
 
  /* Main Menu */
 
  #menu_nav > li > a { width: 76px; height: 16px; color: transparent; margin: 0 5px }
 
  #button_home > a {
    background: url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/english/home.gif) no-repeat
  }
  #button_help > a {
    background: url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/english/help.gif) no-repeat
  }
  #button_search > a {
    background: url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/english/search.gif) no-repeat
  }
  #button_profile > a {
    background: url(http://i.imgur.com/ZGg1EAP.png) no-repeat
  }
  #button_pm > a {
    background: url(http://i.imgur.com/EtVAm10.png) no-repeat
  }
  #button_mlist > a {
    background: url(http://i.imgur.com/DJ9AjD3.png) no-repeat
  }
  #button_login > a {
    background: url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/english/login.gif) no-repeat
  }
  #button_logout > a {
    background: url(http://i.imgur.com/RC3hxY2.png) no-repeat
  }
  #button_register > a {
    background: url(https://web.archive.org/web/20090321204021im_/http://www.wayofthepixel.net/pixelation/Themes/darknew/images/english/register.gif) no-repeat
  }
 
  .dropmenu li a.active span.firstlevel,.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel,.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel,.dropmenu li li a:hover, .dropmenu li li:hover>a { background: none }
 
  /* Content */
 
  .windowbg span.topslice, .windowbg span.botslice, .windowbg2 span.topslice, .windowbg2 span.botslice,
  .windowbg span.topslice span, .windowbg span.botslice span, .windowbg2 span.topslice span, .windowbg2 span.botslice span
  { background-image: none }
 
  .signature, .inner { border-top-color: #828181 }
 
  #searchform fieldset { text-align: center }
  #searchform fieldset a:link { text-decoration: none }
  #detailedinfo div.content dl { border-bottom-color: #828181 }
  #admin_menu > ul > li > a { color: #fff; margin: 5px }
  #preview_body { background-color: transparent }
 
  /* Text Formatting */
 
  .bbc_link:link { border: none }
 
  /* Input boxes - just a bit smaller than normal so they align well. */
  input, textarea, button
  {
    font-size: 9pt;
    color: #000000;
    font-family: verdana, arial, sans-serif;
  }

  /* All input elements that are checkboxes or radio buttons. */
  input.check
  {
  }

  /* Selects are a bit smaller, because it makes them look even better 8). */
  select
  {
    font-size: 8pt;
    font-weight: normal;
    color: #000000;
    font-family: verdana, arial, sans-serif;
  }

  /* Standard horizontal rule.. ([hr], etc.) */
  hr, .hrcolor
  {
    height: 1px;
    border: 0;
    color: #828181;
    background-color: #828181;
  }

  /* A quote, perhaps from another post. */
  .quote, blockquote.bbc_standard_quote
  {
    background: none;
    color: #000000;
    background-color: #D4D2C8;
    border: 1px solid #828181;
    margin: 5px;
    padding: 5px;
    font-size: x-small;
    line-height: 1.4em;
  }

  /* A code block - maybe even PHP ;). */
  .code, code.bbc_code
  {
    color: #000;
    background-color: #D4D2C8;
    font-family: "courier new", "times new roman", monospace;
    font-size: x-small;
    line-height: 1.3em;
    /* Put a nice border around it. */
    border: 1px solid #828181;
    margin: 1px auto 1px auto;
    padding: 1px;
    width: 99%;
    /* Don't wrap its contents, and show scrollbars. */
    white-space: nowrap;
    overflow: auto;
    /* Stop after about 24 lines, and just show a scrollbar. */
    max-height: 24em;
  }

  /* The "Quote:" and "Code:" header parts... */
  .quoteheader, .codeheader
  {
    color: #414955;
    margin: 3px;
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    font-size: x-small;
    line-height: 1.2em;
  }

  /* Generally, those [?] icons.  This makes your cursor a help icon. */
  .help
  {
    cursor: help;
  }

  /* /me uses this a lot. (emote, try typing /me in a post.) */
  .meaction
  {
    color: #613954;
  }

  /* The main post box - this makes it as wide as possible. */
  .editor
  {
    width: 96%;
  }

  /* Highlighted text - such as search results. */
  .highlight
  {
    background-color: #AEE6C3;
    font-weight: bold;
    color: #414955;
  }
 

  /* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
  h4.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
  {
    color: #000000;
    font-style: normal;
    background-color: #828181 !important;
  }
  .titlebg a:hover, .titlebg2 a:hover
  {
    color: #C4C2B8;
  }

  /* This is used for tables that have a grid/border background color (such as the topic listing.) */
  .bordercolor
  {
    background-color: #828181;
  }

  /* This is used on tables that should just have a border around them. */
  .tborder
  {
    border: 2px solid #828181;
    background-color: #828181;
    padding: 0px;
  }

  /* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
  .smalltext
  {
    font-size: x-small;
    font-family: tahoma, helvetica, arial, sans-serif;
  }
  .normaltext
  {
    font-size: small;
  }
  .largetext
  {
    font-size: large;
  }

  /* This is the white header area where the title, menu bars, and header boxes are. */
  #header {
    background-color: #545B65 !important;
    border-bottom: 0px solid #545B65;
  }
  /* This is the main area of the forum, the part that's gray. */
  #bodyarea
  {
    background-color: #443D49;
  }
  /* And this is the bottom, where the copyright is, etc. */
  #footerarea
  {
    color: #000000;
    background-color: #545B65;
    border-top: 0px solid #545B65;
  }

  /* This is for the special header boxes on the top (user info, key stats, news box.) */
  .headertitles
  {
    background-color: #80888B;
    border: 0px solid #80888B;
    height: 12px;
  }
  .headerbodies
  {
    border: 0px solid #C4C1B8;
    background-color: #C4C1B8;
    background-repeat: repeat-x;
    background-position: bottom;
  }

  /* Posts and personal messages displayed throughout the forum. */
  .post, .personalmessage
  {
    width: 100%;
    overflow: auto;
    line-height: 1.3em;
  }

  /* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
  .signature
  {
    width: 100%;
    overflow: auto;
    padding-bottom: 3px;
    line-height: 1.3em;
  }
  /* No image should have a border when linked */
  a img{
    border: 0;
  }

  /* The AJAX notifier */
  #ajax_in_progress
  {
    background: #32CD32;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 18pt;
    padding: 3px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }

  /* firefox fix*/
  img { image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; }
}

It's not perfect, and what images I couldn't find from Archive.org I had to make up myself. If anyone has the originals, that would be nice.
Since this is pure CSS, it's hacky! I had to do some creative manipulating to get the current markup to look like the old Pixelation. So far only tested on FF.
I know Indigo's working on the new theme, this is a treat in the meantime.

Let me know what you think!
« Last Edit: August 14, 2015, 04:30:44 pm by Joe »

Offline Alex Sinigaglia

  • 0001
  • *
  • Posts: 90
  • Karma: +0/-0
  • aka G.o.D.
    • god-of-death-alex
    • View Profile

Re: Temporary Nostalgia Skin!

Reply #1 on: August 14, 2015, 02:12:36 pm
Is it only for Mozilla?

Edit: I just had to delete the first line ( the one that says "@-moz-document domain("wayofthepixel.net") {" ) to make it work on Chrome.
I like it.
« Last Edit: August 14, 2015, 02:37:30 pm by Alex Sinigaglia »

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Re: Temporary Forum Skin!

Reply #2 on: August 14, 2015, 04:33:58 pm
Yea I don't think the Chrome version likes the -moz-document selector.
Just make sure you set it for Pixelation only, otherwise it'll rewrite styles everywhere.
Glad you like it  ;D

I updated the OP with better pagelink header/footers.

Offline PsylentKnight

  • 0010
  • *
  • Posts: 270
  • Karma: +0/-0
    • View Profile

Re: Temporary Forum Skin!

Reply #3 on: August 14, 2015, 07:36:20 pm
I like it. It's a very nice change. Thanks!
Mommy's Boy: Development Blog  Youtube  Contact: MommysBoyGame or Psylent-Knight@hotmail
View all my game assets at 300% zoom (click twice)

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Temporary Forum Skin!

Reply #4 on: August 14, 2015, 09:53:05 pm
Oh my god, I love you! This is amazing :D

Edit: Although it takes some getting used to :/
I've grown so used to the visual cues of the previous theme, I find the this one hard to browse in..
« Last Edit: August 14, 2015, 10:28:15 pm by Seiseki »

Offline Indigo

  • Administrator
  • 0011
  • *
  • Posts: 946
  • Karma: +0/-0
  • Artist, Indie Game Dev
    • DanFessler
    • DanFessler
    • http://pixeljoint.com/p/849.htm
    • DanFessler
    • DanFessler
    • View Profile
    • Portfolio

Re: Temporary Forum Skin!

Reply #5 on: August 14, 2015, 10:55:21 pm

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: Temporary Forum Skin!

Reply #6 on: August 14, 2015, 11:48:52 pm
Awesome work Joe ;D Thank you!

And that new skin is looking great Indigo, can't wait (or maybe I can now :crazy:)

Offline Vagrant

  • 0010
  • *
  • Posts: 157
  • Karma: +0/-0
  • At your service.
    • @VagrantPixels
    • http://pixeljoint.com/p/43310.htm
    • View Profile

Re: Temporary Forum Skin!

Reply #7 on: August 15, 2015, 12:57:16 am
YES.

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Re: Temporary Forum Skin!

Reply #8 on: August 15, 2015, 07:57:15 pm
Happy to hear everyone else likes it too. Almost didn't share it but I thought there had to be someone else who'd appreciate it.

Dan I love that font, the simplicity, the angularity. I was worried when I read awhile back that the color scheme was changing but that feels right at home.
A suggestion, the nav buttons are a little overpowering, maybe a more neutral tone and then use that snazzy orange for the :hover?

There are a few more tweaks to be done, just colors/spacing overlooked etc. If anyone wants to submit corrections feel free.
Admins, if you host the old images it would just be a matter of copy/pasting & changing the urls to get a working theme up. I haven't used SMF myself but surely this could be added as an overriding stylesheet? Then everyone could enjoy it.

Offline pistachio

  • 0011
  • **
  • Posts: 639
  • Karma: +4/-0
  • Mostly lurking
    • http://pixeljoint.com/p/125138.htm
    • View Profile

Re: Temporary Forum Skin!

Reply #9 on: August 15, 2015, 11:53:10 pm
That's one funky new theme, like PJ 3.0 with some added ninja vibe, and that's exactly what it should be.

But the icon set needs some love:



I'm no web designer, so if anyone's listening out there just take this stuff with a grain of salt.