Wikidot saving page dialogues

The easiest way to style wikidot saving page dialogues.

When making a wikidot theme, one of the hardest things to style is the saving page dialogue, because until now, the only way to see it properly has been to save a page over and over, and try to catch a glimpse before it disappears again. Well, at least this is how I did it. Until a couple of weeks ago, that is, when I decided there must be an easier way. So I made a html document that shows the dialogues permanently. It's a little bit rough, but it gets the job done.

If you're developing a wikidot theme and would like to style the saving page dialogues and popup windows, it's now a whole lot easier. You can see the document online, and use your browser's web developer tools, or save it to your computer to use locally.

To give you a bit of a head start, I've populated the CSS file below with some of the ids and classes that you'll need to style the popups properly. This file is linked to in the html document. And one last thing - note that for the saving page dialogue, the cycling red box is actually an animated gif, which you can replace with any image. Have fun!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link rel="stylesheet" type="text/css" media="screen" href="http://static-l.wikidot.com/v--ad25cc60ab9c/common--theme/base/css/style.css?0" />
        <style type="text/css">
    /* Saving Dialogues */          
html, body {
    z-index: 0;
}
 
.odialog-shader{
    width: 100%;
    height: 100%;
    z-index: -20;
}
#odialog-container {
    display: ;
}    
    </style>
    <link rel="stylesheet" type="text/css" media="screen" href="http://css3.wdfiles.com/local--code/blog-development:wikidot-saving-page-dialogues-now-easier-to/2" />
 
        <title>Wikidot Loading Dialogues</title>
 
    </head>
    <body>
        <div id="container-wrap-wrap">
        <div id="container-wrap">
            <div id="container">
                <div id="header">
                    <h1>BMC Loading Dialogue Tester</h1>
                    <h2>for wikidot theme developers</h2>
                </div>
 
        <div id="content-wrap">
            <div id="main-content">
                <div id="page-content"></div>
 
            <h1 id="toc0"><span>BMC Loading Dialogue Tester</span></h1> 
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus arcu libero, aliquet sit amet, ornare quis, vulputate a, nibh. Aliquam sit amet lectus vitae ligula feugiat condimentum. Proin eu mauris. Suspendisse ac sem. Cras in quam in augue fringilla porttitor. Nulla facilisi. Aliquam erat volutpat. Morbi consectetuer, libero at iaculis fermentum, dolor velit tincidunt sapien, lacinia ultricies ligula dui eget orci. Maecenas magna quam, volutpat ut, auctor et, malesuada quis, quam. Fusce semper pharetra mi. Aliquam facilisis tortor ut ante. Nam dignissim, ipsum et pharetra pretium, est sem feugiat sapien, a mattis elit sem vitae neque. Ut nec nibh. Ut sagittis magna nec velit. Maecenas ut eros. Duis lectus. Sed venenatis. Fusce iaculis urna euismod neque.</p> 
<h2 id="toc2"><span>Header 2</span></h2> 
<p>Etiam elementum. Curabitur magna. Nulla facilisi. Donec dapibus sagittis diam. Duis sodales placerat nisi. Sed varius. Etiam fermentum iaculis nunc. Pellentesque dictum fringilla diam. In hac habitasse platea dictumst. Maecenas at purus. Etiam molestie, magna eget pharetra pretium, leo ligula lobortis sem, vitae bibendum erat ligula et nibh. Suspendisse pharetra nibh at tortor. Curabitur libero. In elementum pulvinar ipsum. Pellentesque tempus lobortis purus. Nullam erat enim, convallis in, faucibus non, lobortis ac, sem. Aenean aliquam.</p> 
<h3 id="toc3"><span>Header 3</span></h3> 
<p>Nunc iaculis urna elementum quam. Suspendisse tristique eros quis massa. Sed iaculis, ligula at posuere tempor, lectus libero fringilla eros, a vehicula felis magna non pede. Donec ac lacus. Donec risus erat, rutrum sed, ornare at, suscipit a, nibh. Nullam posuere laoreet purus. Duis aliquet sollicitudin felis. Pellentesque ipsum. Praesent vel libero. Phasellus suscipit aliquet tortor. Fusce ornare blandit risus. Vivamus venenatis blandit pede. Nullam massa. Ut placerat fringilla neque. Nam tortor magna, imperdiet ut, volutpat in, lobortis vitae, sem. Donec in nisi ac leo fermentum eleifend.</p> 
<h4 id="toc4"><span>Header 4</span></h4> 
<h4 id="toc5"><span>Code Block</span></h4> 
 
<h5 id="toc6"><span>Header 5</span></h5> 
<p>Some regular text underneath it.</p> 
<h6 id="toc7"><span>Header 6</span></h6> 
<p>How different is it to normal text?</p> 
<p><em>italic text</em><br /> 
<strong>bold text</strong><br /> 
<em><strong>italic and bold</strong></em><br /> 
<span style="text-decoration: underline;">underline text</span><br /> 
<span style="text-decoration: line-through;">strikethrough text</span><br /> 
<tt>teletype (monospaced) text</tt><br /> 
normal<sup>superscript</sup><br /> 
normal<sub>subscript</sub><br /> 
<span style="color:red">custom <em>span</em> element</span> custom span element<br /> 
<span style="color: blue;">predefined</span> or <span style="color: #44FF88;">custom-code</span> color</p> 
<hr /> 
<p><span style="font-size:smaller;">smaller text</span><br /> 
<span style="font-size:larger;">larger text</span><br /> 
<span style="font-size:80%;">80% of current size</span><br /> 
<span style="font-size:100%;">100% of current size</span><br /> 
<span style="font-size:150%;">150% of current size</span><br /> 
<span style="font-size:0.8em;">80% of current size</span><br /> 
<span style="font-size:1em;">100% of current size</span><br /> 
<span style="font-size:1.5em;">150% of current size</span></p> 
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
 
        <div id="odialog-container">
            <div class="owindow owait" style="left: 50%; margin-left: -100px; top: 200px; visibility: visible; opacity: 1;" id="owindow-1">
                <div class="content">Saving page...</div>
            </div>
 
            <div class="owindow osuccess" style="left: 50%; margin-left: -100px; top: 300px; visibility: visible; opacity: 1;" id="owindow-2">
                <div class="content">Page saved!</div>
            </div>
 
            <div class="owindow" style="left: 50%; margin-left: -370px; top: 380px; visibility: visible; opacity: 1;" id="owindow-3">
 
                <div class="title" id="ohandle-1">Bug Report</div>
                <div class="content">
                    <h1>Report a problem with Wikidot.com</h1>
                    <p>If you think you have found a bug or simply something does not work as expected,
                    please fill a bug report.</p>
                    <p>    Currently the list of bugs is maintained at:</p>
                    <p style="font-weight: bold; font-size: 180%; text-align: center">
                        <a href="http://feedback.wikidot.com/">feedback.wikidot.com</a>
                    </p>
                    <div class="button-bar">
                        <a href="#" class="button-close-message">close window</a> 
                    </div>
                </div>
            </div>
 
        </div>
        <div id="odialog-shader" class="odialog-shader"></div>
    </body>
</html>

/* Unleash your creativity, style those popups! */
 
.odialog-shader { /* the background shader */
    background-color: #222;    
    filter: alpha(opacity=60);
    opacity: 0.6;
}
 
.owindow { 
    /* container for all dialogues */
}
.owindow .title {
    /* title for some dialogues */
}
.owindow .content {
    /* inside content for all dialogues */
}
.owindow .button-bar {
    /* holds the buttons for some dialogues */
}
.owindow .button-bar a.button-close-message {
    /* the close button */
}
.owindow .button-bar a {
    /* sometimes you need to override styles from the base document here */
}
.owindow.owait {
    /* 'Saving page' dialogue */
}
.owindow.owait .content { 
    background: url(my-animated-gif.gif); /* Replace this image! */
}
.owindow.osuccess { 
    /* 'page save successful' dialogue */
}

CSS on Wikidot

Wikidot - mastered.

CSS

wikidot

Wonderful Wikidot and beautiful CSS. Together at last.

Wikidot saving page dialogues

The easiest way to style wikidot saving page dialogues.

Discussion - No comments yet…5 comments

Post preview:

	or Sign in as Wikidot user
	(will not be published)