Modifica CSS Template

[TullioWeb]

Ciao a tutti

Stò utilizzando un template di cui riporto in basso il codice CSS.

Le pagine a contenuto dinamico presentano una leggera differenza nel titolo da quelle a contenuto statico.
Quelle a contenuto dinamico hanno una linea sotto il titolo che arriva fino al bordo della pagina e si conclude con un logo (background:url(../images/elefant.png) top right no-repeat;).
Vorrei che anche le pagine a contenuto statico avessero lo stesso stile nel titolo.

E' possibile ?

Non sono molto pratico (anzi neanche un pò) di programmazione e ringrazio anticipatamente chi può darmi qualche indicazione per come e se è possibile fare la modifica che vorrei.
(Non fate caso alle scritte indicative sul codice che ho fatto io e potrebbero non essere esatte).



----------------------------------
 


body {
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;
   font-size: 14px; /* DIMENSIONE FONT top menù */
   background:#CADEB9 url(../images/logo.jpg) no-repeat top left;
   background-attachment:fixed;  /* Mantiene posizione IMMAGINE LOGO */
   padding:0;
   margin-bottom: 30px; /* POSIZIONE rispetto al top pagina */
}

p {
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;
   font-size: 14px; /* Dimensione font contenuto pagina */
}

a:link, a:visited { /* COLORE link MENU' */
   text-decoration:  none;
   font-weight: bold;  /* FONT grassetto */
   border: none;
   color: #004377; /*COLORE BLU */
}

a:hover {
   text-decoration: none; /* underline; */
   border: none;
   color: #CC0000;    /* COLORE ROSSO */
}

#user1 {
   float: left;
   margin-bottom: 20px;
   font-size: 10px;
   width: 230px;
   border: 0px solid blue;
}
#user2 {
   float: left;
   margin-bottom: 20px;
   margin-left: 20px;
   font-size: 10px;
   width: 230px;
   border: 0px solid green;
}
#design {
   margin-left:90px;
   font-size: 12px;
   margin-top: -27px;
}

#main {
   margin-left:300px;   /* MARGINE da SINISTRA MAIN PAGE */
   margin-top:30px;   /* MARGINE ALTO MAIN PAGE */
   margin-bottom:10px; /* MARGINE BASSO MAIN PAGE */
   background:url(../images/main_m.jpg) bottom left repeat-y;   
}
#main_top {
   background:url(../images/main_t.jpg) top left no-repeat;   
}
#main_bottom {
   background:url(../images/main_b.jpg) bottom left no-repeat;   
}

#logo {
   position: absolute;
   top:9px;
   left:5Px;
}

#inhalt { /* CONTENUTO PRINCIPALE MAIN PAGE*/
   margin-left:48px;
   padding-bottom:40px;
   padding-top:80px;
   width:560px;
   min-height:500px;
   height:auto !important;
   height:410px;  /* Altezza minima del CONTENITORE PRINCIPALE */


}


#menu {
  position:absolute;
   top:30px;
   left:70px;
}

#menu_left {
   background:url(../images/menu_left_m.jpg) top left repeat-y;
}
#menu_left_top {
   background:url(../images/menu_left_t.jpg) top left no-repeat;
}
#menu_left_bottom {
   background:url(../images/menu_left_b.jpg) bottom left no-repeat;
}

#menu_right {
   margin-top:15px;
   background:url(../images/menu_left_m.jpg) top left repeat-y;
}
#menu_right_top {
   background:url(../images/menu_right_t.jpg) top left no-repeat;
}
#menu_right_bottom {
   background:url(../images/menu_left_b.jpg) bottom left no-repeat;
}
#menu_left_content, #menu_right_content {
   width: 218px;
   min-height:150px;  /* ALTEZZA MINIMA MENU' */
   height:auto !important;
   height:200px;
   padding-left: 24px;
   padding-top: 25px;
   padding-bottom: 25px;
}

.struktur {
   position:absolute;
   left:-1000px;
   top:-1000px;
   width:0px;
   height:0px;
   overflow:hidden;
   display:inline;
}

table.moduletable {
   width: 170px;
   margin-top: 10px;


   }

table.moduletable th {
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;
   font-size: 16px;  /*/Titolo menù*/
   font-weight: bold;
   color: #004377;
   text-align: left;
   white-space: nowrap;
   width: 100%;
   border-bottom: 2px solid #004377;
   background:url(../images/elefant.png) top right no-repeat;
   padding-left: 2px;
   }
   
table.moduletable td {
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;
   font-size: 14px;  /* Dimensione voci di menù */
   font-weight: normal;
   padding-left: 0px;

   }
   
.moduletable h3, .contentheading{    /* CONTENUTO STATICO */
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;
   font-size: 30px;   /* DIMENSIONE TITOLO PAGINA */   
font-weight: bold;
   color: #004377;
   text-align: left;
   white-space: nowrap;
   border-bottom: 2px solid #004377;

   margin: 0px;

}   

.moduletable {
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;

}


/* --Default Class Settings-- */

a.mainmenu:link, a.mainmenu:visited, a.mainlevel:link, a.mainlevel:visited {
   color: #004377;
   text-decoration: none;
}

a.mainmenu:hover, a.mainlevel:hover { /* COLORE link AL PASSAGGIO MOUSE */
   color: #CC0000;
}

a.sublevel:link, a.sublevel:visited {
   color: #004377;
   text-decoration: none;
}

a.sublevel:hover {
   color: #CC0000;  /*COLORE AL PASSAGGIO MOUSE VOCE SUB-MENù */
}


#active_menu  {
   color: #CC0000;  /* COLORE MENU' ATTIVO */
   font-weight: bold;  /*  Font GRASSETTO */
   font-size: 14px; /* Dimensione voce menù attiva */
   text-decoration: none; /* underline per il SOTTOLINEATO */
}

/* Other Mambo Stuff */

#title {
}
.pathway {
color: #BBBBBB;
font-size: 10px;
text-decoration: none;
font-weight: normal;
}

.pathway a{
color: #BBBBBB;
text-decoration: none;
font-weight: normal;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

hr {
width:  90%;
 }
hr.separator {
width:  40%;
 }
a.pnav {
}
.pnav:hover {
}
.small {
font-size: 10px;
color: #ABABAB;
}

.smalldark {
font-size: 10px;
color: #000;
height: 10px;
line-height: 10px;
text-align: left;
}

.sectiontableentry1 { /* LINK di SELEZIONE CATEGORIE  1 */
text-align: left;
background: #E5E5E5;
font-size: 12px;
padding: 2px;
}
.sectiontableentry2 {   /* LINK di SELEZIONE CATEGORIE   */
background: #FFFFFF;
font-size: 12px;
text-align: left;
padding: 2px;
}
.button {
border: 1px solid #BBBBBB;
}
.inputbox {
border: 1px solid #BBBBBB; 
}

.createdate {
font-size: 10px;
color: #ABABAB;
height: 10px;
line-height: 0.7;
}
.modifydate {
font-size: 10px;
color: #ABABAB;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
}

table.contentpane td.contentheading {
border: none;
}

table.contentpane ul {
margin: 0px;
padding: 20px;
list-style: none;
}

table.contentpane ul li{
padding: 0px;
margin: 0px;
padding-left: 15px;
}

.contentdescription {
font-size: 12px;      /* DIMENSIONE TITOLI delle SEZIONI */
font-weight: bold;    /* GRASSETTO */
color: #44636B;
}
.sectiontableheader {
font-weight: bold;
font-size: 10px;
height: 25px;
line-height: 25px;
}
.categorytitle {
font-weight: bold;
font-size: 16px;
height: 25px;
line-height: 25px;
}
.componentheading {
   font-weight: bold;
   font-size: 22px;  /* Dimensioni titolo contenuto dinamico */
   height: 23px;
   line-height: 20px;
   border-bottom: 2px solid #004377;
   background:url(../images/elefant.png) top right no-repeat;
   color: #004377;
   margin-bottom: 5px;
}

a.category {
text-decoration:  underline;
 }
a.category:hover {
text-decoration:  underline;
 }

.poll {
font-size: 10px;
text-align: center;
}


table.contenttoc {
border: 1px solid #CCCCCC;
padding: 3px;
}

table.contenttoc th{
font-weight: bold;
font-size: 10px;
border-bottom: 1px solid #BBBBBB;


}

form {
margin: 0px;
padding: 0px;
}

[.Andrea S.]

metti il link alle due pagine.

[TullioWeb]

metti il link alle due pagine.

Questa è una pagina a contenuto statico :
Link romosso : sito off-line

Questa invece è a contenuto dinamico:
Link rimosso : sito off-line


Verrei che il titolo con la linea e il logo come si presenta nella pagina a contenuto dinamico fosse uguale per la pagina a contenuto statico

Si può fare ?

Grazie Andrea S. e a tutti per l'aiuto.

[.Andrea S.]

Intendi le scritte "la luce dietro la collina" e "Riflessioni"?

Se si quello del contenuto dinamico (riflessioni), come dici tu, è un titole di componente associato a ".componentheading" nel css.
Mentro l'altro (la luce dietro la collina) è un titolo contenuto associato a ".contentheading" nel css.
Il css è lo stesso per entrambi "template_css.css".
per far si che il secondo assomigli al primo devi modificare .contentheading cercando di ricreare quello che vuoi.

[TullioWeb]

per far si che il secondo assomigli al primo devi modificare .contentheading cercando di ricreare quello che vuoi.

Modificare .contentheading

Ho provato, ma la linea sotto il titolo, si ferma sotto il testo e non arriva al bordo destro come succede per la pagina a contenuto dinamico.

Riporto la parte di codice in questione:

Questo il codice per la pagina a contenuto dinamico in cui appare la linea sotto il titolo lunga fino al bordo destro della pagina:

.componentheading {
   font-weight: bold;
   font-size: 22px;  /* Dimensioni titolo contenuto dinamico */
   height: 23px;
   line-height: 20px;
   border-bottom: 2px solid #004377;
   background:url(../images/elefant.png) top right no-repeat;
   color: #004377;
   margin-bottom: 5px;
}

Per la pagina a contenuto statico, come fare ad avere la stessa linea (con in fondo il logo .pgn) in tutta la larghezza della pagina ?:

.moduletable h3, .contentheading{    /* CONTENUTO STATICO */
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;
   font-size: 30px;   /* DIMENSIONE TITOLO PAGINA */
        font-weight: bold;
   color: #004377;
   text-align: left;
   white-space: nowrap;
   border-bottom: 2px solid #004377;
        margin: 0px;


Che fare ?
Ringrazio anticipatamente per l'attenzione e l'eventuale risoluzione del problema.

[.Andrea S.]

in alternativa prova a ripristinare il css originale e poi cambiare la classe nel file del core di joomla, ovvero apri il file

Codice: [Seleziona]

components\com_content\views\article\tmpl\default.phpriga 10 sostituisci

Codice: [Seleziona]

class="contentheadingcon

Codice: [Seleziona]

class="componentheading

[TullioWeb]

Non va ! 

Nella cartella components\com_content ho solo 2 file .php :
content e content.html + un file index.html
Che sia perchè uso la versione precedente di joomla ?

Ho provato a modificarenel file :  content.html le 3 righe di codice che contengono class="contentheading in class="componentheading ma si verifica lo stesso problema di prima: la linea con il logo termina sotto il testo.

Non c'è un'altra soluzione possibile ?

[.Andrea S.]

Nella cartella components\com_content ho solo 2 file .php :
content e content.html + un file index.html
Che sia perchè uso la versione precedente di joomla ?

si, scusa ho sbagliato io, ma il concetto è lo stesso.

Mi dispiace ma non mi viene in mente altro.

[TullioWeb]

Ho scaricato l'ultima versione di jommla e in effetti c'è il file che mi hai indicato.

Vabbè a questo punto credo che per risolvere quel dettaglio grafico l'unica soluzione sia spostare quello che ho messo nelle pagine a contenuto statico in pagine a contenuto dinamico.

Grazie comunque Andrea S., sei stato gentilissimo e illuminante. 

Ciao

[TullioWeb]

Vabbè a questo punto credo che per risolvere quel dettaglio grafico l'unica soluzione sia spostare quello che ho messo nelle pagine a contenuto statico in pagine a contenuto dinamico.

Niente da fare ! 
Utilizzando le pagine a contenuto dinamico mi appaiono le liste e o elenchi di altre pagine con contenuti statici.

Ma ragionando da perfetto incompetente o quasi, sembrerebbe che ci sia una classe che determina l'aspetto grafico dei titoli della pagina a contenuto dinamico diversa da quella che determina la grafica del titolo della pagina a contenuto statico.

Può essere ?
Qualcuno ha un'idea di quale file dovrei modificare per fare in modo che il titolo di ".contentheading" sia uguale a quello di ".componentheading"

 

[TullioWeb]

up

Mission impossible ?

In fondo si tratta di allungare una linea !
Esiste un codice da aggiungere al css per fare in modo che la linea non si fermi sotto il titolo ma continui fino al bordo dx della pagina ? (come per i contenuti dinamici).

Scusate se insisto ma mi serve proprio usare i contenuti statici per evitare altri problemi.

[Kriss]

Scusate l'intromissione, ma se tu copiassi la classe del css che si applica nei contenuti dinamici e la applicassi anche a quelli statici? lho buttata lì, magari aiuta...

ciao

[TullioWeb]

Scusate l'intromissione, ma se tu copiassi la classe del css che si applica nei contenuti dinamici e la applicassi anche a quelli statici? lho buttata lì, magari aiuta...

Ho provato Kriss, nel css, copiando lo script di .componentheading e applicandolo a .contentheading, funziona ma la linea sotto il titolo (con il logo) si ferma sotto il testo invece di continuare fino al bordo destro della pagina come avviene per i contenuti dinamici.

Mi basterebbe di trovare il modo di allungare quella linea.
Credo che ci siano classi diverse che determinano l'aspetto grafico dei titoli nei contenuti dinamici e nei contenuti statici.
Ma dove cercare ?   

[Kriss]

Fammi capire: tu hai copiato la classe componentheading e la hai sovreascritta a contentheading, lasciando però il nome contentheading invariato? perchè ea questo che intendevo..

[TullioWeb]

Si !

Praticamente nel css ho copiato la parte in grassetto di .componenteading:

.componentheading {
   font-weight: bold;
   font-size: 22px;  /* Dimensioni titolo contenuto dinamico */
   height: 23px;
   line-height: 20px;
   border-bottom: 2px solid #004377;
   background:url(../images/elefant.png) top right no-repeat;
   color: #004377;
   margin-bottom: 5px;
}

E l'ho incollata in .moduletable h3, .contentheading mantenendo invariato il nome (in grassetto quello che NON ho cambiato, il resto è stato tutto sostituito dal codice in grassetto riportato sopra):

.moduletable h3, .contentheading{    /* CONTENUTO STATICO */
   font-family: Verdana, Trebuchet MS, Arial, Helvetica;
   font-size: 30px;   /* DIMENSIONE TITOLO PAGINA */
        font-weight: bold;
   color: #004377;
   text-align: left;
   white-space: nowrap;
   border-bottom: 2px solid #004377;
        margin: 0px;
}

Ho constatato comunque che mi bastava aggiungere a .moduletable h3, .contentheading :

background:url(../images/elefant.png) top right no-repeat;

Per avere nel contenuto statico il logo alla fine della linea sotto il titolo ma la linea invece di arrivare fino al bordo destro della pagina come avviene per il .componenthading, si ferma appena sotto il testo del titolo.