• 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.
  • Halloween Event 2021


    Read all about the Halloween Event 2021 here!
  • Castle System

    The Castle System is a brand new feature in Forge of Empires which aims to reward players that are playing Forge of Empires actively. Come check it out in your city!
    Do you want to know more about this new feature? Then click here!
  • Cultural Settlement - Mughal Empire

    We are proud to present you our brand new Cultural Settlement: The Mughal Empire!
    This is the fifth of our Cultural Settlements, and your job is to help expand the Mughal Embassy.
    Read all about it here!

Custom style for the forums

outoftheline

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:

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;

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: