Legacy CSS Upgrade Converter - Bootstrap Playground

Legacy » Legacy CSS Upgrade Converter

By pasting your existing CSS code designed for Wikidot's legacy layout, the conversion engine will upgrade the "legacy IDs" and convert them into classes.
Converter version 1:

Automatic Conversion Table

	Original Legacy ID	New Converted Class
1	#container-wrap-wrap	.container-wrap-wrap
2	#container-wrap	.container-wrap
3	#container	.container
4	#header	.header
5	#top-bar	.top-bar
6	#login-status	.login-status
7	#header-extra-div-1	.header-extra-div-1
8	#header-extra-div-2	.header-extra-div-2
9	#header-extra-div-3	.header-extra-div-3
10	#content-wrap	.content-wrap
11	#side-bar	.side-bar
12	#main-content	.main-content
13	#action-area-top	.action-area-top
14	#page-title	.page-title
15	#breadcrumbs	.breadcrumbs
16	#page-tags	.page-tags
17	#page-info-break	.page-info-break
18	#page-options-container	.page-options-container
19	#footer	.footer
20	#license-area	.license-area
21	#extrac-div-1	.extrac-div-1
22	#extrac-div-2	.extrac-div-2
23	#extrac-div-3	.extrac-div-3
24	#extra-div-1	.extra-div-1
25	#extra-div-2	.extra-div-2
26	#extra-div-3	.extra-div-3
27	#extra-div-4	.extra-div-4
28	#extra-div-5	.extra-div-5
29	#extra-div-6	.extra-div-6

+ Show Source Code

— Hide Source Code

function FromLegacyIDtoCLASSY(body) {
    <!-- Wikidot Legacy CSS to Modern CSS Converter -->
    <!-- © James Kanjo 2014 -->
 
    <!-- Replacing Code -->
    body = body.replace(/[#]container-wrap-wrap([^-a-z0-9])/gi,'.container-wrap-wrap$1');
    body = body.replace(/[#]container-wrap([^-a-z0-9])/gi,'.container-wrap$1');
    body = body.replace(/[#]container([^-a-z0-9])/gi,'.container$1');
    body = body.replace(/[#]header([^-a-z0-9])/gi,'.header$1');
    body = body.replace(/[#]top-bar([^-a-z0-9])/gi,'.top-bar$1');
    body = body.replace(/[#]login-status([^-a-z0-9])/gi,'.login-status$1');
    body = body.replace(/[#]header-extra-div-1([^-a-z0-9])/gi,'.header-extra-div-1$1');
    body = body.replace(/[#]header-extra-div-2([^-a-z0-9])/gi,'.header-extra-div-2$1');
    body = body.replace(/[#]header-extra-div-3([^-a-z0-9])/gi,'.header-extra-div-3$1');
    body = body.replace(/[#]content-wrap([^-a-z0-9])/gi,'.content-wrap$1');
    body = body.replace(/[#]side-bar([^-a-z0-9])/gi,'.side-bar$1');
    body = body.replace(/[#]main-content([^-a-z0-9])/gi,'.main-content$1');
    body = body.replace(/[#]action-area-top([^-a-z0-9])/gi,'.action-area-top$1');
    body = body.replace(/[#]page-title([^-a-z0-9])/gi,'.page-title$1');
    body = body.replace(/[#]breadcrumbs([^-a-z0-9])/gi,'.breadcrumbs$1');
    body = body.replace(/[#]page-tags([^-a-z0-9])/gi,'.page-tags$1');
    body = body.replace(/[#]page-info-break([^-a-z0-9])/gi,'.page-info-break$1');
    body = body.replace(/[#]page-options-container([^-a-z0-9])/gi,'.page-options-container$1');
    body = body.replace(/[#]footer([^-a-z0-9])/gi,'.footer$1');
    body = body.replace(/[#]license-area([^-a-z0-9])/gi,'.license-area$1');
    body = body.replace(/[#]extrac-div-1([^-a-z0-9])/gi,'.extrac-div-1$1');
    body = body.replace(/[#]extrac-div-2([^-a-z0-9])/gi,'.extrac-div-2$1');
    body = body.replace(/[#]extrac-div-3([^-a-z0-9])/gi,'.extrac-div-3$1');
    body = body.replace(/[#]extra-div-1([^-a-z0-9])/gi,'.extra-div-1$1');
    body = body.replace(/[#]extra-div-2([^-a-z0-9])/gi,'.extra-div-2$1');
    body = body.replace(/[#]extra-div-3([^-a-z0-9])/gi,'.extra-div-3$1');
    body = body.replace(/[#]extra-div-4([^-a-z0-9])/gi,'.extra-div-4$1');
    body = body.replace(/[#]extra-div-5([^-a-z0-9])/gi,'.extra-div-5$1');
    body = body.replace(/[#]extra-div-6([^-a-z0-9])/gi,'.extra-div-6$1');
    <!-- Ensures HTML entities are interpreted literally -->
    body = body.replace(/&/gi,'&amp;'); 
    body = body.replace(/</gi,'&lt;');
    body = body.replace(/>/gi,'&gt;');
    <!-- NewLine Formatter -->
    body = body.replace(/\n/gi,'<br />');
 
    <!-- Publish Converted CSS-->
    return body;
}

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Wikidot Legacy CSS to Modern CSS Converter</title>
    <!-- © James Kanjo 2014 -->
    <style type="text/css">
        @import url('/common--theme/base/css/style.css');
    </style>
    <script type="text/javascript" src="http://bootstrap-playground.wdfiles.com/local--code/legacy:css:conversion"></script>
</head>
<body style="margin: 0;">
    <h2>Old CSS (with Legacy IDs):</h2>
    <form name="wikidot" onsubmit="return false;">
        <select name="import" onchange="document.getElementById('html-body').innerHTML = FromLegacyIDtoCLASSY('@import url(&quot;http://bootstrap-playground.wdfiles.com/local--code/legacy:css:'+this.value+'&quot;);\n'+document.wikidot.syntax.value);">
            <option value="base" selected="selected">Base</option>
            <option disabled="disabled">------------</option>
            <option value="basic">Basic</option>
            <option value="bloo">Bloo</option>
            <option value="bloo-no-side-bar">Bloo - no side bar</option>
            <option value="bootstrap-base">Bootstrap Base</option>
            <option value="cappuccino">Cappuccino</option>
            <option value="cappuccino-right">Cappuccino - side bar on right</option>
            <option value="clean">Clean</option>
            <option value="clean-no-side-bar">Clean - no side bar</option>
            <option value="co">Co</option>
            <option value="co-no-side-bar">Co - no side bar</option>
            <option value="flannel">Flannel</option>
            <option value="flannel-no-side-bar">Flannel - no side bar</option>
            <option value="flannel-nature">Flannel Nature</option>
            <option value="flannel-nature-no-side-bar">Flannel Nature - no side bar</option>
            <option value="flannel-ocean">Flannel Ocean</option>
            <option value="flannel-ocean-no-side-bar">Flannel Ocean - no side bar</option>
            <option value="flower-blossom">Flower Blossom</option>
            <option value="flower-blossom-no-side-bar">Flower Blossom - no side bar</option>
            <option value="gila">Gila</option>
            <option value="gila-no-side-bar">Gila - no side bar</option>
            <option value="localize">Localize</option>
            <option value="localize-no-side-bar">Localize - no side bar</option>
            <option value="shiny">Shiny</option>
            <option value="shiny-no-side-bar">Shiny - no side bar</option>
            <option value="webbish2">Webbish</option>
            <option value="webbish2-no-side-bar">Webbish - no side bar</option>
            <option value="webbish">Webbish (older)</option>
            <option value="webbish-no-side-bar">Webbish (older) - no side bar</option>
        </select> 
        <textarea name="syntax" onkeyup="document.getElementById('html-body').innerHTML = FromLegacyIDtoCLASSY('@import url(&quot;http://bootstrap-playground.wdfiles.com/local--code_/legacy:css:'+document.wikidot.import.value+'&quot;);\n'+this.value);" style="width: 100%; height: 100px;"></textarea>
    </form>
 
    <h2>New CSS (Legacy IDs converted to CLASSes):</h2>
    <div id="html-body"></div>
</body>
</html>

page revision: 1, last edited: 05 Jan 2014 02:45

Edit Tags History Files Print Site tools + Options

Help | Terms of Service | Privacy | Report a bug | Flag as objectionable

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License