CSS all'interno di un articolo Joomla

[joken]

Ciao,

Ho questo codice:

Codice: [Seleziona]

<table border="0" style="width: 100%;">
<tbody>
<tr>
<td style="padding: 0px;">
<h2 style="text-align: left;"><em>VIDEO</em></h2>
<p><em>&nbsp;</em></p>
</td>
<td style="padding: 0px;">&nbsp;</td>
<td style="padding: 0px;">&nbsp;</td>
</tr>
<tr>
<td style="padding: 0px; width: 33%;">Filmati di mostre ed esposizioni</td>
<td style="padding: 0px 0px 0px 28px; width: 33%;" valign="top">&nbsp;</td>
<td style="padding: 0px; width: 33%;">&nbsp;</td>
</tr>
<tr>
<td style="padding: 0px;">&nbsp;</td>
<td style="padding: 0px;">&nbsp;</td>
<td style="padding: 0px;">&nbsp;</td>
</tr>
<tr>
<td style="padding: 0px;">&nbsp;</td>
<td style="padding: 0px;">&nbsp;</td>
<td style="padding: 0px;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;
<div style="text-align: center;">&nbsp;<a href="images/video/Gioiosa.mp4" onclick="window.open(this.href,'Gioiosa%20lonica','scrollbars=no,resizable=no,location=no,menubar=no,status=no,toolbar=no,left='+(screen.availWidth/2-400)+',top=0,width=800,height=460');return false;"><img src="images/joomgallery/thumbnails/varie_6/opera.png" alt="Opera" width="266" height="153" /></a></div>
<div style="width: auto; text-align: justify;"><strong>Opera dell'artista Mario Rossi alla mostra tenuta a Mantova dal 5 al 15 Novembre</strong></div>
</td>
<td>&nbsp;
<div style="text-align: center;"><br />&nbsp;</div>
</td>
<td>&nbsp;
<div style="text-align: center;"><br />&nbsp;</div>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><em style="color: #000000;">&nbsp;</em></p>


Volevo sapere se è possibile (e dove) inserire del codice CSS per poter allineare e mettere margini al secondo DIV in modo da poter allineare il testo giustificato alla grandezza dell'immagine inserita nel primo livello DIV.
Grazie

[Alex21]

Sì che si può.
Aggiungendo padding per esempio.

Codice: [Seleziona]

<div style="width: auto; text-align: justify;"><strong>Opera dell'artista Mario Rossi alla mostra tenuta a Mantova dal 5 al 15 Novembre</strong><>
diventa:
<div style="width: auto; text-align: justify;padding-left: 80px;padding-right: 80px;"><strong>Opera dell'artista Mario Rossi alla mostra tenuta a Mantova dal 5 al 15 Novembre</strong><>
 Per avere testo della stessa grandezza del video soprastante (vuoto).
Ciao!

[joken]

Sì che si può.
Aggiungendo padding per esempio.

Codice: [Seleziona]

<div style="width: auto; text-align: justify;"><strong>Opera dell'artista Mario Rossi alla mostra tenuta a Mantova dal 5 al 15 Novembre</strong><>
diventa:
<div style="width: auto; text-align: justify;padding-left: 80px;padding-right: 80px;"><strong>Opera dell'artista Mario Rossi alla mostra tenuta a Mantova dal 5 al 15 Novembre</strong><>
 Per avere testo della stessa grandezza del video soprastante (vuoto).
Ciao!

Funziona su PC, ma sul browser di android il testo risulta tutto "compresso nel mezzo". SI può fare qualcosa?
Grazie.

Aggiorno la situazione. Il padding l'ho impostato al 15% e sembra che adesso su android sia perfettamente centrato ed allineato all'immagine. Sul pc non proprio ma è accettabile.

ps: in ogni caso. Dove posso inserire codice CSS?

[Limma]

ps: in ogni caso. Dove posso inserire codice CSS?

Le regole css le puoi mettere in un file css "personale" nella cartella css del tuo template.
Come quasi sempre accade i template hanno già una "chiamata" per i file css personalizzati, e il nome di questo file può variare da template a template. Spesso è custom.css, ma devi guardare la documentazione del tuo template (se è Protostar il file è user.css).

[joken]

Le regole css le puoi mettere in un file css "personale" nella cartella css del tuo template.
Come quasi sempre accade i template hanno già una "chiamata" per i file css personalizzati, e il nome di questo file può variare da template a template. Spesso è custom.css, ma devi guardare la documentazione del tuo template (se è Protostar il file è user.css).

Non conosco bene Joomla. Come faccio a vedere a quale file CSS si appoggia per magari poi modificarlo manualmente?
Grazie

[Limma]

Che template stai usando?
Il sito è online? Se puoi metti un link

[Limma]

Non conosco bene Joomla. Come faccio a vedere a quale file CSS si appoggia per magari poi modificarlo manualmente?
Grazie

Rispondo quotandoti perchè queste tue domande non sono del tutto coerenti con la mia precedente risposta...

Per "vedere" quali file css vengono caricati nel sito basta utilizzare un tool di ispezione che tutti i browser oggi hanno, e puoi vedere nel "dettaglio" tutte le regole css relative ad ogni singolo selettore html e così via.

Ma il file css di cui parlavo prima io, quello dove mettere le regole css "personali", di solito non c'è di default, ma lo devi creare tu seguendo le istruzioni del template/framework che stai usando.

Puoi anche modificare direttamente i file css del template, ma al primo aggiornamento perderesti tuttle le tue customizzazioni (ma forse qui stiamo andando troppo lontano... o no?). 

[joken]

Rispondo quotandoti perchè queste tue domande non sono del tutto coerenti con la mia precedente risposta...

Per "vedere" quali file css vengono caricati nel sito basta utilizzare un tool di ispezione che tutti i browser oggi hanno, e puoi vedere nel "dettaglio" tutte le regole css relative ad ogni singolo selettore html e così via.

Ma il file css di cui parlavo prima io, quello dove mettere le regole css "personali", di solito non c'è di default, ma lo devi creare tu seguendo le istruzioni del template/framework che stai usando.

Puoi anche modificare direttamente i file css del template, ma al primo aggiornamento perderesti tuttle le tue customizzazioni (ma forse qui stiamo andando troppo lontano... o no?). 

Allora,
Il sito al momento ce l'ho in locale. Non ho iniziato io il progetto e per me è molto difficile mettere mano nel lavoro iniziato da altri su una piattaforma che a stento conosco.

Sono andato in gestione templates e risulta come predefinito (stella gialla) il Bluestork-default per il lato amministratore (ma credo che questo ci interessi poco).

Per il lato sito ho come predefinito un "luigi-predefinito" (il nome del template usato è il nome del proprietario del sito) e
come assegnato (segno di spunta verde) un "luigihome-predefinito. Non ho capito cosa significhi e cosa e quali pagine modifichino.

Nella cartella template di joomla ci sono le cartelle template "luigi-predefinito" e "luigihome-predefinito" che a loro volta hanno le cartelle css con i file editor.css, print.css, template.css e template.ie7.css

Ho provato a dare uno sguardo con gli strumenti di analisi pagina di Firefox alla pagina dell'articolo che vorrei modificare e nella sezione "editor stili" dello strumento di analisi vedo in un pannello a sinistra riportati i nomi di 4 file css:
system.css
general.css
template.css
system.css

Vorrei capire quindi a quale file dovrei mettere mano per operare le modifiche di cui sopra agendo sui DIV. Poi mi dovresti spiegare gentilmente dove dovrei creare un file css personalizzato da far leggere alla pagina dell'articolo in questione.
Ci sarebbero altre domande sempre comunque legato al topic che vorrei farti, ma meglio fare un passo alla volta.
Grazie

[joken]

ok, ho capito come fare. Pensavo fosse più difficile in verità.
Ho inserto il link al file css nell'articolo e creato il file css che ho poi salvato nella cartella templates/luigi/css

Grazie

[Limma]

Come hai linkato l'articolo al file css?

La logica sarebbe quella di avere delle classi in un file css da qualche parte, file che è richiamato nell'index.php del template, e poi le classi sono dichiarate nei tag html dell'articolo (o modulo, o chi per lui), oppure nelle voci di menu, nei moduli, nelle pagine...

[joken]

Come hai linkato l'articolo al file css?

La logica sarebbe quella di avere delle classi in un file css da qualche parte, file che è richiamato nell'index.php del template, e poi le classi sono dichiarate nei tag html dell'articolo (o modulo, o chi per lui), oppure nelle voci di menu, nei moduli, nelle pagine...

L'ho linkato direttamente nella pagina dell'articolo joomla che mi interessava modificare. Il file vide.css l'ho inserito nella cartella css del template.

nel file index.php del template vedo questo:

Codice: [Seleziona]


<!DOCTYPE html>

<html dir="ltr" lang="<?php echo $document->language; ?>">

<head>

    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" />
    <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" />

    <!-- Created by Artisteer v4.0.0.58475 -->
   
   

    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" media="screen" /><![endif]-->


    <script>if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script>

    <script src="<?php echo $templateUrl; ?>/jquery.js"></script>

    <script>jQuery.noConflict();</script>


    <script src="<?php echo $templateUrl; ?>/script.js"></script>
    <script>if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>

</head>


avrei dovuto inserirlo qui d qualche parte?
Grazie

[Limma]

Aggiungi questo:

Codice: [Seleziona]

<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/luigi/css/vide.css" />
sotto agli altri due analoghi che hai nel tuo index.php

Se il percorso è corretto dovrebbe funzionare benissimo (appena provato - mutatis mutandis - su un mio sito).

Dopo averlo inserito nell'index.php, se visualizzi il sorgente di una pagina del tuo sito troverari qualcosa tipo:

Codice: [Seleziona]

<link rel="stylesheet" href="/templates/luigi/css/vide.css" />
e cliccando sul link href="... si deve aprire il tuo file css.
Se così fosse tutto è ok e il tuo file css farà il suo dovere, e potrai così aggiungere lì tutte le modifiche che vorrai fare ai css.

[joken]

Ok grazie. Farò così
Un'ultima domanda.
Ma aggiungere il link al file css direttamente nell'articolo joomla è considerato poco "ortodosso"?
Funziona comunque.

[Limma]

Ma aggiungere il link al file css direttamente nell'articolo joomla è considerato poco "ortodosso"?
Funziona comunque.

Poco ortodosso non solo in Joomla, ma in qualunque sito fatto in qualunque modo.
I richiami ai file css stanno nell'head del codice della "pagina".
Non è certo questa la mia materia e qualcun altro qui sul forum saprà darti risposte più esaurienti.

In ogni caso, il tuo file css personale, una volta richiamato nell'index.php del template, è "attivo" per tutte le pagine, moduli e quant'altro; mi sembra un modo più logico e razionale di gestione, piuttosto che richiamarlo di volta in volta, o no? 

[joken]

Poco ortodosso non solo in Joomla, ma in qualunque sito fatto in qualunque modo.
I richiami ai file css stanno nell'head del codice della "pagina".
Non è certo questa la mia materia e qualcun altro qui sul forum saprà darti risposte più esaurienti.

In ogni caso, il tuo file css personale, una volta richiamato nell'index.php del template, è "attivo" per tutte le pagine, moduli e quant'altro; mi sembra un modo più logico e razionale di gestione, piuttosto che richiamarlo di volta in volta, o no? 

Ho capito, anche se comunque le modifiche al div con i css le dovrei fare solo ed esclusivamente per quella pagina.
Grazie di tutto. Alla prossima