Wurve SideBar

Click to preview

Name: Wurve SideBar

Author: Cyrem
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: blog clean corperate curved grey modern professional sidebar topbar white wide wiki

Supports top bar menu *: yes
Supports side bar menu *: yes
* depends on tags: topbar and sidebar

Description:

Wurve is a nice design that will give your wiki a clean professional look. This version of the Wurve theme adds a sidebar on the left of the page (See notes for Sidebar on the Right Code). The theme features rounded corners on the text area and a nice glow effect in the footer for the links. Internet Explorer users will not see the rounded corners however because it doesn't support the CSS3 code for it, so for them it will just be boxed. It's best view in FireFox, but is compatible with other major browsers. This theme is only designed to use the top bar.. This theme is also compatible with the Admin section (See notes).

If you want the original non-sidebar version: go here.

How to install

• go to: your wiki admin panel » appearance » themes
• choose External CSS theme
• supply the following URL as the CSS location

http://themes.wdfiles.com/local--code/wurve-sidebar

Code

+ show the code

/* Wurve Wikidot Theme by Cyrem */
/* ===== www.vexgfx.com =====*/
 
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
background:none repeat scroll 0 0 #3D4054;
}
 
h1, h2, h3, h4, h5, h6 {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
 
#header h1
{
padding-top:15px;
background:url("/local--files/wurve/logo.png") no-repeat;
height:48px;
}
 
#header h2
{
display: none;
}
 
#container-wrap-wrap  {
background:none repeat scroll 0 0 #FFFFFF;
}
 
#header h1 a{
color: transparent;
font-size:0;
}
 
#header h1 a:hover{
background:transparent;
}
 
#footer {
background:url("/local--files/wurve/BottomBG.jpg") repeat-x scroll 0 0 transparent;
color:#FFFFFF;
float:right;
min-height:37px;
margin-top:22px;
padding-right:10px;
padding-top:32px;
position:absolute;
right:0;
text-align:right;
width:100%;
}
 
#footer a {
color:#c4cbeb;
text-decoration:none;
background:transparent;
}
 
#footer a:hover {
text-shadow:0 0 8px #FFFFFF;
border-bottom: 1px dotted #c4cbeb;
}
 
#footer .options {
float:none;
font-size:10px;
}
 
#main-content  {
margin-left:250px;
margin-right:2%;
border:1px solid #ececec;
background-color:#f6f6f6;
-moz-border-radius:10px;
-webkit-border-radius:10px; 
-khtml-border-radius:10px; 
border-radius:10px;
}
 
#container {
background: url("/local--files/wurve/TopBG.jpg") repeat-x;
padding-top:35px;
height:100%;
height:auto;
min-height:100%;
}
 
#top-bar  {
border-bottom:1px solid #e4e4e4;
border-top:1px solid #e4e4e4;
height:20px;
margin-right:auto;
margin-top:20px;
width:98%;
z-index:0;
position:inherit;
right:0px;
}
 
#login-status  {
right:40px;
text-align:right;
top:85px;
width:400px;
}
 
#login-status  a{
color:#000000;
text-decoration:none;
}
 
#account-topbutton {
border: 0px;
background: transparent;
}
 
.printuser {
color:#737A99;
font-weight:bold;
}
 
.printuser img.small {
display:none;
}
 
#header  {
margin-left:2%;
}
 
#search-top-box input.text {
background:url("/local--files/wurve/search.png") no-repeat scroll 0 0 transparent;
border:0 solid #BEC2D6;
color:#000000;
height:20px;
margin:0 24px;
padding-left:8px;
padding-right:10px;
width:150px;
}
 
#search-top-box input.button
{
display: none;
}
 
#license-area  {
color:#BABABA;
}
 
#license-area a {
color:#7f86a9;
text-decoration:none;
background:transparent;
}
 
#license-area a:hover {
color:#000000;
border-bottom: 1px dotted #7f86a9;
}
 
a
{
color:#7f86a9;
text-decoration:none;
}
 
a:hover {
border-bottom: 1px dotted #7f86a9;
text-decoration:none;
background:transparent;
}
 
#action-area {
-moz-border-radius:10px;
background:none repeat scroll 0 0 #E8E8E8;
margin-bottom:15px;
}
 
#content-wrap {
margin-top:20px;
}
 
.page-options-bottom {
border-bottom:1px solid #DFDFDF;
border-top:1px solid #DFDFDF;
}
 
#site-manager-menu li a.active {
background-color:#E9E9E9;
}
 
#top-bar li a:hover {
text-decoration:none;
}
 
#top-bar li ul li a {
color: #7F86A9;
}
 
#top-bar li ul li a:hover {
background-color:#EEEEEE;
}
 
#account-options li a {
border-bottom:0 solid;
color:#7F86A9;
text-align:center;
}
 
#account-options li a:hover {
background:none repeat scroll 0 0 #EEEEEE;
}
 
#account-options {
border:1px solid #EEEEEE;
}
 
#side-bar  {
-webkit-border-radius:10px; 
-khtml-border-radius:10px; 
-moz-border-radius:10px;
border-radius:10px;
background:none repeat scroll 0 0 #FBFBFB;
border:1px solid #ECECEC;
float:left;
margin-left:36px;
width:180px;
}

Notes

Sidebar Right Code:

+ show block

/* Wurve Wikidot Theme by Cyrem */
/* ===== www.vexgfx.com =====*/
 
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
background:none repeat scroll 0 0 #3D4054;
}
 
h1, h2, h3, h4, h5, h6 {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
 
#header h1
{
padding-top:15px;
background:url("/local--files/wurve/logo.png") no-repeat;
height:48px;
}
 
#header h2
{
display: none;
}
 
#container-wrap-wrap  {
background:none repeat scroll 0 0 #FFFFFF;
}
 
#header h1 a{
color: transparent;
font-size:0;
}
 
#header h1 a:hover{
background:transparent;
}
 
#footer {
background:url("/local--files/wurve/BottomBG.jpg") repeat-x scroll 0 0 transparent;
color:#FFFFFF;
float:right;
min-height:37px;
margin-top:22px;
padding-right:10px;
padding-top:32px;
position:absolute;
right:0;
text-align:right;
width:100%;
}
 
#footer a {
color:#c4cbeb;
text-decoration:none;
background:transparent;
}
 
#footer a:hover {
text-shadow:0 0 8px #FFFFFF;
border-bottom: 1px dotted #c4cbeb;
}
 
#footer .options {
float:none;
font-size:10px;
}
 
#main-content  {
margin-left:2%;
margin-right:250px;
border:1px solid #ececec;
background-color:#f6f6f6;
-moz-border-radius:10px;
-webkit-border-radius:10px; 
-khtml-border-radius:10px; 
border-radius:10px;
}
 
#container {
background: url("/local--files/wurve/TopBG.jpg") repeat-x;
padding-top:35px;
height:100%;
height:auto;
min-height:100%;
}
 
#top-bar  {
border-bottom:1px solid #e4e4e4;
border-top:1px solid #e4e4e4;
height:20px;
margin-right:auto;
margin-top:20px;
width:98%;
z-index:0;
position:inherit;
right:0px;
}
 
#login-status  {
right:40px;
text-align:right;
top:85px;
width:400px;
}
 
#login-status  a{
color:#000000;
text-decoration:none;
}
 
#account-topbutton {
border: 0px;
background: transparent;
}
 
.printuser {
color:#737A99;
font-weight:bold;
}
 
.printuser img.small {
display:none;
}
 
#header  {
margin-left:2%;
}
 
#search-top-box input.text {
background:url("/local--files/wurve/search.png") no-repeat scroll 0 0 transparent;
border:0 solid #BEC2D6;
color:#000000;
height:20px;
margin:0 24px;
padding-left:8px;
padding-right:10px;
width:150px;
}
 
#search-top-box input.button
{
display: none;
}
 
#license-area  {
color:#BABABA;
}
 
#license-area a {
color:#7f86a9;
text-decoration:none;
background:transparent;
}
 
#license-area a:hover {
color:#000000;
border-bottom: 1px dotted #7f86a9;
}
 
a
{
color:#7f86a9;
text-decoration:none;
}
 
a:hover {
border-bottom: 1px dotted #7f86a9;
text-decoration:none;
background:transparent;
}
 
#action-area {
-moz-border-radius:10px;
background:none repeat scroll 0 0 #E8E8E8;
margin-bottom:15px;
}
 
#content-wrap {
margin-top:20px;
}
 
.page-options-bottom {
border-bottom:1px solid #DFDFDF;
border-top:1px solid #DFDFDF;
}
 
#site-manager-menu li a.active {
background-color:#E9E9E9;
}
 
#top-bar li a:hover {
text-decoration:none;
}
 
#top-bar li ul li a {
color: #7F86A9;
}
 
#top-bar li ul li a:hover {
background-color:#EEEEEE;
}
 
#account-options li a {
border-bottom:0 solid;
color:#7F86A9;
text-align:center;
}
 
#account-options li a:hover {
background:none repeat scroll 0 0 #EEEEEE;
}
 
#account-options {
border:1px solid #EEEEEE;
}
 
#side-bar  {
-webkit-border-radius:10px; 
-khtml-border-radius:10px; 
-moz-border-radius:10px;
border-radius:10px;
background:none repeat scroll 0 0 #FBFBFB;
border:1px solid #ECECEC;
float:right;
margin-right:36px;
width:180px;
}

Issues:

There is one issue with the theme, that has an easy fix. Because there is no License area in the Admin section, there is a see-through spot. You can fix this by creating another custom theme and inserting this code:

+ show block

/* Wurve Wikidot Theme by Cyrem */
/* ===== www.vexgfx.com =====*/
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
background:none repeat scroll 0 0 #3D4054;
}

h1, h2, h3, h4, h5, h6 {
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#header h1
{
padding-top:15px;
background:url("/local--files/wurve/logo.png") no-repeat;
height:48px;
}

#header h2
{
display: none;
}

#container-wrap-wrap  {
background:none repeat scroll 0 0 #FFFFFF;
}

#header h1 a{
color: transparent;
font-size:0;
}

#header h1 a:hover{
background:transparent;
}

#footer {
background:url("/local--files/wurve/BottomBG.jpg") repeat-x scroll 0 0 transparent;
color:#FFFFFF;
float:right;
min-height:37px;
margin-top:0;
padding-right:10px;
padding-top:32px;
position:absolute;
right:0;
text-align:right;
width:100%;
}

#footer a {
color:#c4cbeb;
text-decoration:none;
background:transparent;
}

#footer a:hover {
text-shadow:0 0 8px #FFFFFF;
border-bottom: 1px dotted #c4cbeb;
}

#footer .options {
float:none;
font-size:10px;
}

#main-content  {
margin-left:2%;
margin-right:2%;
border:1px solid #ececec;
background-color:#f6f6f6;
-moz-border-radius:10px;
-webkit-border-radius:10px; 
-khtml-border-radius:10px; 
border-radius:10px;
}

#container {
background: url("/local--files/wurve/TopBG.jpg") repeat-x;
padding-top:35px;
height:100%;
height:auto;
min-height:100%;
}

#top-bar  {
border-bottom:1px solid #e4e4e4;
border-top:1px solid #e4e4e4;
height:20px;
margin-right:auto;
margin-top:20px;
width:98%;
z-index:0;
position:inherit;
right:0px;
}

#login-status  {
right:40px;
text-align:right;
top:85px;
width:400px;
}

#login-status  a{
color:#000000;
text-decoration:none;
}

#account-topbutton {
border: 0px;
background: transparent;
}

.printuser {
color:#737A99;
font-weight:bold;
}

.printuser img.small {
display:none;
}

#header  {
margin-left:2%;
}

#search-top-box input.text {
background:url("/local--files/wurve/search.png") no-repeat scroll 0 0 transparent;
border:0 solid #BEC2D6;
color:#000000;
height:20px;
margin:0 24px;
padding-left:8px;
padding-right:10px;
width:150px;
}

#search-top-box input.button
{
display: none;
}

#license-area  {
color:#BABABA;
}

#license-area a {
color:#7f86a9;
text-decoration:none;
background:transparent;
}

#license-area a:hover {
color:#000000;
border-bottom: 1px dotted #7f86a9;
}

a
{
color:#7f86a9;
text-decoration:none;
}

a:hover {
border-bottom: 1px dotted #7f86a9;
text-decoration:none;
background:transparent;
}

#action-area {
-moz-border-radius:10px;
background:none repeat scroll 0 0 #E8E8E8;
margin-bottom:15px;
}

#content-wrap {
margin-top:20px;
}

.page-options-bottom {
border-bottom:1px solid #DFDFDF;
border-top:1px solid #DFDFDF;
}

#site-manager-menu li a.active {
background-color:#E9E9E9;
}

#top-bar li a:hover {
text-decoration:none;
}

#top-bar li ul li a {
color: #7F86A9;
}

#top-bar li ul li a:hover {
background-color:#EEEEEE;
}

#account-options li a {
border-bottom:0 solid;
color:#7F86A9;
text-align:center;
}

#account-options li a:hover {
background:none repeat scroll 0 0 #EEEEEE;
}

#account-options {
border:1px solid #EEEEEE;
}

Afterwards Apply this theme to the Admin area only.

Images:

If you want the logo PSD. Download it here. If you want me to change the logo text for you, just ask me.

Similar themes fake-wikidot-standard Author: Liurd Rating: 1, Comments: 0 Tags: sidebar topbar Gnl 109557431160 Author: Mukapogx Rating: 0, Comments: 0 Tags: sidebar topbar

Browse themes by tag 2.0 3d 3d-buttons 610nm and and/or ardeol articles band base beige black blog bloo blue bmc border boring brown business camo cat chocholate christian christmas city clan claret claus clay clean coffe coke colorful company contest contest-win corperate corporate corporation creative crimson cross css3 css3-buttons curved d14 dark dashed deep

Comments

leiger 14 Mar 2010 06:43

Thanks!

If you want the logo PSD. Download it here. If you want me to change the logo text for you, just ask me.

Could you make an alternate version that says either "Shane's website" or "Shane's blog" ? Both if possible, so I can make up my mind on which to use later ;-)

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

leiger 14 Mar 2010 06:55

I noticed this in the theme, as I was wondering why the user icons disappeared on my site ;-)

.printuser img.small {
    display:none;
}

There's a Pro account feature for that so it might not be allowed in a theme. I had a quick look at the Terms of Service and didn't find anything though. The only thing it seemed to mention was that we aren't allowed to hide the top/bottom toolbars with CSS. Might be worth you having another look.

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

Cyrem 14 Mar 2010 07:30

leiger,

No Problem, I've sent both via PM.

As for the icon, I thought it looked better without it, but just remove that if you want to get it back :)

Thanks.

---

Cyrem 14 Mar 2010 11:49

It seems I missed out:

-moz-border-radius:10px;

In the sidebar, so I fixed it. Strange… because I remember adding it.

---

leiger 14 Mar 2010 11:56

Thanks - have just updated my copy of the theme.

I notice that you have -khtml-border-radius:10px; mentioned a couple of times. Which browsers use "khtml" ?
Edit: Just did a google search on it. Seems it's for the Konqueror browser, which I've never used.

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

Cyrem 16 Mar 2010 08:21

Yes, I tried to make it as widely compatible as I could.

---

leiger 17 Mar 2010 00:09

And in the process, you taught me a bit more about CSS :) Will probably start using -khtml- in my CSS now as well.

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

How to add my own logo?

Asaerror 29 Apr 2022 10:40

See my title

Re: How to add my own logo?

(account deleted) 29 Aug 2022 07:43

是asa啊（
有两段代码把自己的标题隐藏了，把这些删掉就能显示自己的标题：

#header h1
{
padding-top:15px;
background:url("/local--files/wurve/logo.png") no-repeat;
height:48px;
}

#header h2
{
display: none;
}

#header h1 a{
color: transparent;
font-size:0;
}

#header h1 a:hover{
background:transparent;
}

然后在其他代码的链接前面添加：

http://themes.wdfiles.com

这样就不会显示主题的logo了

---

Saving page…

Last edited on 29 Aug 2022 07:44 by (account deleted) Show more