• Dear forum reader,
    To actively participate in our forum discussions or to start your own threads, in addition to your game account you need a forum account. You can
    REGISTER HERE!
    Please ensure a translation in to English is provided if your post is not in English and to respect your fellow players when posting.

Custom style for the forums

DeletedUser

Guest
hi all,

after the recent changes to the forum design I felt like adding some color and switch some things around :)
my theme now looks like this:
rVz9zat.png

main "features":
- large background image i stole from the wiki
- removed the bottom bar, put links in the top bar (removed unimportant stuff)

because @miSc requested sharing, I will gladly do so.

you will need a browser plugin to get this to work.
for chrome users: i recommend stylebot
for firefox users: i recommend stylish
other browsers: didn't look for addons yet

if you need assistance, please tell me so.
also: please report issues, i didn't do browser testing.

code (it's kinda messy :p):
Code:
html, body {
    background-image: url('https://en.wiki.forgeofempires.com/skins/FOE/images/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    background-color: #223321;
}

#moderatorBar, #QuickSearchQuery {
    background-color: #224875 ;
}

#headerMover #header {
    background: none;
    box-shadow: none;
}

#forums.sectionMain {
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.footer .pageContent {
    background: linear-gradient(to bottom, rgba(34,51,33,0) 0%,rgba(34,51,33,0.7) 30%,rgba(34,51,33,1) 100%);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    padding-bottom: 20px;
}

#content .pageContent {
    border-radius: 10px;
    border: 3px solid #4f2913;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    text-align: left;
}

.node .subForumList {
    margin: -25px 0 15px 56px;
}

.node.level_1 .nodeList li:last-child > div {
    border-radius: 0 0 5px 5px;
}

.thread_view .titleBar {
    text-align: left;
}

.nodeList .categoryStrip {
    background-color: #272a35;
    margin: 0;
    border-color: #4f2913;
}

a.callToAction span {
    position: relative;
    width: auto;
    height: auto;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 3px;
}

.sidebar .section {
    margin: 10px auto;
}

a.callToAction span i:after {
    content: " New Thread";
}

#AccountMenu .menuColumns a, #AccountMenu .menuColumns label {
    width: 175px;
}

#AccountMenu {
    width: 400px;
}

.Menu.JsOnly {
    z-index: 200000;
}

.xenOverlay, .xenOverlay .formOverlay {
    z-index: 300000;
    border-radius: 5px;
}

#exposeMask {
    z-index: 250000;
    background-color: rgba(12,26,40,0.8);
}

.Menu .secondaryContent {
    background-color: rgba(76,38,17,1);
}

.Menu a i.fa {
    color: #ce922e;
}

.login-icon {
    line-height: 42px;
}

footer .navTabs {
    background-color: rgba(22,34,46,0.5);
    background: linear-gradient(to right, #16222e 0%,#224872 100%);
    padding: 0;
}

#navigation .pageContent {
    box-shadow: none;
    width: 70%;
    max-width: 550px;
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
}

.navTabs {
    height: 42px;
}

.navTabs .navTab:hover .tabLinks {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: auto;
    background-color: rgba(76, 38, 17, 0.96);
}

.navTab.forums, .navTab.members, .navTab.inbox, .navTab.alerts {
    display: inline-block ;
}

.navTabs .navLink, .navTabs .SplitCtrl {
    height: 42px;
    line-height: 42px;
}

.navTab .accountPopup img {
    margin-top: 0;
    height: 42px;
    width: 42px;
    float: none;
    display: inline-block;
    margin: 0 -10px;
}

.navTabs .navTab.selected .navLink, .navTabs .navTab.selected:hover .navLink {
    background-color: #4f2913;
    text-shadow: 0 1px 1px #333;
}

.navTabs .navTab.selected .tabLinks, .navTabs .navTab.selected:hover .tabLinks {
    display: block;
    width: 100%;
    overflow: visible;
    background-color: transparent;
    top: 47px;
    bottom: auto;
}

.navTabs .navTab.selected .tabLinks ul, .navTabs .navTab.selected:hover .tabLinks .blockLinksList {
    box-shadow: none;
    margin-left: 5px;
}

.navTabs .navTab.selected .tabLinks li, .navTabs .navTab.selected:hover .tabLinks .blockLinksList li {
    display: inline-block ;
    float: none;
    margin: 0;
    background: transparent;
}

.navTabs .navTab.selected .tabLinks li a, .navTabs .navTab.selected .tabLinks li a:hover, .navTabs .navTab.selected:hover .tabLinks li a {
    line-height: 20px;
    background-color: rgba(1,13,25,0.3);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 3px;
}

.navTabs .navTab.selected .tabLinks li a:hover {
    background-color: #f9ce6c;
}

.navTabs .navTab.selected:hover .tabLinks .menuHeader, .navTabs .navTab.selected .tabLinks li.navigationHidden, .navTab.navigationHiddenTabs, .navLink.extra-nav.Tooltip {
    display: none;
}
 

RedRed

Viceroy
My attempt, based on the current live version

  • auto-apply to all the FoE forums;
  • moves and hook the footer bar to the top-left corner (to save vertical space and limit scrolling);
  • it makes the header much more compact (to save vertical space and limit scrolling; although the header has more or less the same height of the older XenForo header, now all the useful items in the header are gone, making it useless);
  • add the same background of the "wiki" (moving away the unloaded page feeling) ;
  • changes "Forum" to "HOME symbol" in the top & bottom navigation bars (to avoid confusion with the "Forum" menu button;
  • removed smilies' transparency in the text editor;
  • new thread button more visible;
DNFbF25.png

Code:
@-moz-document regexp("^https?://forum.[a-z]{2,4}.forgeofempires.com(/.*)?$")
{
  /* moderation */
  div.pageContent a.reportedItems.modLink
  {
     top: auto !important;
     bottom: 0px !important;
     position: fixed !important;
     background-color: rgb(40, 20, 10);
     z-index: 10000;
  }
  /* background */
  html, body {
     background-image: url("https://en.wiki.forgeofempires.com/skins/FOE/images/background.jpg");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: 100% auto;
     background-color: #223321;
  }
  /* move user menu on top-left corner */
  #navigation .pageContent {
     width: auto;
     top: 0px;
     bottom: auto;
     position: absolute !important;
  }
  #AccountMenu, #AlertsMenu, #ConversationsMenu, .tabLinks.forumsTabLinks, #XenForoUniq1 {
     top: 55px !important;
     bottom: auto !important;
  }
  /* header */
  header {
     visibility: hidden;
     margin: 0px;
     padding: 0px;
     height: 0px;
  }
  #headerProxy {
     height: 20px !important;
  }
  #moderatorBar {
     height: 55px;
  }
  #searchBar {
     top: 26px !important;
  }
  .breadBoxTop {
     top: -20px;
  }
  div#logo {
     visibility: visible;
     z-index: 1000;
     position: absolute;
     line-height: 55px;
     top: -55px;
     left: 50%;
     width: 180px;
     height: 50px;
     margin: 0 0 0 -90px;
  }
  /* display "HOME" as root instead of "Forum" in the navigation bar */
  .crust.selectedTabCrumb a span:first-of-type {
     display: none;
  }
  .crust.selectedTabCrumb a::after {
     font-family: icomoon;
     font-size: 12pt;
     content: "\e29e";
  }
  /* footer */
  .footer .pageContent {
     background-color: rgba(11, 11, 11, 0.8) !important;
     padding-bottom: 3% !important;
  }
  /* "new thread" button */
  a.callToAction span {
     bottom: 4% !important;
     color: black;
     background-color: #ffff00;
     box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.83), 0px 10px 30px rgba(0, 0, 0, 0.39);
  }
  a.callToAction:hover span {
     color: #303000;
     background-color: #ffff00;
  }
  a.callToAction:active span {
     color: black;
     background-color: rgb(255, 189, 0);
  }
  /* smilies */
  .redactor_smilies img.mceSmilieSprite {
     opacity: 1;
  }
  /* tags */
  .discussionListItems .unread .title a
  {
     text-shadow: none;
  }
}
 
Last edited:
Top