Recent changes to Wikidot base CSS

Recent changes to Wikidot base CSS

Some changes to the wikidot-base.css file that you may have missed.

Okay, so this post comes in two parts. The first being a little realisation I just had - if you have two pieces of text you want to compare, why not use wikidot? Create a page and save it with the first piece of text. Then edit that page and replace it with the second. Now go to history, and compare the two versions - so simple, yet I have never thought of it before.

This leads nicely on to the second part of the post (which is significantly bigger, and thus gets the title all to itself) - I used the method described above to compare a version of the wikidot base CSS I had saved from April 15, 2010, with a version from today; and there a quite a few differences - some which have gone unannounced, and some that I cannot explain. Now some of these changes may have happened a couple of months ago, and some only yesterday, but nonetheless, I'll try to get through them all. Here goes…

New: h3 is now bold

I actually noticed this earlier today while working on the previous post - all of a sudden the post taglines were bold, and I couldn't figure out why. Well now I know - they sneakily changed the h3 font-weight from normal to bold.

h3 {
    font-weight: bold;
    font-size: 130%;
}

New: #container-wrap-wrap is now relative

#container-wrap-wrap {
    position: relative;
}

New: #page-info-break

The #page-info-break sits just above the page options and clears any floats above it. Judging by the comment, I'd say it used to be styled inline, but was moved to the css file.

/* replaces in-line style of the element */
 
#page-info-break {
    clear: both;
    height: 1px;
    font-size:1px;
}

New: .preview-message now with z-index

.preview-message {
    position: absolute;
    right: 2em;
    border: 1px dashed #888;
    padding: 0.5em 1em;
    background-color: #FDD;
    max-width: 20em;
    opacity: 0.9;
    filter: alpha(opacity=90);
    z-index: 1;
}

New: styles for the revised hovertips

.footnote .f-heading, .equation .e-heading, .reference .r-heading {
    font-weight: bold;
}
 
.footnote .f-content, .reference .r-content {
    margin: 0.5em 0;
}
 
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    font-size: 90%;
}

New: white space added to code comparison

.inline-diff ins {
    background-color: #DDF;
    white-space: pre-wrap;
}
 
.inline-diff del {
    background-color: #FCC;
    white-space: pre-wrap;
}

New: .differences rules

Okay, so this is a biggy. This code is commented out in the file, which means it isn't being used. But it's new. Which means we may be looking at a new feature. And judging by the classes, I'd have a guess at a new code comparison feature, that supports both inline and side-by-side comparisons! And in case you want to know what those colours are:

  • This is #dfd - insert
  • This is #cfc - insert
  • This is #f88 - delete
  • This is #faa - delete
  • This is #fe9 - replace
  • This is #fde - replace
  • This is #fc0 - change replace
  • This is #f7f7f7 - skipped
  • This is #fdd - change replace / change delete
  • This is #dfd - change replace / change delete
  • This is #9e9 - change replace insert
  • This is #e99 - change replace delete

Of course, it's highly possible that I'm reading too much into this - I guess we'll just have to wait and see.

/* ------------------------------------------------------------------------- 
.Differences {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
 
.Differences thead th {
    text-align: left;
    border-bottom: 1px solid #000;
    background: #aaa;
    color: #000;
    padding: 4px;
}
 
.Differences tbody th {
    text-align: right;
    background: #ccc;
    width: 4em;
    padding: 1px 2px;
    border-right: 1px solid #000;
    vertical-align: top;
    font-size: 13px;
}
 
.Differences td {
    padding: 1px 2px;
    font-family: Consolas, monospace;
    font-size: 13px;
}
 
.DifferencesSideBySide .ChangeInsert td.Left {
    background: #dfd;
}
 
.DifferencesSideBySide .ChangeInsert td.Right {
    background: #cfc;
}
 
.DifferencesSideBySide .ChangeDelete td.Left {
    background: #f88;
}
 
.DifferencesSideBySide .ChangeDelete td.Right {
    background: #faa;
}
 
.DifferencesSideBySide .ChangeReplace .Left {
    background: #fe9;
}
 
.DifferencesSideBySide .ChangeReplace .Right {
    background: #fd8;
}
 
.Differences ins, .Differences del {
    text-decoration: none;
}
 
.DifferencesSideBySide .ChangeReplace ins, .DifferencesSideBySide .ChangeReplace del {
    background: #fc0;
}
 
.Differences .Skipped {
    background: #f7f7f7;
}
 
.DifferencesInline .ChangeReplace .Left, .DifferencesInline .ChangeDelete .Left {
    background: #fdd;
}
 
.DifferencesInline .ChangeReplace .Right, .DifferencesInline .ChangeInsert .Right {
    background: #dfd;
}
 
.DifferencesInline .ChangeReplace ins {
    background: #9e9;
}
 
.DifferencesInline .ChangeReplace del {
    background: #e99;
}
 
pre {
    width: 100%;
    overflow: auto;
}
 
 ------------------------------------------------------------------------ */

New: .wd-adunit

For ads I guess…

div.wd-adunit {
  text-align: center;
  margin: 5px auto;
  padding: 5px 0;
}

New: html editor button

This one probably comes from a while back when HTML blocks were introduced.

a.weditor-html{
  background-position: -946px 0;
}

New: HTML block iframes

Again, this is to do with the introduction of HTML blocks.

/* [[html]] block iframes */
iframe.html-block-iframe {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    height: 0;
    background: transparent;
}

New: navi bar and promo footer styles

My guess is this has something to do with them making the navi bar and footer ads optional on free sites.

/* Navi bar */
 
#navi-bar-shadow {
    height: 25px;
    /* only ie6: */
    _display: none;
}
 
#navi-bar {
    font-size: 12px;
    font-family: verdana, arial, helvetica;
    height: 24px;
    background-color: #CCC;
    background-image: url(../../../common--theme/base/images/shade2_n.png);
    background-position: bottom;
    border-bottom: 1px solid #444;
    color: #000;
    position:fixed;
    top:0px;
    width:100%;
    z-index:9999;
    overflow:hidden;
}
 
#navi-bar a {
    color: #119;
    background: transparent;
    padding:0; margin:0;
    text-decoration: none;
}
 
#navi-bar a:hover {
    background-color: transparent;
    text-decoration: none;
}
 
#navi-bar a.logo {
    position: absolute;
    left: 13px;
    top: 2px;
    width: 71px;
    height: 20px;
    background-image: url(../../../common--images/navibar/logo20.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='../../../common--images/navibar/logo20.png');
    z-index: 999;
}
 
#navi-bar a.logo span {
    display: none;
}
 
#navi-bar .new-site {
    position: absolute;
    left: 120px;
    top: 3px;
}
 
#navi-bar .new-site input.text{
    width: 120px;
    text-align: center;
}
 
#navi-bar .new-site input.empty{
    color: #666;
}
 
#navi-bar .share {
    position: absolute;
    left: 370px;
    top: 4px;
}
 
#navi-bar .share span {
    vertical-align: 3px;
}
 
#navi-bar .share img {
    width: 16px;
    height: 16px;
}
 
#navi-bar .action-buttons {
    display: block;
    position: absolute;
    top: 2px;
    right: 120px;
    height: 14px;
    padding: 2px;
    color: #000;
}
 
#navi-bar .action-buttons a {
    padding: 0 3px;
    color: #000;
}
 
#navi-bar .join {
    display: block;
    position: absolute;
    left: 570px;
    top: 4px;
    color: #000;
    font-weight: bold;
}
 
#navi-bar .random-site {
    display: block;
    position: absolute;
    top: 2px;
    right: 50px;
    height: 14px;
    padding: 2px;
    /*border: 1px solid #444;
    background-color: #F5F5F5;
    background-image: url(../../../common--theme/base/images/shade2_n.png);
    background-position: center 50px;*/
    color: #000;
}
 
#navi-bar .random-site:hover {
    border-color: #000;
}
 
#navi-bar .close {
    position: absolute;
    right: 5px;
    top: 5px;
}
 
/* Promotional footer */
 
#footer-bar {
    width: 750px;
    margin: 10px auto 0;
    padding-top: 10px;
    overflow: hidden;
    border-top: 1px solid #AAA;
}
 
#footer-bar h2 {
    font-size: 130%;
    padding: 5px 0;
    margin: 0;
    text-align: center;
    font-weight: bold;
}
 
#footer-bar .units {
  overflow: hidden;
}
 
#footer-bar .unit {
    float: left;
    width: 185px;
}
 
#footer-bar .unit .inner {
    padding: 5px 10px;
    text-align: center;
}
 
#footer-bar .unit .image {
    display: block;
    height: 60px;
    overflow: hidden;
    text-decoration: none;
}
 
#footer-bar h3 {
    margin: 0; padding: 5px 0 3px;
    font-size: 100%;
    font-weight: bold;
}
 
#footer-bar a {
    text-decoration: none;
    background: transparent;
    opacity: 1;
}
 
#footer-bar a:hover {
    text-decoration: none;
    background: transparent;
}
 
#footer-bar .desc {
    font-size: 80%;
}
 
#footer-bar .close {
    float:right;
    margin: 5px;
}
 
#footer-bar .ads-here {
  text-align: center;
  padding: 5px;
}

New: data form default styles

This is to do with error messages, hints and other data form related content.

/* DataForm default styles */
 
.form-table .form-value {
    display: block;
}
 
.form-table .form-error {
    border: 1px dotted red;
}
 
.form-table .form-hinted {
    color: #666;
}
 
.form-table .form-message {
    color: green;
    display: block;
}

New: 'ad related stuff'

I've got no idea what 'boonity' is?

/* Ad-related stuff */
#boonity_free_site_bottom {
    margin: 0 auto !important;
}

New: guest commenting mode

/* guest commenting mode */
table.guest-commenting {
    border-collapse: collapse;
    border: 0;
    padding: 0;
    margin-bottom: 2px;
}
 
table.guest-commenting td {
    padding: 2px 6px 0 0;
}
 
table.guest-commenting td input {
    margin: 0;
}
 
table.guest-commenting td label.hint {
    color: #666;
}

There was one other change picked up by the code comparer - but it was to do with the yui tabview, which is just too confusing for me to be bothered working out what the change was.

And lastly, here's my favourite bits of code from the wikidot-base.css file:

    height: 1%; /* for shitty IE opacity */
      ----
    font-size: 100%; /* ie6 sucks so much... */
      ----
    width: 99%; /* I love you IE */

If anyone has some more insightful comments about any of these changes, I'd love to hear them.

Enjoy the article? Tweet it!

tags — base-css code compare

Discussion - No comments yet…2 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.