Rounded Theme

Rating: 3
Comments: 5

Rounded Theme

24 Jul 2011 12:16

This is the actual code of my Wikidot Rounded theme. It's currently in the version 2.4. This code with some small modifications shall be the 2.5 version. It was made in pure CSS and 3 images (the wikidot hybrid module, the loading owindow and the success owindow). It was tested only in IE 6 (only the v1.1 works good), IE 8 (works perfectly) and Firefox (best!). It's currently available in 4 colors.

body{
        background-repeat: repeat-z;
    background-color: black;
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 0.75em;
    min-width: 60em;
}
 
/* links */
 
a, .comments-box .options a{
    transition: color 200ms linear;
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -o-transition: color 200s linear;
    color: grey;
    text-decoration: none;
}
a:hover, .comments-box .options a:hover{
        color: #3198dd;
    background-color: transparent;
    text-decoration: none;
}
 
a.newpage{
    color: #888;
}
 
input{
    font-family: verdana,arial,helvetica,sans-serif;
}
 
/* container */
 
#container-wrap{
    padding: 0 0 0 35px;
        background-color: black;
    background-repeat: repeat-y;
    background-position: top left;
 
}
 
#container {
    padding: 0 35px 0 0;
        background-color: black;
    background-repeat: repeat-y;
 
}
 
/* other */
 
textarea{
    font-family: verdana,arial,helvetica,sans-serif;
}
 
/* main content */
 
#main-content{
    margin-left: 15em;
    margin-right: 1em;
        background-color: white;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
}
 
#main-content p{
    line-height: 1.4em;
}
 
/* top bar */
 
#top-bar{
        width: 96%;
        border: 3px solid black;
    margin-left: 5px;
    font-weight: bold;
        background-image: -moz-linear-gradient(center top, #3198dd, #99c8ff);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3198dd), to(#99c8ff));
    background-color: #99c8ff;
    margin-bottom: 5px;
        font-size: 20px;
}
#top-bar ul li a, #top-bar ul li ul li a{
    transition: background-color, color 200ms linear;
    -webkit-transition: background-color, color 200ms linear;
    -moz-transition: background-color, color 200ms linear;
    -o-transition: background-color, color 200ms linear;
}
 
#top-bar li{
    margin: 0;
}
/* #top-bar ul li ul{
    transition: display 140ms linear;
    -webkit-transition: display 140ms linear;
    -moz-transition: display 140ms linear;
    -o-transition: display 200ms linear;
}*/
 
#top-bar ul li ul{
       border: 1px solid #888888;
       border-bottom-right-radius: 8px;
       border-bottom-left-radius: 8px;
       -moz-border-bottom-right-radius: 8px;
       -moz-border-bottom-left-radius: 8px;
       -webkit-border-bottom-right-radius: 8px;
       -webkit-border-bottom-left-radius: 8px;
       -moz-box-shadow: 2px 2px 2px #888888; /* Firefox 3.6 and earlier */
       -webkit-box-shadow: 2px 2px 2px #888888; /* Safari and Chrome */
       box-shadow: 2px 2px 2px #888888;
}
 
#top-bar ul li a:hover, #top-bar ul li ul li a:hover{
    background-color: #3198dd;
    color: black;
    text-decoration: none;
}
 
#top-bar ul li ul li a{
        background-color: #99c8ff;
}
 
#top-bar ul li ul{
    font-weight: normal;
}
 
#top-bar ul li ul li a {
    border: none;
}
 
#top-bar a {
    color: white;
}
 
/* header */
 
#header{
        background-color: #3198dd;
    height: 100px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
}
 
#header h1{
        height: 60px;
        width: 700px;
        margin-left: 18px;
        margin-top: 10px;
}
 
#header h1 a{
        margin-top: 5px;
    font-size: 50px;
        margin-top: 10px;
    transition: -ms-transform, color 240ms linear;
    -webkit-transition: -webkit-transform, color 240ms linear;
    -moz-transition: -moz-transform, color 240ms linear;
    -o-transition: -webkit-transform, color 240ms linear;
}
 
#header h1 a:hover{
        -webkit-transform: scale(1.0) rotate(2.0deg);
        -moz-transform: scale(1.0) rotate(2.0deg);
        transform: scale(1.0) rotate(2.0deg);
        -ms-transform: scale(1.0) rotate(2.0deg);
        -o-transform: scale(1.0) rotate(2.0deg);
        color: white;
        text-decoraton: none;
}
 
#header h2{
    display: none;
}
 
/* sidebar */
 
#side-bar{
    width: 14em;
        min-height: 600px;
    padding: 0;
        border: 2px solid #3198dd;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
    background-color: white;
    margin-top: 3px;
        font-family: Helvetica;
        font-size: 110%;
}
 
#side-bar h1{
         color: #99c8ff;
         font-size: 120%;
         text-algin: left;
}
 
#side-bar h2{
        background-color: #99c8ff;
        background-image: -moz-linear-gradient(center top, #3198dd, #99c8ff);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3198dd), to(#99c8ff));
    text-align: left;
        color: #fff;
        padding: 5px 5px;
        margin: 0;
        font-size: 120%;
        font-weight: bold;
}
 
#side-bar h3{
        color: black;
        font-size: 100%;
    text-align: left;
}
 
#side-bar a{
        color: grey;
        text-decoration: none;
}
 
#side-bar a:hover{
        color: #3198dd;
        text-decoration: none;
}
 
#side-bar ul li{
    display:block;
}
 
#side-bar p {
    padding: 5px;
    margin: 0px;
    margin-bottom: 3px;
    margin: 0px;
}
 
/* main content */
 
#main-content h1 {
    font-weight: bold;
    color: 5c8bf0;
    font-family: arial,helvetica,sans-serif;
}
 
#main-content h2{
    font-weight: bold;
    color: #3198dd;
    font-family: arial,helvetica,sans-serif;
}
 
#main-content h3 {
    font-weight: bold;
    color: #99c8ff;
    font-family: arial,helvetica,sans-serif;
}
 
#page-title{
    font-weight: bold;
    color: black;
    font-family: arial,helvetica,sans-serif;
    margin-top: 10px;
        text-size: 80px;
        height: 30px;
}
 
/* bottom license area */
 
#license-area{
        background-color: #3198dd;
        background-image: -moz-linear-gradient(top, #3198dd, #99c8ff);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3198dd), to(#99c8ff));
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 2px solid #2A343D;
    color: #E7E9DC;
    text-align: center;
}
#license-area a:hover{
        color: white;
        text-decoration: none;
}
 
/* page bottom options */
 
.page-options-bottom a, a.action-area-close{
    transition: background-color, background-image 200ms linear;
    -webkit-transition: background-color, background-image 200ms linear;
    -moz-transition: background-color, background-image 200ms linear;
    -o-transition: background-color, background-image 200ms linear;
    color: white;
        background-image: -moz-linear-gradient(top, #3198dd, #99c8ff);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3198dd), to(#99c8ff));
    background-color: #3198dd; 
    text-decoration: none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
}
.page-options-bottom a:hover, a.action-area-close:hover{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4FABE8), to(#99CFFF));
    background-image: -moz-linear-gradient(top, #4FABE8, #99CFFF);
    background-color: #99c8ff; 
}
 
.page-tags span{
    font-size: 100%;
}
 
/* custom buttons */
 
div.buttons input, button, file, a.button, 
.button-bar a.button.button-close-message, .owindow .button-bar a, .custom-button a {
    transition: background-color, background-image 200ms linear;
    -webkit-transition: background-color, background-image 200mslinear;
    -moz-transition: background-color, background-image 200ms linear;
    -o-transition: background-color, background-image 200ms linear;
    background-color: #99c8ff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3198dd), to(#99c8ff));
    background-image: -moz-linear-gradient(top, #3198dd, #99c8ff);
    background-position: center bottom;
    color: #fff !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0px solid #000;
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 16px;
    font-family: "Arial", Arial;
    padding: 0.3em 0.39em;
    text-decoration: none;
}
 
div.buttons input:hover, button:hover, file:hover, 
a.button:hover, .button-bar a.button.button-close-message:hover, 
.owindow .button-bar a:hover, .custom-button a:hover {
    background-color: #99CFFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4FABE8), to(#99CFFF));
    background-image: -moz-linear-gradient(top, #4FABE8, #99CFFF);
    text-decoration: none;
    color: #fff !important; 
}
 
div.buttons input:active, button:active, file:active, 
a.button:active, .button-bar a.button.button-close-message:active, 
.owindow .button-bar a:active, .custom-button a:active {
    position: relative;
    top: 0px;
    left: 0px;
    text-decoration: none;
}
 
/* search top box button */
 
#search-top-box-form input.button, .new-page-box input.button, #sm-edit-theme-form input.button, #search-box .button{
    transition: color 200ms linear;
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -o-transition: color 200s linear;
    background-color: #b3b3b3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#b3b3b3));
    background-image: -moz-linear-gradient(top, #ccc, #b3b3b3);
    background-position: center bottom;
    color: #FFF !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #000;
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
    text-align: center;
    font-size: 12px;
    font-family: "Arial", Arial;
    padding: 0.1px 0.19em;
}
 
#search-top-box-form input.button:hover, .new-page-box form input.button:hover, #sm-edit-theme-form input.button:hover, #search-box .button:hover{
    background-color: #b3b3b3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#b3b3b3));
    background-image: -moz-linear-gradient(top, #ccc, #b3b3b3);
    text-decoration: none;
    color: #000 !important;
}
 
#search-top-box-form input.button:active, .new-page-box form input.button:active, #sm-edit-theme-form input.button:active{
    position: relative;
    top: 1px;
    left: 1px;
}
 
/* account options */
 
#account-options{
    padding: 2px;
        margin-left: 4px;
        color: white;
        background-color: #99c8ff;
    border: 1px solid #666;
    -moz-border-radius: 5px;    
    -webkit-border-radius: 5px;    
    border-radius: 5px;    
}
 
#account-options ul li a{
    transition: background-color, color 200ms linear;
    -webkit-transition: background-color, color 200ms linear;
    -moz-transition: background-color, color 200ms linear;
    -o-transition: background-color, color 200ms linear;
    margin: 0 auto;
        color: black;
}
#account-options ul li a:hover{
        color: black;
        background-color: #3198dd;
    margin: 0 auto;
}
#account-topbutton{
    border: 1px solid #666;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    transition: background-color, color 210ms linear;
    -moz-transition: background-color, color 210ms linear;
    -webkit-transition: background-color, color 210ms linear;
}
#account-topbutton:hover{
    background-color: transparent;
    color: white;
    text-decoration: none;
}
#search-top-box{
        margin-left: 6px;
}
#login-status a{
        color: black;
}
#login-status a:hover{
        text-decoration: underline;
}
 
/* forum */ 
 
.forum-start-box .forum-group .head{
        background-image: -moz-linear-gradient(center top, #3198dd, #99c8ff);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3198dd), to(#99c8ff));
     background-color: #3198dd;
}
 
/* table */
 
table.wiki-content-table tr th{
        background-image: -moz-linear-gradient(top, grey, white);
    background-image: -webkit-gradient(linear, left top, left bottom, from(grey), to(white));
        color: #3198dd;
        font-size: 20px;
        border: 1px solid grey;
        border-bottom: 1px dotted grey;
}
table.wiki-content-table tr td{
        color: grey;
        font-size: 20px;
        border: 1px dotted grey;
}
 
/* footer */
#footer{
        color: #E7E9DC;
}
 
/* owindow */
 
#odialog-wrapper {
    text-align: center;
}
#odialog-container {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 50;
}
.owindow {
    border: 2px solid #3198dd;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    position: absolute;
    text-align: left;
    width: 50em;
    color: black;
}
.owindow .close {
    cursor: pointer;
    float: right;
    font-size: 85%;
    padding: 0.2em 0.4em;
}
.owindow .title {
    background-color: #3198dd;
    cursor: move;
    font-size: 120%;
    font-weight: bold;
    height: 1%;
    padding: 0.2em 1em;
}
.owindow .content {
    padding: 0.5em 1em;
}
.owindow .button-bar {
    margin: 0.5em;
    padding: 0.2em 1em;
    text-align: right;
}
.owindow .button-bar input {
    padding: 0 0.5em;
}
.owindow .button-bar a {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 1px solid #AAAAAA;
    margin: 0.2em;
    padding: 0.1em 1em;
    text-decoration: none;
}
.owindow .button-bar a:hover {
    background-color: #DDDDDD;
}
.owindow.owait {
    width: auto;
}
.owindow.owait .content {
    background-image: url("http://themes.wdfiles.com/local--files/rounded/ajax-loader.gif");
    background-repeat: no-repeat;
    height: 100px;
    background-position: center bottom;
    background-repeat: no-repeat;
    font-size: 0px;
}
.owindow.osuccess .content img {
}
.owindow.osuccess {
    width: auto;
}
.owindow.osuccess .content {
    background-image: url("http://themes.wdfiles.com/local--files/rounded/check.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 111px;
    font-size: 0px;
}
 
/* inputs */
 
.text {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.text:hover{
    border: 1px solid black;
}
 
/* editor */
 
#lock-info{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
}
.textarea{
       -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
 
/* wd editor panel buttons */
/**************************************** Designed by MDesign
 -- Re-sale or re-distribution is prohibited.
 -- You may not re-distribute these Wikidot editor buttons for download
 -- Only Wikidot members or Icondeposit.com members can re-create or edit these buttons.
 -- These icons are to be linked back to this page if used elsewhere...
(http://www.icondeposit.com/blog:new-wikidot-editor-buttons)
 -- This wikidot icon set (images as well as CSS3 coding) is licensed under the Creative Commons Attribution Share-Alike 3.0 License -- to view the full license terms and conditions please go to this link... 
http://creativecommons.org/licenses/by-sa/3.0/ 
****************************************/
/* Begin Wikidot Editor Buttons Designed and Created by Matt Gentile (MDesign) 
- Icondeposit.com 2011 */
 
.wd-editor-toolbar-panel a {background-image: url(http://icondeposit.wdfiles.com/local--files/dev%3Anew-wikidot-editor-button-set/wdebttnss.png); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid #cecece;-webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; transition: all 300ms linear;}.wd-editor-toolbar-panel a:hover {-webkit-transform: scale(1.0) rotate(0deg) !important; -moz-transform: scale(1.0) rotate(0deg) !important; background-image: url(http://icondeposit.wdfiles.com/local--files/dev%3Anew-wikidot-editor-button-set/wdebttnsshover.png); border: 1px solid #2191d1; -webkit-box-shadow: 0 0 4px #2191d1; -moz-box-shadow: 0 0 4px #2191d1; box-shadow: 0 0 4px #2191d1;}.wd-editor-toolbar-panel a:active {background-image: url(http://icondeposit.wdfiles.com/local--files/dev%3Anew-wikidot-editor-button-set/wdebttnssselect.png);}
 
/* textarea form */
 
select, .form-text, textarea{
        -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
 
/* selection */
 
::selection {
    background-color: #3198dd;
    color: #fff;
}
 
::-moz-selection {
    background-color: #3198dd;
    color: #fff;
}
 
/* input text */
input.text:focus, textarea:focus {
    border: 1px solid #3198dd;
}
 
/* main content elements */
 
.infobox{
        border: 2px solid #3198dd;
                background-image: -moz-linear-gradient(top, white, #E6E6EB);
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#E6E6EB));
        width: 200px;
}
.infobox h1{
        background-color: #99c8ff;
        background-image: -moz-linear-gradient(center top, #3198dd, #99c8ff);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3198dd), to(#99c8ff));
    text-align: center;
        color: #fff;
        padding: 5px 5px;
        margin: 0;
        font-size: 120%;
        font-weight: bold;
        border-bottom: 2px solid #3198dd;
}
 
.code {
    background-color: #FCFFDF;
    background-image: url("http://community.wikidot.com/local--files/admin:css/brackets.png");
    background-repeat: no-repeat;
    border: 2px solid darkgrey;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 10px -5px 15px #DDDDDD;
    color: #666666;
    font-family: monospace;
    font-size: 11px;
    margin: 0;
    min-height: 65px;
    overflow: auto;
    padding-left: 40px;
    width: 75%;
}
blockquote {
    background-image: url("http://community.wikidot.com/local--files/admin:css/quote-right.gif");
    background-position: right bottom;
    background-repeat: no-repeat;
    border-color: -moz-use-text-color -moz-use-text-color #666666;
    border-radius: 10px 10px 10px 10px;
    border-style: none none solid;
    border-width: medium medium 1px;
    box-shadow: 5px -5px 10px #DDDDDD;
    color: #666666;
    font-size: 90%;
    margin-left: 0;
    padding-left: 0;
    width: 75%;
}
blockquote p {
    background-image: url("http://community.wikidot.com/local--files/admin:css/quote-left.gif");
    background-repeat: no-repeat;
    margin-top: 0;
    min-height: 40px;
    padding: 1em 60px 0;
}
blockquote p + p {
    background-image: none;
    padding-top: 0;
}
#toc {
    border: 1px solid grey;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
 
.error-block {
        -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
 
/* wikidot hybrid module */
 
.wikidot-hybrid-module-loading {
    background-image: url(http://themes.wikidot.com/local--files/rounded/hybrid-module.gif);
}
 
/* hovertips */
 
.hovertip {
    border: 1px solid #fff !important;
    -webkit-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0.7;
}
 
.hovertip .content {
    background-color: #3198dd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#99c8ff), to(#3198dd));
    background-image: -moz-linear-gradient(top, #99c8ff, #3198dd);
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 4px;
}
 
/* forms */
 
textarea, .mailform-box input.text, #np-title{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#FFFFFF));
    background-image: -moz-linear-gradient(top, #E0E0E0, #FFFFFF);
}
textarea, input.text{
    transition: border 200ms linear;
    -webkit-transition: border 200ms linear;
    -moz-transition: border 200ms linear;
    -o-transition: border 200s linear;
}
 
/* comments */
 
#new-post-form-container .change-textarea-size a{
    transition: background-color, border 200ms linear;
    -webkit-transition: background-color, border 200ms linear;
    -moz-transition: background-color, border 200ms linear;
    -o-transition: background-color, border 200ms linear;
    -moz-border-bottom-left-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
 
#new-post-form-container .change-textarea-size a:hover{
    border: 1px solid #3198dd;
}
 
.comments-box .post .head, .comments-box .post .short{
    -moz-border-top-left-radius: 4px;
    -moz-border-top-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-bottom: 1px solid black;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #3198dd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#99c8ff), to(#3198dd));
    background-image: -moz-linear-gradient(top, #99c8ff, #3198dd);
}
 
.comments-box .post .head a:hover, .comments-box .post .short a:hover{
    color: white;
}
 
.comments-box .post .long, .comments-box .post .short {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid black;
}
 
.comments-box .post .long .options{
     margin-right: 3px;
}
 
.comments-box .content p, .comments-box .signature{
    margin-left: 3px;
}
 
/* pager */
 
.pager .current, .pager .target a:hover{
      background-color: #3198dd;
      color: white;
}
 
.pager .current, .pager .target a{
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
       border-radius: 4px;
}
 
.pager .target a{
      transition: background-color, color 200ms linear;
     -webkit-transition: background-color, color 200ms linear;
     -moz-transition: background-color, color 200ms linear;
     -o-transition: background-color, color 200ms linear;
}
 
#action-area-top .preview-message{
     border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     position: fixed;
}

Suggestions? Anything wrong?

View the Demo: http://artimoniertest.wikidot.com
Original URL: http://themes.wikidot.com/rounded
License Info: CC BY-NC-SA 3.0 Unported License

rating: +3+x

Add a New Comment
Copyright © 2011-2015 Icon Deposit - All rights Reserved