Wikia

Community Central

Comments4

Light Wikia Bar design

I have written a stylesheet for the Wikia bar.

The trend of simplicity.

Preview: Light-wikia-bar

/***** (C) 2015, yhynerson1 *****/
/***** PERSONAL USE ONLY. NO WIKI-WIDE USE. *****/
 
/***** Wiki Bar in the bottom *****/
.WikiaBarWrapper {
    background: white;
    border-top: 1px solid #bbb;
    box-shadow: none;
    height: 24px;
}
.WikiaBarWrapper .wikia-bar {
    background-image: none !important;
}
.WikiaBarWrapper .toolbar {
    padding: 0;
}
.wikia-bar .toolbar .tools li a {
    color: #333;
    text-decoration: none;
    cursor: default;
}
.WikiaFooter .toolbar .tools > li, .WikiaBarWrapper .toolbar .tools > li {
    transition-duration: .1s;
    border: none;
    padding: 4px 10px;
    margin: 0;
}
.wikia-bar .toolbar .tools > li:hover {
    background: #eee;
}
.wikia-bar .toolbar .tools > li:active {
    background: #ddd;
}
.wikia-bar .arrow, .WikiaBarCollapseWrapper,
.toolbar .tools li .arrow-icon-ctr,
.toolbar .tools li img {
    display: none !important;
}
 
/***** Wiki Bar Tools menu *****/
#my-tools-menu {
    border: 1px solid #bbb;
    box-shadow: none;
    background: white;
    transform: translateY(2px);
    transition-duration: .1s;
}
#my-tools-menu li:not(:first-child) {
    border: none;
}
#my-tools-menu li a, #my-tools-menu li span {
    font-size: 12px;
    padding: 5px 10px 5px 7px;
    transition-duration: .1s;
}
#my-tools-menu li a:hover {
    background: #eee;
}
#my-tools-menu li a:active {
    background: #ddd;
}

Additional menus

/***** (C) 2015, yhynerson1 *****/
/***** PERSONAL USE ONLY. NO WIKI-WIDE USE. *****/
 
// Load Font Awesome icon //
$("<link/>", {
   rel: "stylesheet",
   href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
}).appendTo("head");
 
// View Source boolean //
var x = (window.location.href.indexOf('?') > -1) ? '&' : '?';
 
// Edit wiki navigation //
$(".WikiHeader div.buttons").append(
    '<span class="wikinavedit" style="line-height:300%">'+
    '<a href="' + $("a[data-id=wikinavedit]").attr("href") + '" style="vertical-align: top; margin-top: 0.3em;"><i class="fa fa-pencil">&nbsp;&nbsp;</i>Edit wiki navigation</a>'+
    '</span></span>'
    );
 
// Edit the section before TOC //
$(".header-column.header-title").append(
    '<a class="editpage" href="' + $("#ca-edit").attr("href") + '&amp;section=0" title="Edit Extended Version section"><img src="data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D" class="sprite edit-pencil">Edit</a>'
    );
 
// Wikia bar //
$("ul.tools").append(
 
// Edit menu //
'<li class="mytools menu page-actions">'+
'<a><i class="fa fa-bars"></i>&nbsp;&nbsp;&nbsp;Page actions</a>'+
'<ul id="my-tools-menu" class="tools-menu">'+
'<li class="overflow editpage">'+
'<a href="' + $("#ca-edit").attr("href") + '"><i class="fa fa-pencil fa-fw"></i>&nbsp;&nbsp;Edit</a>'+
'</li>'+
'<li class="overflow view-source">'+
'<a href="' + window.location.href + x + 'action=raw"><i class="fa fa-code fa-fw"></i>&nbsp;&nbsp;Source</a>'+
'</li>'+
'<li class="overflow history">'+
'<a href="' + $("#ca-history").attr("href") + '"><i class="fa fa-history fa-fw"></i>&nbsp;&nbsp;History</a>'+
'</li>'+
'<li class="overflow move">'+
'<a href="' + $("#ca-move").attr("href") + '"><i class="fa fa-arrows-alt fa-fw"></i>&nbsp;&nbsp;Move</a>'+
'</li>'+
'<li class="overflow talk-comments">'+
'<a href="' + $(".wikia-button.comments.secondary").attr("href") + '"><i class="fa fa-comments fa-fw"></i>&nbsp;&nbsp;Talk</a>'+
'</li>'+
'<li class="overflow protect">'+
'<a href="' + $("#ca-protect").attr("href") + '"><i class="fa fa-lock fa-fw"></i>&nbsp;&nbsp;Protect</a>'+
'</li>'+
'<li class="overflow unprotect">'+
'<a href="' + $("#ca-unprotect").attr("href") + '"><i class="fa fa-unlock-alt fa-fw"></i>&nbsp;&nbsp;Change protection</a>'+
'</li>'+
'<li class="overflow delete">'+
'<a href="' + $("#ca-delete").attr("href") + '"><i class="fa fa-trash fa-fw"></i>&nbsp;&nbsp;Delete</a>'+
'</li>'+
'</ul>'+
'</li>'+
 
// User menu //
'<li class="mytools menu">'+
'<a><i class="fa fa-user"></i>&nbsp;&nbsp;&nbsp;User</a>'+
'<ul id="my-tools-menu" class="tools-menu">'+
'<li class="overflow">'+
'<a href="' + $("a[data-id=userpage]").attr("href") + '"><i class="fa fa-user fa-fw"></i>&nbsp;&nbsp;My page</a>'+
'</li>'+
'<li class="overflow">'+
'<a href="' + $("a[data-id=mytalk]").attr("href") + '"><i class="fa fa-comments fa-fw"></i>&nbsp;&nbsp;Talk</a>'+
'</li>'+
'<li class="overflow">'+
'<a href="/wiki/Special:Contributions/' + wgUserName + '"><i class="fa fa-list fa-fw"></i>&nbsp;&nbsp;Contributions</a>'+
'</li>'+
'<li class="overflow">'+
'<a href="/wiki/Special:Preferences"><i class="fa fa-wrench fa-fw"></i>&nbsp;&nbsp;Settings</a>'+
'</li>'+
'</ul>'+
'</li>'+
 
// Search box //
'<li class="overflow"><a><i class="fa fa-search"></i>&nbsp;&nbsp;&nbsp;</a>'+
'<form name="searchbox" id="searchbox" class="searchbox" action="/wiki/Special:Search" style="float: right; ">'+
'<input class="searchboxInput" name="search" type="text" placeholder="Search..." style="width:48px; background:transparent; border:none; padding:0; height:14px !important; font-size: 12px; font-family: helvetica, arial, sans-serif;">'+
'<input type="submit" name="go" class="searchboxGoButton" value="Try exact match" style="display:none">'+
'<input type="submit" name="fulltext" class="searchboxSearchButton" value="Search full text" style="display:none">'+
'</form>'+
'</li>');
 
// Edit boolean //
if( $(".wikia-button.comments.secondary").attr("href")===undefined){ $(".talk-comments").hide(); }
if( $("#ca-edit").attr("href")===undefined){ $(".editpage").hide(); }
if( $("#ca-history").attr("href")===undefined){ $(".history").hide(); }
if( $("#ca-move").attr("href")===undefined){ $(".move").hide(); }
if( $("#ca-protect").attr("href")===undefined){ $(".protect").hide(); }
if( $("#ca-unprotect").attr("href")===undefined){ $(".unprotect").hide(); }
if( $("#ca-delete").attr("href")===undefined){ $(".delete").hide(); }
if( $("a[data-id=wikinavedit]").attr("href")===undefined){ $(".wikinavedit").hide(); }
if( window.location.href.indexOf('Message_Wall:') >= 0 || window.location.href.indexOf('Thread:') >= 0 || window.location.href.indexOf('Special:') >= 0 || window.location.href.endsWith("User_blog:" + wgUserName ) ){ $('.page-actions').hide(); }
 
// The search Bar //
$("#WikiaBar .searchboxInput").focusin(function() {
    $("#WikiaBar .searchbox, #WikiaBar .searchboxInput").animate({"width":"200px"},300);
    }).focusout(function() {
        if( $(this).val().length === 0 ) {
            $("#WikiaBar .searchbox, #WikiaBar .searchboxInput").animate({"width":"48px"},300);
        }
    });

Around Wikia's network

Random Wiki