Come dare uno sfondo trasparente ai vari componenti

[sickboy]

Salve a tutti,
sto utilizzando il template js_personal per fare delle prove di un sito. Il tempalte mi piace, ma vorrei che i contenuti venissero inseriti in un rettangolo con gli angoli smussati con sfondo trasparente per "staccarlo" dallo sfondo principale.

Cmq voglio una cosa del genere:


Se non sono stato chiaro me ne scuso!
Grazie a tutti in anticipo

[bigham]

Ciao. 

Forse il template è il jc_personal? Con quella bella figliola sulla destra?? 

E' abbastanza difficile fare quello che vuoi tu se non stravolgendo il template.
Io ho trovato una via di mezzo che penso dovrebbe almeno parzialmente risolvere il problema di staccare il contenuto centrale della pagina (anche se così com'è non mi sembra male  )

ok.
Apri il foglio di stile template_css.css e modifica questa classe:

table.contentpaneopen {
   text-align : left;
   background : transparent;
   padding-top : 0;
   padding-left : 5px;
   padding-bottom : 0;
   padding-right : 5px;
   margin-top : 0;
   margin-left : 0;
   margin-bottom : 0;
   margin-right : 0;
   vertical-align : top;
   line-height : 15px;
   width      : 100%;
   border-left: 1px solid #CACACA;
   border-right: 1px solid #CACACA;
   border-bottom-color: #CACACA;
   border-bottom-style: solid;
   border-bottom-width: 1px;
}

Se fai un copia e incolla è meglio.

Sostanzialmente disegna un bordino sottile attorno al contenuto centrale della pagina esclusa la parte alta dell'ideale rettangolo in cui è contenuta.

Se vuoi eliminare anche quei due "braccini" in alto allora bisogna necessariamente mettere le mani nel template.

Dimmi se ti piace. 

[sickboy]

Grazie, appena posso provo e ti faccio sapere.
Avevo pensato anche io ad una modifica del css, ma sono nuovo di joomla e non sapevo come fare. Cmq come soluzione estrema si potrebbe provare anche solo a dare una trasparenza al fondo dell'intersa notizia, quindi solom odificare le proprietà della tabella che la conterrebbe.
Se è più semplice fammi sapere...

grazie

[bigham]

Eccoti un'altra soluzione.

Premetto che, visto che il template è molto elastico nella parte destra ho preferito non impegnare graficamente la parte destra dei contenuti.
Non so se sono stato chiaro. Mettere un bordo colorato anche a destra dei contenuti andrebbe a sovrapporsi all'immagine di destra (la bella figliola) qualora si utilizzasse una risoluzione di pagina inferiore o uguale a 1024x768.

Modificando come segue la classe:

table.contentpaneopen {
   text-align: left;
   background-image: url(../images/sfumato1.jpg);
   background-repeat: repeat-y;
   /* background : transparent; */

Possiamo dare uno sfondo alla parte centrale dove stanno i contenuti.
L'immagine che ho usato te la metto in allegato.
E' chiaro che puoi modificare il colore. Io mi sono mantenuto su una tonalità di blu sfumato verso la trasparenza.
Puoi anche ridurre la parte di sfumatura blu a sinistra se vuoi.

L'effetto mi sembra più gradevole rispetto a prima.


[allegato eliminato da un amministratore]

[sickboy]

Bigham, purtroppo ancora non ci siamo...
forse non mi sono spiegato bene, ma il mio intento è evitare che il corpo di un qualsiasi contenuto sovrapposto all'immagine non sia sempre chiaramente leggibile, quindi avevo pensato a questa soluzione del fondo trasparente.
La tua soluzione è quasi buona, ma vorrei che l'iimagine che hai messo tu (sfumato1.jpg) sia una immagine trasparente, o meglio, che abbia uno sfondo semi-trasparente.

  scusami

[bigham]

Non preoccuparti, è normale in un forum avere problemi di... comunicazione 

Anzitutto esiste un problema dovuto al tipo di template. Non mi ero accorto che i contenuti vengono visualizzati utilizzando un file flash chiamato componentheading.swf.
Quindi possiamo agire solo sulle classi del CSS.

il mio intento è evitare che il corpo di un qualsiasi contenuto sovrapposto all'immagine non sia sempre chiaramente leggibile

E sempre a proposito di comunicazione comincio ad avere dei dubbi sulla lingua italiana
Di solito due negazioni si annullano a vicenda quindi posso tradurre la tua frase in:

il mio intento e che il corpo di un qualsiasi contenuto sovrapposto all'immagine sia sempre chiaramente leggibile

 

Ma con la mia immagine che fa da sfondo il testo del contenuto non è chiaramente leggibile?

La tua soluzione è quasi buona, ma vorrei che l'iimagine che hai messo tu (sfumato1.jpg) sia una immagine trasparente, o meglio, che abbia uno sfondo semi-trasparente.

Questo mi conforta 
L'immagine che ti allego ha una sfumatura di blu su sfondo trasparente (non è bianco )

Fuochino? Acqua?




[allegato eliminato da un amministratore]

[bigham]

Ecco cosa non andava!!!
Non avevo visto l'immagine del primo post!! 

Ieri sera non si vedeva, adesso l'ho vista!!

Capito l'arcano ma continuo a non essere convinto della cosa.
Ci vuole uno sfondo colorato sul quale visualizzare il contenuto in un riquadro opaco.
Scusa ma così si perde la bellezza di questo template!!

Già con la seconda immagine sfumata mi sembra migliore rispetto a prima. Ma più di così io non andrei.

Se mi dai un indirizzo di email ti mando uno sfondo al posto di quello con la signorina e più adatto al tema del sito. 

[sickboy]

Lascio stare per un momento le disquisizione sulla lingua italiana. 

Sai perchè il tuo sfondo non va bene? Prova ad aprire il link che ti ho dato e riduci la larghezza del tuo browser. L'immagine è sulla destra e se diminuisci la larghezza la fanciulla si sposta sulla sinistra e va a finire sotto il mio testo. Un fondo semitrasparente alla notizia risolverebbe il problema del testo che si sovrappone all'immagine e che diventa non leggibile.

Tornando alla lingua 

il mio intento è evitare che il corpo di un qualsiasi contenuto sovrapposto all'immagine non sia sempre chiaramente leggibile

"...evitare che il testo ... non sia sempre leggibile"!
avrei dovuto scrivere:
"permettere che il testo sia sempre leggibile"!
Alla fine la doppia negazione aveva questo scopo!
 

[bigham]

Adesso comincio ad avere le idee chiare.
Quindi più che un'immagine di sfondo trasparente sarebbe meglio dire un'immagine opaca. Appunto come quella che hai messo nel primo post.

Per ridurre il "danno" provocato dallo spostamento dell'immagine sulla destra al ridimensionamento della finestra del browser avevo pensato di mettere sullo sfondo, invece di una bella figliola (che comunque fa la sua figura) un Pulcinella (non quello di mare ) di dimesioni un pò più ridotte e più spostato verso destra.
Lo sfondo l'ho già provato e mi sembra un buon compromesso. Adesso proverò ad aggiungere un immagine di sfondo opaca nella zone dei contenuti e vediamo l'effetto globale.

Questa sera ti faccio sapere visto che ho tutto a casa.
Ciao

[sickboy]

Finalmente ci siamo capiti!!
Grazie infinite per l'aiuto!!

Grande!

[bigham]

OK.
Penso di aver fatto.
Questa è la classe contentpaneopen con alcune modifiche:

table.contentpaneopen {
   text-align : left;
   background-image: url(../images/sfumato530.png);
   background-repeat: repeat-y;
   padding-left : 5px;
   padding-bottom : 0;
   padding-right : 80px;
   margin-top : 0;
   margin-left : 0;
   margin-bottom : 0;
   margin-right : 0;
   vertical-align : top;
   line-height : 15px;
   width      : 100%;
}

L'immagine sfumato530.png ha un fondo bianco opaco al 70% e il bordo sinistro sfumato con tonalità di blu.

Lo sfondo l'ho modificato come ti avevo detto. Provo ad allegarlo e vediamo che succede  (se non mi becco un richiamo stavolta!)

Puoi giocare con il valore padding-right : 80px; per ridurre o ampliare la larghezza del testo del corpo. Oppure con la percentuale di larghezza (width).

Fammi sapere come andiamo adesso

[allegato eliminato da un amministratore]

[sickboy]

Sei un grandeeee!!
Finalmente ci siamo capiti e hai risolto i miei (momentanei) problemi!
Senti ma non è che puoi mandarmi il psd dell'immagine sfumata?

[bigham]

Ciao.
Eccotela. Sei stato fortunato, ancora un pò e avrei cancellato tutto

[allegato eliminato da un amministratore]

[sickboy]

Ancora grazie!

[bigham]

E di che!?!
Però non mi hai detto se ti piace lo sfondo che ho messo. 

Non è che metteresti il link del sito (ho cancellato l'mp) perchè sarei curioso di vedere il risultato.

Ciao

[sickboy]

Lo sfondo lo cambierò perchè aspetto delle immagini che devono inviarmi. Per ora è ancora a zero e ci stiamo organizzando.