[GDRCD 5.4.1][RISOLTO] Problema Input comune

[GDRCD 5.4.1][RISOLTO] Problema Input comune postato il 16/06/2016 23:26:53 nel forum programmazione, open source e hosting e modificato da karma94 il 17/06/2016 12:27:27

Open Source: GDRCD versione 5.4.1
Servizio Hosting: Altervista

Salve a tutti. Quest'oggi lavorando sul pacchetto GDRCD ho riscontrato il seguente problema. Probabilmente una stupidata, ma non riesco a venirne a capo. Ho cercato qua e la dei modi per aggirare il problema, ma non sono riuscito a risolvere, quindi mi rivolgo a voi nel tentativo di trovare un modo per eliminare tale problematica. Iniziamo. Inanzi tutto ho il seguente file presente nella cartella PAGES denominato Forum.inc.php(vi riporterò solo la parte che mi rende difficile il proseguo delle modifiche):

<?php
if ($padre==-1)
{
/*Se e' il primo post di un topic serve il titolo*/
?>
<div class="form_label">
<?php echo gdrcd_filter('out',$MESSAGE['interface']['forums']['insert']['title']); ?>
</div>
<div class="form_field_bacheca">
<input name="titolo" />
</div>
<?php

Come si può notare è presente il seguente pezzetto di codice <input name="titolo" />. Se vado a modificare l'input tramite CSS in MAIN.CSS nel seguente punto:

input, textarea, select{
width:80%;
margin-bottom:10px;

}

Se modifico tale parte del css non solo modifica la parte interessata, ma anche il resto dei contenuti collegati presenti nel sito. In poche parole lavora su parti del codice ove non vorrei che il documento di stile lavorasse. Quindi la domanda che voglio porre a questo punto è la seguente: "Posso fare in modo di creare un input a hoc per far in modo che questo possa contrassegnare solo un elemento preciso e allo stesso modo agire tramite css per modificare solo un preciso elemento senza coinvolgere il resto degli input presenti nel sito?"

Grazie in anticipo per le risposte.

16/06/2016 23:36:15

Ciao, hai bisogno di creare una classe CSS:

.input-messaggi{
width:80%;
margin-bottom:10px;
}

A questo punto tutto quello che devi fare è assegnarla all'input:

<input name="titolo" class="input-messaggi" />

Nei CSS il . identifica una classe di stile, se invece usi il # indichi l'id di un elemento.


Ci sono poi molti altri selettori, ma ti consiglio di cercare una guida online: è molto semplice come apprendimento ;-)

16/06/2016 23:50:04

Allora. Ho provato ad apportare delle modifiche come mi hai segnalato. Ho creato il css dedicato e ho aggiunto la classe al mio input, tuttavia non si modifica. Rimane tale e quale a come era in precedenza, ossia un riquadrino bianco, nonostante fosse presente il contenuto.

.input-titolo{
width:80%;
margin-bottom:10px;
border: 2px solid #670000;
border-top: 5px solid #670000;
border-bottom:5px solid #670000;
border-radius: 10px;
margin-top: 5px;
background-color:#0c0c0c;
color: white;
padding-left: 3px;
padding-right: 3px;
}

16/06/2016 23:52:20

puoi per esempi assegnare una classe all'input tipo:

<input name="titolo" class="test"/>

e poi nel css mofificare solo gli input con quella classe con:

input.test
{
...
}

Ovviamente tenendo conto chelle priorietà e delle ereditarietà delle regole dei css.

17/06/2016 00:00:21

dyrr ha scritto: puoi per esempi assegnare una classe all'input tipo:

<input name="titolo" class="test"/>

e poi nel css mofificare solo gli input con quella classe con:

input.test
{
...
}

Ovviamente tenendo conto chelle priorietà e delle ereditarietà delle regole dei css.

Provato ma nada :(

17/06/2016 00:17:02

hai provato a vedere con qualche strumento di debug del browser (tipo sia su chrome che su firefox con ctrl + shift + i) e selezionando l'input, che regole lo influenzano?

Questo perchè le regole dei css sono sia ereditarie nel senso che se

input
{
width:80%
}

e

input.test
{
color:white;
}

<input class="test" />
erediterà le proprietà di entrambi

sia prioritarie ovvero l'ultima regola sovrascrive la precende, per cui magari hai posizionato le tue regole ptima di quelle generali dell'input che le sovrascrive.

17/06/2016 00:17:16 e modificato da mrpanda il 17/06/2016 00:18:02

karma94 ha scritto: ... Ho creato il css dedicato...

Sei sicuro di averlo caricato il css dedicato?

17/06/2016 00:32:17

Allora, cliccando CTRL + SHIFT + I si presenta nel seguente modo:

Mentre dal punto di vista del file forum.inc.php

<div class="form_label_messaggio">
<?php echo $MESSAGE['interface']['forums']['insert']['title']; ?>
</div>
<div class="form_field_bacheca">
<input name="titolo" class="titolo"
value="<?php echo gdrcd_filter('out',$row['titolo']); ?>"/>
</div>

Questo è il CSS completo

/** * Skin advanced
* @author Blancks
*/

/** * Parametri di default nella pagina
*/
body{padding:0; margin:0; color:#222; font-family:Verdana,Sans; font-size:11px; background:url("imgs/bg.gif") top left repeat;}

body.transparent_body{background-color:transparent; background-image:none;}

div, ul, li{margin:0; padding:0;}

.blank{clear:both;}

a, a:visited{
color:white;
text-decoration:none;
}

a:hover{
color:white;
font-weight:bolder;
text-decoration:underline;
}





div.form_field_bacheca{
width: 400px;
margin-left: 5.5%;
}


div.form_field_bacheca table{
color: red;
}


.input-titolo{
width:80%;
margin-bottom:10px;
border: 2px solid #670000;
border-top: 5px solid #670000;
border-bottom:5px solid #670000;
border-radius: 10px;
margin-top: 5px;
background-color:#0c0c0c;
color: white;
padding-left: 3px;
padding-right: 3px;
}

input[type='titolo']{

}



input, textarea, select{
width:80%;
margin-bottom:10px;
}





input[type='submit']{
width:auto;
margin:5px 0 5px 0;
background: #900;
background: -webkit-linear-gradient(#900, #600);
background: linear-gradient(#900, #600);
border-radius: 5px;
border: 1px solid #fff;
text-transform: uppercase;
color: white;
font-size: 10px;
padding: 5px;
height: 28px;
}

textarea{
height:200px;
}

.input-titolo{
width:80%;
margin-bottom:10px;
border: 2px solid #670000;
border-top: 5px solid #670000;
border-bottom:5px solid #670000;
border-radius: 10px;
margin-top: 5px;
background-color:#0c0c0c;
color: white;
padding-left: 3px;
padding-right: 3px;
}


div.form_label{
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
color: white;
}

div.form_label_messaggio{
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
color: white;
}

div.form_info{
margin-left: 90px;
width: 735px;
font-size:12px;
margin-bottom:15px;
color: white;
border: 1px solid #670000;
border-top: 10px solid #670000;
border-bottom: 10px solid #670000;
height: 17px;
line-height: 17px;
}

select.day, select.month, select.year{
width:60px;
display:inline-block;
}

/** * Stile dei messaggi d'avviso dell'engine */
div.warning, div.error{
background-color:#cf8888;
font-size:12px;
text-align:center;
margin:15px;
font-weight:bolder;
padding:10px;
border:solid 1px #800;
color:#970b0b;
}

div.link_back{
width:auto;
margin:5px 0 5px 0;

border-radius: 5px;

text-transform: uppercase;
color: white;
font-size: 10px;
padding: 5px;
height: 28px;
}



/** * Logout */
div.logout_box{
margin:20px auto;
padding:10px;
text-align:center;
background-color:#D9D9D9;
border:solid 1px #333;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.logout_box a{
text-decoration:underline;
font-style:italic;
}


/** * Titoli delle sezioni
*/
div.innertube h2, div.output h2, div.page_title h2{
font-size:14px;
font-weight:bolder;
border-bottom: 1px solid #D9D9D9;
padding-bottom: 4px;
margin-top:0;
}


/** * Stile dei contenitori grigi con i bordini arrotondati
*/
div.output{
margin:5px auto;
padding:10px;
width:180px;
background-color:#1f1c1f;
border:solid 2px #4f0202;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.pagina_news_info{

font-size:12px;
margin:5px auto;
padding:10px;
overflow:auto;
width:180px;
height:220px;
background-color:#1f1c1f;
border:solid 2px #4f0202;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:24px;
-webkit-border-bottom-right-radius:24px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:24px;
border-bottom-right-radius:24px;
}


div.presenti{
margin:5px auto;
padding:10px;
width:180px;
height: 40px;
background-color:#1f1c1f;
border:solid 2px #4f0202;
-webkit-border-top-left-radius:24px;
-webkit-border-top-right-radius:24px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:24px;
border-top-right-radius:24px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}

div.link_presenti{
margin-top: 5px;
margin-left: 15px;
}

div.pagina_info_location{
margin:5px auto;
padding:10px;
width: 170px;
background-color:#1f1c1f;
border:solid 2px #4f0202;
-webkit-border-top-left-radius:24px;
-webkit-border-top-right-radius:24px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:24px;
border-top-right-radius:24px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}

div.m-booked-small-t3-44293{
margin-top: -30px;
}

div.msgs {
margin:5px auto;
padding:10px;
width: 170px;
background-color:#1f1c1f;
border:solid 2px #4f0202;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}

div.menu{
margin:5px auto;
padding:10px;
width: 170px;
height: 200px;
background-color:#1f1c1f;
border:solid 2px #4f0202;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:24px;
border-bottom-right-radius:24px;
}

div.output{
background-color:#1f1c1f;
position:absolute;
top:0;
bottom:0;
right:0px;
left:0px;
width:auto;
overflow:auto;
text-align:center;

background-color: #1f1c1f;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border:solid 2px #670000;

}



/** * Informazioni con anteprima luogo
*/
div.info_image{
text-align:center;
}

div.box_stato_luogo{
padding-top:2px;
margin-bottom:15px;
}

div.meteo, div.meteo_date{
padding-top:5px;
text-align:center;
font-size:12px;
}

/** * Frame Messaggi
*/
iframe.iframe_messaggi{
height: 45px;
width: 180px;
}

div.pagina_messaggi{
text-align:center;
font-size:14px;
}

div.pagina_messaggi a, div.pagina_messaggi a:visited{
text-decoration:none;
color:#444;
}

div.messaggio_forum_nuovo a, div.messaggio_forum_nuovo a:visited{
font-weight:bolder;
font-style:italic;
color:#111;
}


/** * Men� di gioco
*/
select#gotomap{
display:block;
width:160px;
margin:0 auto 15px auto;
}

div.link_menu{
margin-left: -5px;
padding:0 0 3px 10px;
font-size:14px;
margin-top:5px;
float: left;
}

div.link_menu a{
display:block;
padding:0px;
text-align:left;
}

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

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

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


/** * Mappa cliccabile */

/** * Posizionamento mappa cliccabile
*/
div.mappaclick_map{
margin:60px auto;
}


/** * Link testuali sulla mappa */
div.mappaclick_map a{
font-size:13px;
font-weight:bolder;
}

/** * stile della tooltip di descrizione sulla mappa
*/
div#descriptionLoc{
position:absolute;
width:200px;
background-color:#cfcfcf;
padding:20px;
font-size:12px;
border:solid 1px #666;
font-family:Verdana,Sans;
text-align:left;

-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;

display:none;/*NON TOCCARE* Di configurazione: nasconde la tip in partenza */
z-index:9999;/*NON TOCCARE* Di configurazione: mostra la tooltip sopra gli altri link */
}


/** * Stili relativi all'elenco delle mappe in basso
*/
div.mappaclick_more{
padding-top:10px;
}

div.mappaclick_more a{
background-color:#cfcfcf;
padding:8px;
margin-right:10px;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}



/** * Messages center
*/

div.elenco_record_gioco{
padding:20px;
}

div.elenco_record_gioco{
padding:20px;
}

div.elenco_record_gioco table{
width:100%;
background-color:#d1d1d1;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.elementi_elenco{
padding-top:5px;
text-align:center;
}

div.titoli_elenco{
font-size:13px;
font-weight:bolder;
}

img.colonna_elengo_messaggi_icon{
width:30px;
height:30px;
}

div.controlli_elenco{
width:60px;
}

div.controllo_elenco{
width:20px;
float:left;
}

div.controllo_elenco input[type='image']{
width:15px;
}


div.elenco_record_gioco_bacheca{
padding:20px;

}

div.elenco_record_gioco_bacheca table{
width:100%;
background-color:;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.elementi_elenco_bacheca{
padding-top:5px;
padding-left: 10px;
text-align:left;
}

div.titoli_elenco_bacheca{
font-size:13px;
font-weight:bolder;
}

img.colonna_elengo_messaggi_icon_bacheca{
width:30px;
height:30px;
}

div.controlli_elenco_bacheca{
width:60px;
}

div.controllo_elenco_bacheca{
width:20px;
float:left;
}

div.controllo_elenco_bacheca input[type='image']{
width:15px;
}


/** * Ambientazione/Regolamento */
div.user_ambientazione div.elementi_elenco, div.servizi_abilita div.elementi_elenco{
text-align:left;
padding:5px;
}

div.user_ambientazione td.casella_titolo div.elementi_elenco, div.servizi_abilita td.casella_titolo div.elementi_elenco{
font-size:14px;
font-weight:bolder;
padding:2px 0 2px 10px;
}




/** * Generico per elenchi, bacheche, regolamento, ambientazione etc */
div.capitolo_elenco_bacheca2{
font-weight:bolder;
font-size:10px;
text-align:center;

text-transform: uppercase;
color: white;
padding:5px 5px 5px 20px;
height: 10px;
background-color: #670000;
border-top-left-radius:20px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border:solid 4px #670000;
}

td.casella_titolo_bacheca_sub2{
font-weight:bolder;
font-size:10px;
text-align:center;
padding:5px 5px 5px 10px;
text-transform: uppercase;
color: white;

background-color: #670000;
border-top-left-radius:20px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border:solid 5px #670000;
height: 10px;
width: 300px;
}

td.casella_titolo_bacheca_sub3{
font-weight:bolder;
font-size:10px;
text-align:center;
padding:5px 5px 5px 5px;
text-transform: uppercase;
color: white;

background-color: #670000;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border:solid 2px #670000;
height: 10px;
width: 200px;
}

td.casella_titolo_bacheca_sub4{
font-weight:bolder;
font-size:10px;
text-align:left;
padding:5px 5px 5px 20px;
text-transform: uppercase;
color: white;

background-color: #670000;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border:solid 2px #670000;
height: 10px;
width: 70px;
}



div.casella_titolo_bacheca_sub2{
font-weight:bolder;
font-size:10px;
text-align:center;
text-transform: uppercase;
color: white;
padding:5px 5px 5px 20px;
background-color: #670000;
border-top-left-radius:20px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border:solid 2px #670000;
height: 10px;

}



td.casella_titolo_bacheca2{
font-size:1px;
float: center;
margin-left: 2px;
}

td.casella_elemento_bacheca2{
border:solid 1px #403e3e;
}

div.casella_elemento_bacheca2{
font-size:12px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

}

div.elementi_elenco_bacheca2 a{

margin-left: 10px;
font-size: 10px;
font-weight:bolder;
text-transform: uppercase;
color: white;
float: left;
text-shadow: -1px 0 #670000, 0 1px #670000, 1px 0 #670000, 0 -1px #670000;
}


div.elementi_elenco_bacheca2{
font-size:12px;
background-color:#1f1c1f;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
color: white;
height: 50px;
}

div.elementi_elenco_bacheca2x a{

margin-left: 10px;

font-size: 10px;
font-weight:bolder;
text-transform: uppercase;
color: white;
float: left;
text-shadow: -1px 0 #670000, 0 1px #670000, 1px 0 #670000, 0 -1px #670000;
}

div.elementi_elenco_bacheca2x{
font-size:12px;
background-color:#1f1c1f;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
color: white;
height: 50px;
padding-top: 5px;
}

div.casella_elemento_bacheca2x{
font-size:12px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

}

td.casella_elemento_bacheca2x{
border:solid 1px #403e3e;
}

div.capitolo_elenco_bacheca{
font-weight:bolder;
font-size:10px;
text-align:left;
text-transform: uppercase;
color: white;
padding:5px 5px 5px 20px;
background-color: #670000;
border-top-left-radius:20px;
border-top-right-radius:0px;
border-bottom-left-radius:20px;
border-bottom-right-radius:0px;
border:solid 2px #670000;
height: 10px;
}

div.elementi_elenco_bacheca{
font-weight:bolder;
font-size:10px;
padding-left: 10px;
text-transform: uppercase;
color: white;

border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border:solid 1px #403e3e;
height: 5px;
}

td.casella_elemento_bacheca{
font-size:12px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
width: 860px;
}


div.elementi_elenco_bacheca{
min-height:20px;
}


div.controllo_elenco_bacheca input[type='image']{
height:15px;
width:15px;
display:block;
margin: 2px 5px;

}

div.controllo_elenco_bacheca2 input[type='image']{
height:15px;
width:15px;
display:block;
margin: 2px 2px;
float:left;
margin-top: -5px;
margin-left: 10px;
}

div.form_submit_bacheca input[type='image']{
height: 28px;
width: 72px;
margin-top: 5px;
margin-left: 5%;
}


div.elementi_elenco_bacheca a{
margin-left: 10px;
font-size: 10px;
font-weight:bolder;
text-transform: uppercase;
color: white;
float: left;
text-shadow: -1px 0 #670000, 0 1px #670000, 1px 0 #670000, 0 -1px #670000;
}


div.elementi_elenco_bacheca a:hover{
text-decoration:none;
}



/** * Stile tabelle nei moduli di gestione */
div.elenco_record_gestione table{
width:95%;
margin:10px auto;
}


/** * Accorgimenti Layout */

/** * Allineamento verticale delle colonne
*/
#framecontentLeft, #framecontentRight { display:table; }

/** * margine delle colonne */
div.innertube{
margin:0;
display:table-cell;
vertical-align:middle;
}

17/06/2016 01:46:37

Dallo screenshot che hai inviato si vede che l'attributo class nell'input non c'è.

Assicurati che:
1_non ti sei dimenticato di ricaricare sul server anche il file forum.inc.php (nella cartella giusta!) oltre che il css

2_stai modificando effettivamente il tag input giusto. Se non sbaglio c'è più di un punto nel file forum in cui vengono inseriti dei form, magari stai modificando il form di modifica invece che quello di inserimento o qualcosa del genere

17/06/2016 09:19:55

Discussione spostata nel forum giusto. Prestate attenzione a dove postate. Grazie

17/06/2016 12:25:40

Ok, sono giunto alla risoluzione del problema. Ringrazio tutti, soprattutto Leo e Blanks. La questione effettivamente era una stupidata. Porto qui la soluzione per chi, come me, in futuro abbia necessità. Il seguente codice riportato non va modificato non essendo quello di competenza.

<?php
if ($row['id_messaggio_padre']==-1)
{
/*Se è il primo di un topic serve un titolo*/
?>
<div class="form_label_messaggio">
<?php echo $MESSAGE['interface']['forums']['insert']['title']; ?>
</div>
<div class="form_field_bacheca">
<input name="titolo" class="titolo"
value="<?php echo gdrcd_filter('out',$row['titolo']); ?>"/>
</div>

Il seguente invece è quello di competenza per la modifica:

<?php
if ($padre==-1)
{
/*Se e' il primo post di un topic serve il titolo*/
?>
<div class="form_label">
<?php echo gdrcd_filter('out',$MESSAGE['interface']['forums']['insert']['title']); ?>
</div>
<div class="form_field_bacheca">
<input name="titolo" class="titolo"/>
</div>

Consiglio di modificare il nome ove si presenta "/*Se e' il primo post di un topic serve il titolo*/" giusto per segnalare che si tratta di due parti diverse di codice. Grazie a tutti ^^