Guida: Layout del forum personalizzato

Discussione in 'Guide per il gioco' iniziata da RedRed, 29. Apr 2017.

  1. RedRed

    RedRed Contadino

    Registrato:
    20. Ago 2012
    Una mini guida su come personalizzare sul proprio browser il layout del forum di Forge of Empires

    Lo stile degli elementi che compongono una pagina web (colori, caratteri, immagini di sfondo, posizione degli elementi) è governabile attraverso alcune istruzioni scritte in un linguaggio dedicato, il CSS; I browser più popolari permettono attraverso apposite estensioni di aggiungere istruzioni in questo linguaggio che vanno ad integrare e modificare quelle di base, cambiando come una pagina ci viene mostrata.

    Qui propongo un layout leggermente differente rispetto a quello nuovo utilizzato per i forum di FoE. Siete liberi di prendere spunto e proporre le vostre varianti.

    Caratteristiche principali
    • Si abilita automaticamente su tutti i Forum di FoE (it, beta, en, ecc...) e solo su di essi (non nella pagina di login al gioco, ad esempio);
    • La barra utente a piè pagina viene spostata nell'angolo alto e sinistro della pagina (posizione ancorata alla pagina, per avere più spazio verticale disponibile e quindi meno scroll della pagina);
    • La parte alta della pagina è più compatta (sempre per avere più spazio verticale disponibile e quindi meno scroll della pagina; sebbene lo spazio verticale di questa parte della pagina sia circa lo stesso della precedente versione del layout del forum, ora in tale posizione non ci sono più i pulsanti dei link rapidi, rendendo questa zona solo estetica e quindi inutile ai fini della fruizione dei contenuti)
    • Il background della pagina è quello della wiki (penso che il blu scuro attuale dia un senso di cupezza e di pagina non completamente caricata);
    • Nelle barre di navigazione superiore ed inferiore "Forum" è cambiato nel simbolo "HOME" (per non fare confusione con il bottone "Forum" del menu);
    • Pulante "nuovo thread" più visibile;
    • Rimossa la semitrasparenza degli smilies nell'editor;
    Anteprima
    [​IMG]
    .
    .

    FIREFOX (vai a MAXTHON per script Greasemonkey)

    Un'estensione semplice e leggera per questo browser è StylRRR.

    • Una volta installato, cliccate sull'icona di StylRRR
    [​IMG]
    • Cliccate su "New style", date un nome al nuovo style e incollate il codice sotto spoiler nella finestra più grande, poi cliccate su "Save"
    Codice:
    @-moz-document regexp("^https?://forum.[a-z]{2,4}.forgeofempires.com(/.*)?$")
    {
      /* 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, #XenForoUniq1, .tabLinks.forumsTabLinks {
         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;
      }
      div.pageContent a.reportedItems.modLink {
         bottom: 0px !important; top: auto !important; position: fixed !important; background-color: rgb(40, 20, 10); z-index: 10000;
      }
      /* 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;
      }
      /* profile */
      .xenOverlay.memberCard {
         color: rgb(225, 200, 127);
      }
      /* links */
      .sectionFooter a {
         color: rgb(206, 146, 46);
      }
      .subHeading {
         background-color: rgb(79, 41, 19);
      }
    }
    
    [​IMG]
    • E' tutto, il tema è immediatamente attivo; nella scheda "new style" potete abilitare o disablitare il codice, o modificarlo a vostro piacimento
    .
    .

    CHROME / VIVALDI (vai a MAXTHON per script Greasemonkey)

    Una buona scelta per chrome è Stylebot

    • Una volta installato, navigate sul forum di FoE; l'icona di StyleBot diventerà attiva (testo nero);
    [​IMG]
    • Cliccate e dal menu a tendina scegliete "Options..." (opzioni)
    [​IMG]
    • Nella scheda che si apre, scegliete "Styles" dal menu a sinistra, quindi "Add a new style..."
    [​IMG]
    • Nel campo "URL" inserite
    Codice:
    ^https?://forum.[a-z]{2,4}.forgeofempires.com(/.*)?$
    • quindi inserite il seguente codice nell'editor multilinea
    Codice:
      /* 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, #XenForoUniq1, .tabLinks.forumsTabLinks {
         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;
      }
      div.pageContent a.reportedItems.modLink {
         bottom: 0px !important; top: auto !important; position: fixed !important; background-color: rgb(40, 20, 10); z-index: 10000;
      }
      /* 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;
      }
      /* profile */
      .xenOverlay.memberCard {
         color: rgb(225, 200, 127);
      }
      /* links */
      .sectionFooter a {
         color: rgb(206, 146, 46);
      }
      .subHeading {
         background-color: rgb(79, 41, 19);
      }
    
    [​IMG]
    • Cliccate su "Save" ed avete finito; tornando sulla tab del forum ricaricate la pagina; noterete che lo stile si attiva e il testo del pulsante di stylebot diventa verde (personalizzazione presente e attiva)
    .
    .

    MAXTHON / Greasemonkey

    Non ho trovato estensioni specifiche per i soli stili su Maxthon; ci affidiamo quindi a un'estensione più generica e versatile: Violentmonkey; questa funziona come le popolari Greasemonkey o Tampermonkey, quindi quanto riportato in seguito è applicabile in maniera analoga in qualunque browser supporti queste estensioni (Firefox, Chrome, Opera, Edge, Safari, Dolphin, UC, ....)

    • Una volta installato, cliccate sull'icona di Violentmonkey e scegliete "Manage scripts"
    [​IMG]
    • Nella pagina che si apre, scegliete "New"
    [​IMG]
    • Ora copiate e incollate il seguente codice nell'editor:
    Codice:
    // ==UserScript==
    // @name Personalizzazione Forum FoE (XenForo 04/2017)
    // @namespace forgeofempires.com
    // @grant none
    // @include /^https?://forum.[a-z]{2,4}.forgeofempires.com(/.*)?$/
    // @version 1.0.4
    // ==/UserScript==
    
    // function to add style instructions in the page
    function addGlobalStyle(css)
    {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
    
    // background
    addGlobalStyle('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
    addGlobalStyle('#navigation .pageContent { width: auto; top: 0px; bottom: auto; position: absolute !important; }');
    addGlobalStyle('#AccountMenu, #AlertsMenu, #ConversationsMenu, #XenForoUniq1, .tabLinks.forumsTabLinks { top: 55px !important; bottom: auto !important; }');
     
    // header
    addGlobalStyle('header { visibility: hidden; margin: 0px; padding: 0px; height: 0px; }');
    addGlobalStyle('#headerProxy { height: 20px !important; }');
    addGlobalStyle('#moderatorBar { height: 55px; }');
    addGlobalStyle('#searchBar { top: 26px !important; }');
    addGlobalStyle('.breadBoxTop { top: -20px; }');
    addGlobalStyle('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; }');
    addGlobalStyles('div.pageContent a.reportedItems.modLink { bottom: 0px !important; top: auto !important; position: fixed !important; background-color: rgb(40, 20, 10); z-index: 10000; }');
    
    // display "HOME" as root instead of "Forum" in the navigation bar
    addGlobalStyle('.crust.selectedTabCrumb a span:first-of-type { display: none; }');
    addGlobalStyle('.crust.selectedTabCrumb a::after { font-family: icomoon; font-size: 12pt; content: "\e29e"; }');
    
    // footer
    addGlobalStyle('.footer .pageContent { background-color: rgba(11, 11, 11, 0.8) !important; padding-bottom: 3% !important; }');
    
    // "new thread" button
    addGlobalStyle('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); }');
    addGlobalStyle('a.callToAction:hover span { color: #303000; background-color: #ffff00; }');
    addGlobalStyle('a.callToAction:active span { color: black; background-color: rgb(255, 189, 0); }');
    
    // smilies
    addGlobalStyle('.redactor_smilies img.mceSmilieSprite { opacity: 1; }');
    
    // tags
    addGlobalStyle('.discussionListItems .unread .title a { text-shadow: none; }');
    
    // profile
    addGlobalStyle('div.xenOverlay.memberCard, .xenOverlay.memberCard { color: rgb(225, 200, 127); }');
    
    // misc
    addGlobalStyle('.sectionFooter a { color: rgb(206, 146, 46); }');
    addGlobalStyle('.subHeading { background-color: rgb(79, 41, 19); }');
    
    [​IMG]
    • Cliccate su "Save" e avete finito. Navigate sul forum e vedrete che il nuovo stile è attivo :)
    .
    .
    .

    ---
    Nota a margine: lo stesso sistema si potrebbe utilizzare per modificare la propria visualizzazione del forum di Gilda; siccome il regolamento di gioco non permette l'uso di script (in questo caso passivo, lato client, ma in fondo è sempre uno script) dovete chiedere il permesso al supporto.
     
    Ultima modifica: 6. Mag 2017
    A Rubicone piace questo elemento.
  2. RedRed

    RedRed Contadino

    Registrato:
    20. Ago 2012
    Versione con più personalizzazioni (inclusi link ai più conosciuti tools esterni) e alcuni fix; in questo caso sia per firefox che per chrome è necessario Tampermonkey (disponibile anche per altri browser) o Greasemonkey (disponibile solo per Firefox); per Maxthon sempre Violentmonkey.

    [​IMG]

    Codice:
    // ==UserScript==
    // @name FoE Forum "Spring theme"
    // @author RedRed
    // @description customization for FoE's Forums; designed for Forge of Empires XenForo (version April 2017).
    // @namespace forgeofempires.com
    // @grant none
    // @include /^https?://forum.[a-z]{2,4}.forgeofempires.com(/.*)?$/
    // @version 1.1.2
    // ==/UserScript==
    
    // function to add style instructions in the page
    function addStyle(css)
    {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
    
    // background
    addStyle('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; height:100%; }');
    // moderation bar below navigation bar
    addStyle('#moderatorBar { width: 100%; position: relative; top: 76px !important; margin: 0px; padding: 0px; height: 55px; line-height: 55px; z-index: 1000 !important; border-radius: 5px; }');
    addStyle('#moderatorBar .pageWidth { min-width: 100%; }');
    addStyle('#moderatorBar .pageContent { border: 0px none; padding: 0px 15px; overflow: visible; float: left; left: 0px; right: auto; margin-left: 0px; margin-right: auto; background-color: rgb(40, 20, 10) !important; background-image: none; }');
    addStyle('#moderatorBar div.pageContent a.reportedItems.modLink, #moderatorBar div.pageContent a { padding: 0px 10px; }');
    addStyle('#header { top: 0px; visibility: hidden; }');
    addStyle('#headerProxy { height: 160px !important; }');
    addStyle('#logo { height: 170px; line-height: 170px; margin-top: -5px; visibility: visible; }');
    addStyle('#logo a { position: relative; width: 302px; left: 50%; margin-left: -151px; }');
    addStyle('.titleBar h1 { margin-top: 30px; }');
    // move user menu on right edge of moderation bar
    addStyle('#navigation .pageContent { position: relative; left: auto; right: auto; top: 77px; bottom: auto; width: auto; height: 55px !important; margin-top: -56px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding: 0px; border: 0px; box-shadow: none; content: ""; clear: both; float: right; z-index: 1000; }');
    addStyle('#navigation .pageContent::after { content: ""; }');
    addStyle('#content #navigation .pageContent { background-color: rgb(40, 20, 10) !important; background-image: none !important; }');
    addStyle('#AccountMenu, #AlertsMenu, #ConversationsMenu, #XenForoUniq1, .tabLinks.forumsTabLinks { position: absolute; top: 305px !important; bottom: auto !important; margin-top: -5px; z-index: 1000; }');
    addStyle('.tabLinks.forumsTabLinks { top: 60px !important; }');
    addStyle('.sidebar .sectionregister p:first-child { padding-top: 70px !important; }');
    // search bar on top-left corner
    addStyle('#searchBar { top: 0px; position: relative; left: auto; right: auto; z-index: 4000 !important; }');
    addStyle('#searchBar::after { text-align: left; z-index: 4000; left: 290px; right: auto; top: 20px; }');
    addStyle('#QuickSearch { top: 20px; left: 20px; padding-bottom: 4px; padding-right: 2px; }');
    addStyle('#QuickSearch, .formPopup { width: 264px; }');
    addStyle('#XenForoUniq0 { z-index: 5000; }');
    addStyle('.formPopup .controlsWrapper .textCtrl { width: 232px; }');
    // footer
    addStyle('.footer .pageContent { background-color: rgba(11, 11, 11, 0.8) !important; padding-bottom: 3% !important; }');
    // "new thread" button
    addStyle('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); }');
    addStyle('a.callToAction:hover span { color: #303000; background-color: #ffff00; }');
    addStyle('a.callToAction:active span { color: black; background-color: rgb(255, 189, 0); }');
    // smilies
    addStyle('.redactor_smilies img.mceSmilieSprite { opacity: 1; }');
    // tags
    addStyle('.discussionListItems .unread .title a { text-shadow: none; }');
    // profile
    addStyle('.xenOverlay.memberCard { color: rgb(225, 200, 127); }');
    // misc
    addStyle('.sectionFooter a { color: rgb(206, 146, 46); }');
    addStyle('.subHeading { background-color: rgb(79, 41, 19); }');
    
    $(document).ready(function (){
        var layoutBody = document.querySelector("#content > div > div");
        var navBar = document.querySelector("#navigation");
        var modBar = document.querySelector("#moderatorBar");
        var serverName = /:\/\/forum\.([^\/\.]+)\.forgeofempires\.com/.exec(window.location.href)[1];
        var serverAlias = (serverName == "beta" ? "zz" : serverName);
    
        // layout
        layoutBody.insertBefore(modBar, layoutBody.querySelector("div:nth-child(1)"));
        layoutBody.insertBefore(navBar, layoutBody.querySelector("div:nth-child(2)"));
        document.querySelector("#logo > a > img").src = "https://" + (serverName == "beta" ? "en" : serverName) + ".wiki.forgeofempires.com/skins/FOE/images/foe-logo.png?c3904";
        var pathHome = document.querySelectorAll(".crust.selectedTabCrumb > a > span");
        if (pathHome.length === 2)
        {
            for (var i = 0; i < 2; i++)
                pathHome[i].innerHTML = "<i class=\"fa fa-home\" aria-hidden=\"true\" style=\"font-size: 12pt;\"></i>";
        }
    
        // new links
        var navBarLinks = modBar.querySelector(".pageWidth > .pageContent > .helper");
        navBarLinks.innerHTML += "<a href=\"https://forum." + serverName + ".forgeofempires.com/index.php?find-new/posts\">Nuovi messaggi</a>";
        if (serverName !== "it")
            navBarLinks.innerHTML += "<a href=\"https://forum.it.forgeofempires.com/\">Forum It</a>";
        if (serverName !== "beta")
            navBarLinks.innerHTML += "<a href=\"https://forum.beta.forgeofempires.com/\">Forum Beta</a>";
        navBarLinks.innerHTML += "<a href=\"http://forgeofempires.wikia.com/\" target=\"_blank\">Wikia</a>";
        navBarLinks.innerHTML += "<a href=\"http://www.forge-db.com/" + serverAlias + "/\" target=\"_blank\">forge-db</a>";
        navBarLinks.innerHTML += "<a href=\"http://" + serverAlias + ".foedb.com/Servers\" target=\"_blank\">foedb</a>";
        navBarLinks.innerHTML += "<a href=\"http://foemanager.com/#tools\" target=\"_blank\">City planner</a>";
        navBarLinks.innerHTML += "<a href=\"https://" + serverAlias + "0.forgeofempires.com/page/\" target=\"_blank\">Gioca</a>";
    
        // fixes
        document.querySelector("#QuickSearchPlaceholder").remove();
        if (serverName === "it")
            document.querySelector("a[href='https://it.forgeofempires.com/page/the_game/rules/']").href = "https://forum.it.forgeofempires.com/index.php?threads/regolamento-del-gioco.1298/";
    });
    

    Tampermonkey

    La procedura è molto simile a quanto già descritto per Violentmonkey nel primo post.
    1. Click sull'icona di tampermonkey, quindi "create new script";
      [​IMG]
    2. Selezionate tutto quello che c'è nell'editor e cancellatelo;
    3. Copiate e incollate il codice mostrato sopra
    4. Salvate e navigate sul forum :)
      [​IMG]
     
    Ultima modifica: 9. Mag 2017
    A Laura DeLoessian piace questo elemento.
  3. Laura DeLoessian

    Laura DeLoessian Popolano

    Registrato:
    25. Mar 2014
    l'ho installato, grazie @RedRed
    ho anche apportato una piccola modifica aggiungendo un altro link, ora ne vorrei fare un'altra ma non so dove e come...
    è possibile mostrare sempre per esteso il percorso di navigazione, che attualmente è contratto?
    [​IMG]
     
    A RedRed piace questo elemento.
  4. RedRed

    RedRed Contadino

    Registrato:
    20. Ago 2012
    in questo momento non posso fare prove ma prova a commentare (aggiungere // a inizio riga) le due righe sopra a
    Codice:
    // footer 
    poi salva e ricarica la pagina del forum
     
  5. Laura DeLoessian

    Laura DeLoessian Popolano

    Registrato:
    25. Mar 2014
    funziona ma esce graficamente strano (c'è una / di troppo)
    ma mi sono appena resa conto che è una modifica che non serve! scusa :)
     
  6. RedRed

    RedRed Contadino

    Registrato:
    20. Ago 2012
    L'ho sistemato comunque, credo sia utile poter tornare indietro di qualche sezione direttamente :)

    [​IMG]
     
  7. Laura DeLoessian

    Laura DeLoessian Popolano

    Registrato:
    25. Mar 2014
    sì era per quello che te l'ho chiesto infatti, ma di solito non vado in parti del forum con tanti sub-forum (per cui dicevo che non serve - a me)
    però ora che l'hai fatto lo applico :)
     

Torna in cima