Installazione joomla e css

[accava]

Buongiorno,
ho re-installatato joomla, da un mio backup in locale.
Stranamente il css non si comporta come dovrebbe.
(Almeno in locale si vede bene.)

In particolare ho due problemini.
Il primo: (questo è il mio sito)
a fondo pagina c'è il contatore delle visite che dovrebbe comparire così :

mentre invece lo sfondo mi rimane nero.

Del secondo problemino, sempre legato al css, ne parlerò dopo aver risolto questo problema.
Grazie e buona domenica

[alemoppo]

In questo file, la regola del colore di sfondo è commentata:

/* cornice modulo a destra */
div.cornice {
 /*  background-color: #CCE0FF; */
  border: 2px solid #6495ED;
  border-radius: 8px;
  moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

Ciao!

[accava]

Grazie alemoppo.

Mi sono accorto che avevo scritto due volte la stessa dichiarazione css.
Ho tolto quella con il commento. Forse su altervista andava in conflitto.
Ho provato anche a pulire la cache di joomla.
Niente, rimane lo sfondo nero.
Grazie per l'aiuto.

[alemoppo]

Il CSS dubito vada in conflitto con AlterVista (in che senso?)

Più che altro, stai modificando il file del tema attuale? (/templates/shaper_helixultimate/css/custom.css)

Ciao!

[accava]

Più che altro, stai modificando il file del tema attuale? (/templates/shaper_helixultimate/css/custom.css)

Si, certo. E' il file di override del template.


Grazie e Buone Feste

[alemoppo]

Non stai modificando il file corretto: il problema è questo:



Ciao!

[accava]

Boh. Non capisco.
Sembra che hai ragione tu.
Ho cancellato il file custom.css e l'ho ricaricato. Dovrebbe iniziare così:

/**
*  B.P. Dicembre 2019
**/ 

Eppure non è così. Non riesco a capire. Sembra che ci sia sempre il file sbagliato.
Il percorso è giusto

...templates/shaper_helixultimate/css/custom.css

Perchè non si aggiorna ?
Ho provato anche via ftp non solo tramite il template (come si vede nell'immagine postata precedente).
Non so cos'altro farci. Rimane sempre lo stesso css.

Grazie e scusami se non rispondo in questi giorni ... non avrò il pc a disposizione.
Ci aggiorniamo prossimamente. Grazie ancora dell'aiuto

[alemoppo]

/**
*  B.P. Dicembre 2019
**/ 

In effetti il file inizia con quel commento:

/**
*  B.P. Ottobre 2019
**/

/* Colore di sfondo sito */
body {

...


/* cornice modulo a destra */
div.cornice {
 /*  background-color: #CCE0FF; */
  border: 2px solid #6495ED;
  border-radius: 8px;
  moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

Ma ha comunque la riga incriminata commentata.


Non conosco così bene Joomla, forse salva una copia in cache e la ripristina in caso questa venga modificata (?).

Prova a modificare il CSS come descritto qui, ovvero dall'interfaccia di Joomla.

Ciao!

[accava]

Prova a modificare il CSS come descritto qui, ovvero dall'interfaccia di Joomla.

Ciao!

Grazie alemoppo,
ma avevo già provato quella modalità.
Il bello è che andando a verificare il css su joomla, mostra quello giusto (nota il commento iniziale).
Il percorso è quello del template nella cartella css.
In teoria sembra essere tutto in regola, vedi immagine:


Quindi c'è il nuovo css su joomla in altervista (che ricopio e ti allego sotto).
Però quando si richiama il sito viene considerato il css vecchio.
Non è possibile. Non so dove lo recuperi.
Non è pensabile neppure che lo conservi la cache che ho svuotato anche da joomla.

/**
*  B.P. Dicembre 2019
**/

/* Colore di sfondo sito */
body {
  background-color: #79b5f1;
}

/* REGOLA classe CSS del layout title */
.blu {
  background-color: #2E6DAB;
}

/* Colora barra dei menu */
header#sp-header {
  background-color: #2E6DAB;
}

/* Sweep To Left */
.sp-menu-item {
  /* background-color: #2E6D00; */
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sp-menu-item:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.sp-menu-item:hover:before, .sp-menu-item:focus:before, .sp-menu-item:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.sp-megamenu .sp-dropdown li.sp-menu-item >a:hover {
    background: yellow;
    border: 1px solid rgba(0,0,0,0.1);
    content: '';
    color: red;
    content: attr(data-hover);
}

/*  Vedi https://www.disegnareilweb.cloud/HUB4/index.php/header-style/header-4 */

/* Per allineare il menu a sinistra.  */
.sp-megamenu-parent { 
 list-style: none; 
 padding: 0; 
 margin: 0 -15px;  
 z-index: 99; 
 display: block; 
 float: left; 
 position: relative; 
 }

/* Per allineare il logo a destra.  */
#sp-header .logo { 
 height: 60px; 
 display: inline-flex; 
 margin: 0; 
 align-items: center; 
 float: right; 
}

/* Questa regola reimposta a 0 il margin-top dell'header quando raggiunge la posizione sticky */
#sp-header.header-sticky { 
  position: fixed;
  z-index: 9999;
  margin-top: 0px; 
  transition: all ease-out 0.5s; 
  -webkit-transition: all ease-out 0.5s; 
  border-bottom: solid 1px #ed0404;
}

/* REGOLA classe CSS del layout Component */
.centro {
  /* background: #18fefb; */
  margin: 0;
  padding: 1px;
}

/* REGOLA classe CSS del layout right */
.barra {
  background: #181e2b; background:url(../images/bg.jpg);
}

/* allineamento - Riduzione spazio tra i moduli a dx - In originale nel  template.css margin-top: 50px; */
#sp-left .sp-module, #sp-right .sp-module {
  margin-top: 5px;
  border: 1px solid #f3f3f3;
  padding: 30px;
  border-radius: 3px;
}

.article-list .article {
 
  -webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: rgb(223, 232, 138);
background: -moz-linear-gradient(90deg, rgb(223, 232, 138) 7%, rgb(255, 221, 103) 70%);
background: -webkit-linear-gradient(90deg, rgb(223, 232, 138) 7%, rgb(255, 221, 103) 70%);
background: -o-linear-gradient(90deg, rgb(223, 232, 138) 7%, rgb(255, 221, 103) 70%);
background: -ms-linear-gradient(90deg, rgb(223, 232, 138) 7%, rgb(255, 221, 103) 70%);
background: linear-gradient(0deg, rgb(223, 232, 138) 7%, rgb(255, 221, 103) 70%);
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.75);
box-shadow:         9px 4px 8px rgba(76, 172, 119, 0.64);
}  
  
/* Impostare il bordo al titolo di un testo */
.bordo
{
    text-align: Center;
    text-shadow: 0px -1px 0px rgba(0, 0, 30, 0.8);
    filter: Wave(Add=1, Freq=1, LightStrength=200, Phase=5, Strength=1);
    filter: Glow(color=#000000, Strength=1);
    color: #FF0000;
    font-size: 14px;
    font-family: 'Arial Black';
    height: 1px;
}

/* Impostare grafica categorie */
.item-title {

    font: italic bold 14px arial, tahoma, sans-serif;    
    filter: Wave(Add=1, Freq=1, LightStrength=200, Phase=5, Strength=1);
    filter: Glow(color=#000000, Strength=1);
    color: #0000FF;
    height: 1px;
}

/* Modulo personalizzato per slide foto */
.modulo-black{
    background-color: #3e3e3e;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.5) inset;
    color: blue;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 12px 12px 12px 12px;
}

/* Modulo personalizzato per il login */
.modulo-verde{
    background-color: #009900;
    border: 1px solid #e3e3e3;
    border-radius: 28px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.5) inset;
    color: blue;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 12px 12px 12px 12px;
}

/* cornice con ombra per contatore */
div.cornice {
 background-color: #CCE0FF; 
  border: 1px solid #6495ED;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
   box-shadow: 1px 1px 2px #0000cd;
   color: black;
}

div.cornice  h3{

  background-color: #CCE0FF; 
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
   text-align: center;
} 

[alemoppo]

Puoi provare a guardare se hai CloudFlare attivato? Se sì, in caso, elimina la cache e attiva la modalità di sviluppo.

Impostando un parametro random, il file viene correttamente visualizzato: https://accava.altervista.org/templa...custom.css?a=2

Ciao!

[accava]

Puoi provare a guardare se hai CloudFlare attivato? Se sì, in caso, elimina la cache e attiva la modalità di sviluppo.

Ciao!

Ottimo alemoppo, è quello che serviva fare.
Ho svuotato la cache perchè il CloudFlare era già attivo e ho messo in modalità di sviluppo, che però resterà attivo solo per 3 ore.
Comunque adesso dovrei essere a posto.
Grazie ancora per l'esperta consulenza.

[alemoppo]

Molto bene.

che però resterà attivo solo per 3 ore.

Non dovrebbe essere un problema la disabilitazione della modalità di sviluppo, perché ormai la copia salvata è quella aggiornata. Se dovessi ri-modificarlo, dovrai ripetere la procedura, anche se probabilmente è sufficiente solamente vuotare la cache di CloudFlare.

Ciao!