One Line

Click to preview

Name: One Line

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

Tags: sidebar simple topbar

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

Description:

Based on Sky Blue. Puts the entire header in a single line.

Supports iOS and Android devices. If the top bar is too long, it will be hidden from view (a single link to home will do just fine). You must also set a viewport meta tag user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0 to enable mobile viewing.

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/one-line

Code

+ show the code

/* Simple reset */
a {
    text-decoration: none;
}
 
a:hover {
    background-color: transparent;
    text-decoration: underline;
}
 
/* Side bar */
#side-bar {
    border-left:1px dashed #DDDDDD;
    float:right;
    margin-top:10px;
    overflow:hidden;
    padding:0 15px 0;
    width:200px;
}
 
@media only screen and (max-device-width: 480px) {
  #side-bar {
    display: none;
  }
}
 
#main-content {
    margin: 20px 0 20px 0;
    padding: 0 15px;
    min-height: 150px;
    overflow: hidden;
}
 
div.buttons input, input.button, button, file, a.button {
    background: #F4F4F4 url(http://themes.wikidot.com/local--files/rainbow-base/button_2.png) repeat-x;
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
}
 
div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
    background-color: #DDD;
    background-position: 0 -26px;
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #000;
    height: 26px;
}
 
div.page-calendar-box {
    padding: 0;
}
 
/* Quotes in Blockquotes by James Kanjo */
/* http://snippets.wikidot.com/code:quotes-in-blockquotes */
 
blockquote {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-right.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}
 
blockquote p {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-left.gif);
    background-repeat: no-repeat;
    margin-top: 0;
    padding: 1em 60px 0;
    min-height: 37px;
}
 
blockquote p + p {    padding-top: 0;    background-image: none;}
 
#breadcrumbs {
    margin-bottom: 1em;
}
 
.odate, .like-odate {
    font-size: 85%;
    font-weight: bold;
    color: #666;
    background: transparent;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
 
#membership-by-password-box error-block,
#membership-apply-box error-block,
.member .error-block {
    display:none;
}
 
#header{
background: #3B5998;
white-space: nowrap;
position: fixed;
width: 100%;
left: 0;
top: 0;
height: 29px;
}
#main-content{
/* Make room for the fixed header */
margin-top: 30px;
}
#header h1{
font-size: 170%;
float: left;
padding-left: 10px;
}
#header h2{
font-size: 10px;
float: left;
padding-left: 5px;
color: #ddd;
}
#header h1 a{
font-family: "Bitstream Charter", "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
line-height: 26px;
color: #fff;
}
#header h1 a:hover{
color: #fff;
background: transparent;
text-decoration: none;
}
/* Now to set the top-bar, search box and login */
#top-bar {
position: relative;
right: auto;
bottom: auto;
display: inline-block;
margin-left: 10px;
border-left: 1px solid #fff;
}
 
#search-top-box{
display:none;
}
 
#login-status:before{
content:"";
position: relative;
left: -22px;
background: url(http://themes.wikidot.com/local--files/one-line/account.png) no-repeat left center;
padding: 14px;
}
 
#login-status{
position: fixed;
right: 0;
left: auto;
top: 0;
height: 29px;
/* border-right: 1px solid #fff; */
border-left: 1px solid #fff;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 30px;
width: 0px;
padding-left: 30px;
background: url(http://themes.wdfiles.com/local--files/midnight-coal/menu-bg.png) repeat-x top;
 
    -webkit-transition: width 450ms ease-in-out, padding 450ms ease-in-out; /* Chrome & Safari */
    -moz-transition: width 450ms ease-in-out, padding 450ms ease-in-out; /* Firefox */
    -o-transition: width 450ms ease-in-out, padding 450ms ease-in-out; /* Opera */
    -ms-transition: width 450ms ease-in-out, padding 450ms ease-in-out; /* Internet Explorer 9 */
    transition: width 450ms ease-in-out, padding 450ms ease-in-out; /* Generic */
 
}
 
#login-status:hover{
padding: 0 15px;
padding-left: 30px;
width: auto;
}
 
#login-status a:hover {
    color: #fff !important;
    background: #6481c5;
}
 
#login-status a {
    color:  #3B5998;
}
 
#login-status a:hover {
    background: transparent;
}
 
#login-status a#my-account,
#login-status a#account-topbutton,
#login-status a.login-status-create-account,
#login-status a.login-status-sign-in,
#login-status span{
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 29px;
}
 
@media only screen and (max-device-width: 480px) {
#login-status{
top: 29px;
display: block;
width: auto;
}
#login-status:before{
display: none;
}
#main-content{
max-width: 480px;
}
}
/* Top bar - based on Sky Blue */
#top-bar li, #top-bar ul {
    margin: 0;
    padding: 0;
}
 
#top-bar ul {
    margin-right: 8px;
    height: 29px;
}
 
#top-bar ul ul {
    margin-right: 0;
}
 
#top-bar li a {
    border-right: 1px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 29px;
    padding: 0 15px;
    text-decoration: none;
}
 
#top-bar li a:hover {
    text-decoration: none;
}
 
#top-bar li ul {
    border: none;
}
 
#top-bar li ul li a {
    width: 18em;
    color: #fff;
}
 
#top-bar li ul li a:hover {
    color: #000;
}
#top-bar li a:hover {
    background: white;
}
#top-bar ul {
    background: #3B5998;
}
 
#top-bar li a:hover {
    background: #6481c5;
}
 
#top-bar li ul li a {
    background: #0056b6;
}
 
#top-bar li ul li a:hover {
    background: #1180fd;
}
 
#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    background: #3B5998;
}
 
/*  Classes for tab views, by Steven Heynderickx  */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border:solid #0056b6; /* color of the line between tab list and content */
    border-width:0 0 3px; /*thickness of the line between tab list and content */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 1px 0 0; /* space between tabs */
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#3773b6 url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    border-top:solid #0056b6 1px;
    border-left:solid #0056b6 1px;
    border-right:solid #0056b6 1px;
    font-weight:600;
    font-size:80%;
    color:#000;/*tab text color*/
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#1180fd
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:solid #f00 0px;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#0056b6 url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    color:#fff;border:1px solid #0056b6;
}
 
/*
 * HOVER-SENSITIVE EDITOR BUTTONS
 * More info: http://bit.ly/l5dRds
 */
 
/* Show only one row of icons by default */
#np-editor-panel, #wd-editor-toolbar-panel {
    height: 30px;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 450ms ease-in-out; /* Chrome & Safari */
    -moz-transition: height 450ms ease-in-out; /* Firefox */
    -o-transition: height 450ms ease-in-out; /* Opera */
    -ms-transition: height 450ms ease-in-out; /* Internet Explorer 9 */
    transition: height 450ms ease-in-out; /* Generic */
}
/* When your mouse hovers over it, reveal the other rows */
#np-editor-panel:hover, #wd-editor-toolbar-panel:hover {
    height: 90px;
}
 
#container-wrap-wrap{
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
}
 
#content-wrap{
    padding: 15px 10px;
    margin: 10px;
    margin-top: 0;
    clear: both;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d2d2cc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 
  behavior: url(/common--theme/base/PIE.htc);
 
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

Notes

Similar themes Peroxide Alpha Base Theme Author: OxygenNine Rating: 2, Comments: 0 Tags: base black css3 sidebar topbar white Red Dead Redemption Wikidot | Blackwater Author: N3XCORP Rating: 0, Comments: 1 Tags: background black dark game redemption sidebar topbar video-game

Browse themes by tag 2.0 3d 3d-buttons 610nm and and/or ardeol articles background 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 confic contest contest-win corperate corporate corporation creative crimson cross css3 css3-buttons curved cute d14

Comments

I'd like to see more mobile themes!

Dylanspiritwind 23 Feb 2012 09:28

I like the uniqueness here!

Have you seen googlesites mobile look? The side bar has a small handle that can be clicked to pull out the nav:side….that would be great to have:)

---

Sifu Dylan Kirk, TCMP
www.chinesemedicinewiki.org

tsangk 23 Feb 2012 10:58

Hey Dylan,

I don't think that'll be easy to accomplish using purely CSS.

---

Kenneth Tsang (@jxeeno)

Dylanspiritwind 23 Feb 2012 17:09

Right, because CSS does not support onclick…can other languages be used in sidebar?

---

Sifu Dylan Kirk, TCMP
www.chinesemedicinewiki.org

where do I add the viewport meta tag?

talegari 26 Sep 2013 12:15

The description above says: "You must also set a viewport meta tag user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0 to enable mobile viewing."

Where do I add this? I do not have the knowledge of CSS. Would somebody help me with the precise code and tell me where should I place it?

(account deleted) 26 Sep 2013 12:19

At the bottom of any page, choose "+Options > Edit Meta". This will expose an option to add a new meta tag.

Click that link. Choose "Viewport" for the name and then add the user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0 text to the content box. Apply it to all pages in your site and you're all set.

---

Community Admin

talegari 02 Oct 2013 17:31

@Ed Johnson: Thanks very much. That helps.