MediaWiki:WikiaNav.css
From Tardis Wiki, the free Doctor Who reference
Clear your cache often around here
After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.
- Firefox: hold down Shift while performing a page reload.
- Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
- Safari users should simultaneously hold down ⌘ + Option + E. You may need to enable the Develop menu first
- Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/* ================
NEW NAV 1.2
written by User:CzechOut
22 September 2012
Latest version: 22 November 2015
for use at tardis.wikia.com
and released under the
CC-BY-SA 3.0 license
Though almost all styling elements are
unique to tardis, grateful acknowledgement
is certainly due to fellow code monkeys at
memory-alpha.org, yoshi.wikia.com,
all the respondents at
[[community:Admin_Forum:Restyling_the_new_WikiHeader_navigation]],
and various members of Wikia Staff
================
On 3 October 2012, Wikia made compulsory a new
system of top-of-page navigation which radically
supplanted the previous drop-down-only notion.
This design is the homegrown tardis.wikia.com response to
the new requirement. */
/* ================
BASICS
-- or --
DEALING WITH
#WikiHeader
================
+++++++++++++++
Retaining artistic background
from previous iteration of WikiHeader
+++++++++++++++ */
.oasis-split-skin .WikiHeader > nav {
-webkit-border-radius: 50%/15%;
-moz-border-radius: 50%/15%;
-ms-border-radius: 50%/15%;
-o-border-radius: 50%/15%;
border-radius: 50%/15%;
padding-bottom:20px
}
#WikiHeader {
font-size:10pt;
padding-left:none;
padding-right:none;
}
.WikiHeader .WikiNav {
right:10px;
}
/*
nav.WikiNav {
margin-top:10px;
}
*/
/* +++++++++++++++
Removing border on top of tabs
+++++++++++++++ */
.WikiHeader > nav li.marked > a,
.WikiHeader > nav li.marked > a:hover {
border:none;
background-color:whitesmoke;
padding-left:none;
padding-right:none;
font-size:10pt;
}
.WikiHeader > nav li.marked > a:hover {
text-decoration:underline;
}
/* +++++++++++++++
Removing accent mark
under bottom and top row
+++++++++++++++ */
.WikiHeader .navbackground {
background-color:transparent;
font-size:10pt;
width:96%; /* 575px keeps dividing line between tiers
the width of the framing box */
}
.WikiHeader .navbackground img {
display:none!important;
}
/* ================
Top row
================ */
/* +++++++++++++++
Main style of WikiHeaderRestyle
but because its margin-bottom is
stretched, this effectively "creates an envelope/div"
which becomes the most visible aspect of the nav
the major style of the entire new nav.
Alternately, think of this as the top row in an
unhovered state.
+++++++++++++++ */
.WikiHeader > nav {
background:#FFF; /*url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png);*/
border:3px solid #012c57;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
border-radius:15px;
-moz-box-shadow:0 0 40px #012c57;
-webkit-box-shadow:0 0 40px #012c57;
-o-box-shadow:0 0 40px #012c57;
-ms-box-shadow:0 0 40px #012c57;
box-shadow:0 0 40px #012c57;
color:#012c57;
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
padding-bottom:32px; /* "extends the shields" around bottom tier */
letter-spacing:1.5 px;
font-weight:normal;
text-transform:uppercase;
/*margin-top:-20px; moves it all up beyond reach of search/user masthead */
z-index:-10px; /* for kicks */
font-size:10pt;
/*top:55px;*/
}
/* +++++++++++++++
Other styling
+++++++++++++++ */
.WikiHeader > nav li {
border: none;
font-size:10pt;
letter-spacing:2px;
font-weight:bold;
}
.WikiHeader > nav li.marked {
border:none;
color:#012c57;
background-color: transparent;
text-decoration: none;
font-size:10pt;
letter-spacing:2px;
text-transform:uppercase;
font-weight:bold;
}
.WikiHeader > nav li.marked > a:hover {
border:none;
color:#012c57;
text-decoration: none;
font-size:10pt;
letter-spacing:2px;
text-transform:uppercase;
font-weight:bold;
background-color:transparent;
}
.WikiHeader > nav li.marked a {
border: none;
color:#012c57;
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
font-size:10pt;
padding:none;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
background-color:transparent;
}
/* ================
Bottom row
================ */
/* This is the main selector for the actual drop down */
.WikiHeader > nav .subnav {
background:transparent;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #012c57;
-moz-box-shadow:0 0 40px #012c57;
-webkit-box-shadow:0 0 40px #012c57;
box-shadow:0 0 40px #012c57;
color:#012c57;
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
padding:1px;
line-height:8pt;
font-size:9pt;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
/*margin-top:-40px;*/
}
.WikiHeader > nav .subnav-2 accent {
background-color: transparent;
}
.WikiHeader > nav .subnav-2 {
border:none;
}
.WikiHeader > nav .subnav-2 li a.subnav-2a {
background-color:transparent;
color:#012c57;
background-image:none;
font-weight:bold;
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
text-transform:uppercase;
letter-spacing:1px;
width:auto;
z-index: 100;
display: block;
border: 0px solid transparent;
margin: 0px 0px 0px 0px;
height: 25px;
padding-left:7.5px;
padding-right:3.5px;
}
.WikiHeader > nav .subnav-2 li.marked2 a.subnav-2a {
background-color:transparent
}
.WikiHeader > nav li.marked .subnav-2 > li a:hover,
.WikiHeader > nav li.marked .subnav-2 .marked2 a:hover { background-image: none; border: medium none; color: #012c57; font-family: 'Lucida Grande','Trebuchet MS','Gill Sans',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif; font-weight: bold; }
/*
.WikiHeader > nav li.marked .subnav-2 > li a:hover, .WikiHeaderRestyle > nav li.marked .subnav-2 .marked2 a:hover {
background: none repeat scroll 0px 0px #D5D4F0 ;
}
*/
.WikiHeader > nav .subnav-2 li a.subnav-2a:hover {
color: rgb(47, 44, 184);
background-color:none;
font-weight: bold;
font-family: 'Lucida Grande','Trebuchet MS','Gill Sans',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
width: auto;
}
/* Keeping the hover background for tier 2 separate from tier 3 */
.WikiHeaderRestyle > nav li.marked .subnav-2 > li ul li:hover { background-color:#ececec; }
/* ================
Floaty dropdown row
================ */
/* Get rid of annoying overlay of white */
.WikiHeader > nav .subnav-3 li {
background:transparent
}
.WikiHeader > nav .subnav-3 {
background:#fff;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
-ms-border-radius: 10%;
-o-border-radius: 10%;
border-radius: 10%;
border:1px solid #012c57;
-moz-box-shadow:0 0 40px #012c57;
-webkit-box-shadow:0 0 40px #012c57;
-o-box-shadow:0 0 40px #012c57;
-ms-box-shadow:0 0 40px #012c57;
box-shadow:0 0 40px #012c57;
color:#012c57;
/*font-family: 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;*/
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
font-size:8pt;
line-height:8pt;
padding:5px;
font-weight:bold;
text-transform:uppercase;
font-style:normal;
/*margin-top:15px;*/
}
.WikiHeader > nav .subnav-3 li a {
background-color:transparent;
color:#012c57;
background-image:none;
font-weight:bold;
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
text-transform:uppercase;
letter-spacing:0px;
font-size:8pt;
padding:5px;
line-height:8pt;
font-style:normal;
}
.WikiHeader > nav .subnav-3 li a:hover {
background-color:whitesmoke;
color:#012c57;
border:none;
font-weight:bold;
background-image:none;
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
text-transform:uppercase;
letter-spacing:0px;
font-style:normal;
padding:5px;
line-height:8pt;
}
/*
#WikiHeader li.subnav-3-item:first-child,
#WikiHeader li.subnav-3-item:first-child a {
border-radius: 8px 8px 0 0;
}
#WikiHeader li.subnav-3-item:last-child,
#WikiHeader li.subnav-3-item:last-child a {
border-radius: 0 0 8px 8px;
}
*/
/* =====================
Things that have happened
as a RESULT of New Nav, but
which aren't strictly
PART OF New Nav
===================== */
/* +++++++++++++++++++++
BASELINE FOR BOTH BUTTONS
+++++++++++++++++++++ */
.WikiHeader .buttons .wikia-button, .WikiHeaderRestyle .buttons .wikia-menu-button {
height: 20px;
font-size: 12pt;
font-weight:bold;
vertical-align: top;
z-index: 3;
margin: 40px 0px 0px 0px;
}
/* +++++++++++++++++++++
SHARE button
+++++++++++++++++++++ */
.WikiHeader .buttons .contribute-button,
.WikiHeader .buttons .share-button {
padding: 1px 0px 1px 3px!important;
position: relative!important;
margin-top: 40px!important;
margin-right:10px!important;
font-size:10pt;
background:#012c57;
color:white
}
.WikiHeader .buttons .share-button .share-dot {
display: none;
}
/* ++++++++++++++++++++++
CONTRIBUTE button
++++++++++++++++++++++ */
/*
.wikia-menu-button.secondary.combined {
padding: 1px 0px 1px 3px;
margin-top: 40px!important;
margin-left: 40px!important;
margin-right:0px!important;
font-size:12pt;
background:#012c57;
color:white
}
*/
/*
.wikia-menu-button.contribute.secondary.combined {
padding: 1px 0px 1px 3px;
margin-top: 40px!important;
margin-left: 40px!important;
margin-right:0px!important;
font-size:12pt
}*/
.WikiHeader .buttons .contribute {
padding-top: 2px;
vertical-align: middle;
margin-top: 40px;
margin-right:10px;
font-size: 14px;
padding-bottom: 2px;
}
.sprite.contribute {
display: none;
}
/* Trying to get some harmony of buttons
Fixes prompted by Rappy 1 October 2013 */
.WikiHeader .buttons > .contribute:hover {
color:#e2e2f0
}
/* Margins on buttons depending on whether
Share button is present */
.buttons nav {
margin-right:100px
}
.buttons nav + a {
margin-right:200px
}
/* Contribute drop down */
.WikiHeader .buttons .contribute ul {
background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); /* peek-a-boo, I see you! */
-moz-border-radius:10px;
-webkit-border-radius:0px 10px 10px 0;
border-radius:10px;
border:1px solid #012c57;
-moz-box-shadow:0 0 40px #012c57;
-webkit-box-shadow:0 0 40px #012c57;
box-shadow:0 0 40px #012c57;
color:#012c57;
font-family: 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;
font-size:9pt;
line-height:8pt;
padding:1px;
font-weight:bold;
text-transform:lowercase;
font-style:italic;
margin-top:2px;
z-index:1007;
width:auto;
}
.WikiHeader .buttons .contribute ul li a {
line-height: 14px;
background:none;
border:none;
}
.WikiHeader .buttons .contribute ul {
border:#012c57 2px solid;
background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png);
}
.WikiHeader .buttons .contribute li {
border:none;
background:none;
}
/* ++++++++++++++++++++++++++
Discussion button
++++++++++++++++++++++++++ */
.wikinav2 .WikiaPageHeader > .comments {
margin: 2px 10px 0px;
display: inline;
background-color: transparent;
border: none;
color: #012c57;
font-size:12pt;
}
.commentsbubble {
display:inline;
font-size:16pt;
font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
font-style:normal;
padding:5px
}
.commentsbubble:before {
content:" ";
}
.commentsbubble:after {
content:" ";
}
/* +++++++++++++++++++++++++++
Pages on wiki thingie
+++++++++++++++++++++++++++ */
/* Fixing article tally */
.wikinav2 .WikiaPageHeader > .tally {
position: absolute;
right: 0px;
top: 0px;
}
.wikinav2 .WikiaPageHeader > .tally span {
font-family: 'Futura','Gill Sans','Helvetica Neue','Trebuchet MS',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif;
text-transform: uppercase;
font-weight: normal;
top: 40px;
margin-top: 30px;
margin-left: -110px;
}
body.mainpage .WikiaPageHeader > .tally span, body.mainpage .WikiaPageHeader > .tally em {
/*margin-left:-500px;*/
}
/*
body.mainpage .wikinav2 .WikiaPageHeader > .tally {
margin-left:-550px;
display:none;
}
*/
body.mainpage .WikiaPageHeader > .tally span,
body.mainpage .WikiaPageHeader > .tally em,
body.page-Doctor-Who-Wiki .wikinav2 .WikiaPageHeader > .tally span {
/*margin-left:-30px;*/
/*display:none*/
}
/* This does work, but I'd have to create a specialised
main page css to make it FULLY work. Might have to
do that eventually anyway.
body.mainpage div.WikiaPageContentWrapper {
background:#012c57;
color:white;
}
*/
/* ===============
Media queries
=============== */
@media screen and (max-width: 1023px) and (orientation:portrait) {
.WikiHeader .buttons .contribute {
vertical-align:auto;
margin-top:-90px;
margin-right:10px;
}
nav.WikiNav {
width:98%;
left:5px;
}
.WikiHeader > nav.WikiNav .navbackground,
div#navbackground,
#navbackground {
width:95%;
left:0;
}
#WikiHeader .wordmark,
.WikiHeader .wordmark {
margin-top:10px;
}
}