Fandom

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);
        }
    });

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Also on Fandom

Random Wiki