[ GDRCD 5.4 ] [ RISOLTO | TUTORIAL ] Menù orizzontale in colonna top.

[ GDRCD 5.4 ] [ RISOLTO | TUTORIAL ] Menù orizzontale in colonna top. postato il 17/09/2016 21:28:00 nel forum programmazione, open source e hosting e modificato da sadly-noob il 18/09/2016 17:51:19

(hanno contribuito: bordertown, darkromance)
EDIT: Problema risolto, modifica contenuti per renderlo tutorial.

Buonasera a tutti, originariamente il topic era una richiesta d'aiuto.
Ho trovato una soluzione che non sono assolutamente certa si tratti della migliore, ma che mi ha dato la possibilità di assegnare al singolo menù una sua grafica (via istruzione CSS) senza costringermi ad applicarla a tutti i menù del gioco o a compiere rinunce sul layout, nel mio caso impostato come left-top-right-bottom.

Chiedo scusa per la mia scarsa precisione con la terminologia ed eventuali fesserie, purtroppo non mi intendo di programmazione e non sono in grado di fornire definizioni appropriate. Uno step alla volta, riporto la mia soluzione con annesse istruzioni e codice utilizzato. Nelle immagini allegate troverete qualche differenza sulla posizione dei menù, ma la soluzione dovrebbe funzionare quale che sia l'impostazione da voi scelta, a patto che la colonna top sia attiva.

Un consiglio a margine per una gestione più semplice dei vari passaggi è dotarvi del programma Notepad++ e sfruttare la funzione di ricerca (CTRL+F) per individuare rapidamente le parti di codice da modificare. Nel codice del GDRCD è una buona idea affiancare ai nuovi inserimenti un commento che spieghi lo scopo della vostra modifica così da semplificarvi la vita qualora dobbiate tornare ad intervenire su quel pezzo, senza perdere delle mezz'ore per capire a cosa serve e come funziona ciò che avete scritto. I commenti vanno sempre scritti in questo formato: /* IL VOSTRO COMMENTO */, pena un possibile malfunzionamento del codice.

Ringrazio gli utenti bordertown e darkromance per l'aiuto ricevuto.

_______________________________________________

RISULTATO FINALE: https://s4.postimg.org/hr5iytn25/immagine1.png ↗
L'obiettivo è ottenere un menù posizionato nella colonna top le cui voci rimangano elencate orizzontalmente, come mostrato nell'immagine precedente.
Ricordate che per riuscire a compiere questa modifica è necessario attivato un layout che includa la colonna top nel file config.inc.php, sotto la voce: $PARAMETERS['themes']['kind_of_layout'] = 'LAYOUT';

I file di GDRCD nei quali è necessario intervenire sono:

1) themes > advanced > main.css
2) pages > link_menu.inc.php
3) config.inc.php

1 | AGGIUNTA AL FILE main.css
Percorso | themes > advanced > main.css

Il primo passo consiste nell'aggiungere al file main.css delle indicazioni CSS che appartengano alla medesima classe link_menu. La voce display: inline-block; è ciò che consente l'ordinamento orizzontale delle voci contenute nel menù.

Il codice:

div.link_menu .TOPMENU
{
padding:0 0 0 20px;
background-color:#FFFFFF;
font-size:18px;
display: inline-block;
}

div.link_menu .TOPMENU a{
padding:2px;
text-align:left;

}

div.link_menu .TOPMENU a:hover{
background-color:#cfcfcf;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.link_menu .TOPMENU a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.link_menu .TOPMENU a.sprite:hover {
background-position: 0 100%;
}

2 | MODIFICA AL FILE link_menu.inc.php
Percorso | pages > link_menu.inc.php

Successivamente è necessario compiere un'aggiunta alla seguente parte di codice contenuta nel file.
Questo passaggio credo equivalga a dire al codice di considerare più istruzioni CSS (da voi scelte e dichiarate come vedrete nel codice sottostante) per tutti quegli elementi che ricadono nell'insieme link_menu.

Il codice:

echo '<div class="link_menu TOPMENU"><a href="' . $link_menu['url'] . '" id="link_' . $mkey . '_' . $key . '"';
foreach ($link_menu as $k => $v) {
if (!in_array($k, array('text', 'image_file', 'url', 'image_file_onclick', 'sprite'))) {
echo $k . '="' . $v . '"';
}

}
echo $content . '</a></div>';

Potete aggiungere ulteriori classi, quindi personalizzare più menù, a patto che vi ricordiate di separare ciascun nome con uno spazio all'interno delle virgolette e di mantenere la corretta impostazione del css nel file main.css, ovvero ricordarvi che il titolo dell'istruzione che andrete a creare sia sempre: div.link_menu .TITOLO

3 | AGGIUNTA AL FILE config.inc.php
Percorso | config.inc.php

A questo punto aggiungo il mio nuovo menù all'interno del file config.inc.php. Le voci elencabili (tasto aggiorna, scheda, ambientazione ..) sono a vostra discrezione: in fondo a questo file trovate tutte le tipologie di voci elencate e le istruzioni per inserirle in un nuovo menù. Nel mio esempio ho inserito solamente le voci AGGIORNA e AMBIENTAZIONE.

Il codice:

/*COLONNA TOP*/
$PARAMETERS['top_column']['box']['link_menu']['class'] = 'link_menu .TOPMENU'; ---> CRUCIALE: questo è il riferimento all'istruzione CSS che volete utilizzare per questo menù: il sistema andrà a pescare nel main.css l'istruzione da seguire.
$PARAMETERS['top_column']['box']['link_menu']['page'] = 'link_menu';
$PARAMETERS['names']['gamemenu']['secondo_menu'] = 'Menu 2'; ---> Questo è il nome che apparirà in cima al menù.
$PARAMETERS['top_column']['box']['link_menu']['menu_key'] = 'secondo_menu';
$PARAMETERS['top_column']['box']['link_menu']['no_gotomap_list'] = true;

$PARAMETERS['secondo_menu']['refresh']['text'] = 'Aggiorna';
$PARAMETERS['secondo_menu']['refresh']['url'] = 'main.php?dir=' . $_SESSION['luogo'];
$PARAMETERS['secondo_menu']['refresh']['image_file'] = '';
$PARAMETERS['secondo_menu']['refresh']['image_file_onclick'] = '';

$PARAMETERS['secondo_menu']['plot']['text'] = 'Ambientazione';
$PARAMETERS['secondo_menu']['plot']['url'] = 'main.php?page=user_ambientazione';
$PARAMETERS['secondo_menu']['plot']['access_level'] = USER;

In questo passaggio c'è da prestare giusto un po' di attenzione alle varie diciture fra parentesi quadre.
Seguite le istruzioni riportate in fondo a questo file (config.inc.php) per essere sicuri di aver svolto la giusta compilazione.

Con i codici che ho fornito dovreste ottenere un primo risultato, per quanto grezzo.
Potete usarli come riferimento per personalizzare il vostro menù come più vi aggrada.

Spero di non aver scritto troppe stupidaggini e che questo tutorial possa risultare di aiuto.
Contributi, correzioni, pareri sono caldamente benvenuti.

18/09/2016 00:14:07

La prima cosa che mi salta all'occhio, ma non so se sia risolutiva, è che se il tuo Menu2 si chiama div.TOPMENU come hai indicato nella pagina css allegata, alla pagina link_menu_inc.php dovresti mettere

<div class="TOPMENU"> ecc.ecc.

18/09/2016 12:10:06 e modificato da sadly-noob il 18/09/2016 12:10:49

bordertown ha scritto: La prima cosa che mi salta all'occhio, ma non so se sia risolutiva, è che se il tuo Menu2 si chiama div.TOPMENU come hai indicato nella pagina css allegata, alla pagina link_menu_inc.php dovresti mettere

<div class="TOPMENU"> ecc.ecc.

Ciao border, grazie per l'intervento.
Avevo compiuto il tentativo da te descritto, allego lo stamp del risultato ottenuto con le tue istruzioni:

https://s14.postimg.org/rnlp7lav5/topmenu1.png ↗

Compiere quell'unica sostituzione sembra equivalere a dare il riferimento CSS 'TOPMENU' a tutti i menu esistenti. Funziona per il menù top, ma come vedi va a sballare quello laterale.

L'obiettivo sarebbe invece riuscire a dire al codice che TOPMENU è il CSS della tabella Menu 2, mentre link_menu è il CSS di quella laterale (o di qualunque altra lo abbia assegnato).

darkromance ha scritto: La prima cosa che devi cambiare è il comando "display"
Invece di block metti inline o inline-block

Grazie anche a te dark.
Devo chiederti di essere un po' più specifico, se hai modo, nelle indicazioni: display: inline sotto quale istruzione CSS dovrei inserirlo? In quale dei file menzionati? Immagino sia il main.css, ma ti chiedo conferma.

Il mio tentativo:

div.TOPMENU
{
padding:0 0 0 20px;
background-color:#FFFFFF;
font-size:18px;
display: inline-block
}

div.TOPMENU a{
padding:2px;
text-align:left;

}

div.TOPMENU a:hover{
background-color:#cfcfcf;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.TOPMENU a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.TOPMENU a.sprite:hover {
background-position: 0 100%;
}

Non ha comportato alcun cambiamento: secondo me il problema è che il codice continua a riferirsi alle istruzioni CSS di link_menu.

Segnalo inoltre che il menù, al di là della questione dell'elencatura orizzontale, non prende nessuna delle altre istruzioni di div.TOPMENU (font-size:18px;). Questo mi fa capire che il menù continua a rifarsi delle istruzioni CSS di link_menu.

Si torna alla problematica del: come assegnare delle istruzioni CSS diverse al menù che ci interessa.

Ho tentato con:

div.link_menu{
padding:0 0 0 20px;
font-size:14px;
display: inline-block
}

Il risultato:
https://s13.postimg.io/eq2xkbbrb/topmenu2.png ↗

Nuovamente, la modifica applicata sistema il Menu 2 ma va a sballare tutti gli altri menù esistenti. Il problema è quindi riuscire ad assegnare istruzioni CSS diverse a quel determinato menù.

Grazie ancora per i vostri interventi.

18/09/2016 12:58:10

darkromance ha scritto: Per non far sballare anche gli altri menù ( quindi Uffici - Menù utente etc ) devi cambiare sulle rispettive pagine php la dicitura link_menu con , per esempio , link_menu2 e poi richiamarlo nel rispettivo css.

Grazie dark, da questo evinco che ciascun menù debba avere, all'interno della cartella pages, un file .php dedicato che abbia fra le sue istruzioni anche quella di attingere ad un CSS diverso da link_menu.

Sto sfogliando i vari file nella cartella pages, ma ho l'impressione che tutti i menù del gioco si rifacciano a questa parte di codice all'interno di link_menu.inc.php:

<?php
$raw_counter=0;

foreach ($PARAMETERS[$mkey] as $key => $link_menu) {

if (!empty($link_menu['url'])) {
$content = '';
if (empty($link_menu['image_file'])) {
if (!empty($link_menu['text'])) {
$content .= '>' . gdrcd_filter('out', $link_menu['text']);
}
} elseif (!empty($link_menu['sprite'])) {
$link_menu['class'] = (empty($link_menu['class']) ? 'sprite' : $link_menu['class'] . ' sprite');
$content = 'style="background-image: url(themes/' . $PARAMETERS['themes']['current_theme'] . '/imgs/' . $mkey . '/' . $link_menu['image_file'] . ')" alt="' . gdrcd_filter('out',
$link_menu['text']) . '" title="' . gdrcd_filter('out', $link_menu['text']) . '">';
} else {
if (empty($link_menu['image_file_onclick'])) {
$img_up = $link_menu['image_file'];
$img_down = $link_menu['image_file'];
} else {
$img_up = $link_menu['image_file'];
$img_down = $link_menu['image_file_onclick'];
}
$content = ' onMouseOver="n' . $mkey . $raw_counter . '_over_button()" onMouseOut="n' . $mkey . $raw_counter . '_up_button()"><img src= "themes/' . $PARAMETERS['themes']['current_theme'] . '/imgs/' . $mkey . '/' . $link_menu['image_file'] . '" alt="' . gdrcd_filter('out',
$link_menu['text']) . '" title="' . gdrcd_filter('out',
$link_menu['text']) . '" name="n' . $raw_counter . '_buttonOne" />';
echo '<SCRIPT LANGUAGE="JavaScript"> if (document.images) { var n' . $mkey . $raw_counter . '_button1_up = new Image(); n' . $mkey . $raw_counter . '_button1_up.src = "themes/' . $PARAMETERS['themes']['current_theme'] . '/imgs/' . $mkey . '/' . $img_up . '"; var n' . $mkey . $raw_counter . '_button1_over = new Image(); n' . $mkey . $raw_counter . '_button1_over.src = "themes/' . $PARAMETERS['themes']['current_theme'] . '/imgs/' . $mkey . '/' . $img_down . '";} function n' . $mkey . $raw_counter . '_over_button() { if (document.images) { document["n' . $mkey . $raw_counter . '_buttonOne"].src = n' . $mkey . $raw_counter . '_button1_over.src;}} function n' . $mkey . $raw_counter . '_up_button() { if (document.images) { document["n' . $mkey . $raw_counter . '_buttonOne"].src = n' . $mkey . $raw_counter . '_button1_up.src}}</SCRIPT>';
}

echo '<div class="link_menu"><a href="' . $link_menu['url'] . '" id="link_' . $mkey . '_' . $key . '"';
foreach ($link_menu as $k => $v) {
if (!in_array($k, array('text', 'image_file', 'url', 'image_file_onclick', 'sprite'))) {
echo $k . '="' . $v . '"';
}
}
echo $content . '</a></div>';
}
$raw_counter++;
}

Dove la parte evidenziata contiene l'indicazione 'questo è il CSS da applicare a tutto ciò che è contrassegnato come link_menu'. link_menu dev'essere quindi anche qualcosa di diverso dalle semplici istruzioni CSS, qualcosa che identifica (vado proprio a spanne/intuito qui, abbiate pazienza se dico fesserie) una data struttura php sotto la quale ricadono tutti (o quasi) i menù presenti all'interno del gioco.

Se le mie intuizioni sono corrette, il passaggio necessario quindi diventa creare all'interno di link_menu.inc.php una parte di codice che prenda in considerazione esclusivamente il menù orizzontale che voglio realizzare assegnandogli, oltre che la sua struttura php, il suo riferimento a CSS specifico (<div class="TOPMENU">).

Non esiste una soluzione più semplice come dire a questa parte di codice ci sono più riferimenti CSS da prendere in considerazione? Non tiratemi sassi, intendo una cosa di questo genere:

echo '<div class="link_menu, TOPMENU, MENU3, MENU4"><a href="' . $link_menu['url'] . '" id="link_' . $mkey . '_' . $key . '"';
foreach ($link_menu as $k => $v) {
if (!in_array($k, array('text', 'image_file', 'url', 'image_file_onclick', 'sprite'))) {
echo $k . '="' . $v . '"';
}
}
echo $content . '</a></div>';

.. Dove <div class="link_menu, TOPMENU, MENU3, MENU4"> sono le varie istruzioni CSS che il codice deve prendere in considerazione qualora siano specificate in config.inc.php, sotto $PARAMETERS['top_column']['box']['link_menu']['class'] = 'TITOLO ISTRUZIONE CSS';. Bisogna necessariamente riscrivere il codice per ogni menù cui desidero assegnare un'istruzione CSS diversa?


Grazie infinite dark, temevo che il passaggio cruciale fosse all'interno di link_menu.inc.php, ma almeno adesso procedo un po' meno a tentoni.

18/09/2016 15:39:45

Il mio tentativo:

Questa è la mia situazione di partenza:
https://s18.postimg.org/x3t0kkm49/partenza.png ↗

Inserendo il css come indicato da darkromance in themes > advanced > main.css:

div.pagina_uffici, div.link_menu {

padding: 0 0 0 20px;
font-size: 14px;
display: inline-block;
}

(etc.)

Questo è ciò che ottengo:
https://s18.postimg.org/z73fs8lx5/arrivo.png ↗

Il codice continua ad attribuire il css di link_menu a tutte le tabelle.
In definitiva secondo me il problema si trova o nei passaggi svolti in link_menu.inc.php o in quelli di config.inc.php. Farò qualche tentativo su entrambi i file.

18/09/2016 17:53:17

Sono riuscita a risolvere il problema.
Ho rettificato il post di apertura inserendo i passaggi svolti per ottenere il mio risultato.

Un sentito grazie ad entrambi per l'aiuto.