Back to top

Autore Topic: Joomla4 - I colori di Bootastrap non sono gli stessi in joomla - Sono più scuri  (Letto 2205 volte)

Offline sportegioco

  • Nuovo arrivato
  • *
  • Post: 18
    • Mostra profilo
Il codice html che permette a una pagina di renderizzare i colori bootstrap, quando viene inserito in un articolo i colori sono più scuri. Non riesco a capire perchè. Qualcuno ha la spiegazione?Allego i colori normali se apro la pagina non da joomla e quando sono dentro un articolo.

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
mica si capisce cosa chiedi. vedo che le immagini hanno delle tonalità di colore differenti, ma è un immagine che è soggetta a profili colore e altro.
Occorre la pagina ovvero il link e i codici esadecimali che utilizzi. inoltre tra differenti versioni di bootstrap, i colori cambiano.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sportegioco

  • Nuovo arrivato
  • *
  • Post: 18
    • Mostra profilo
Praticamente se io metto questo codice in una pagina html fuori da joomla viene con i colori giusti e brillanti di bootstrap:

Codice: [Seleziona]
<!DOCTYPE html>
<html>
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
  integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
  integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<title>
CALCIO - N. 1001 - mini partitella con passaggi
</title>
  </head>
<body>

  <div class="container">
   </br>
    <div class="row">
      <div class="col-sm-12 bg-warning">
        <h2>CALCIO - N. 1001 - mini partitella con passaggi
        </h2>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-8 bg-danger">
        <p><img src="
/media/administrator/D/0Archivi/00_GesticsSportsEsercitazioniSportiveGiochi/DatabasePaolo_esercizi_giochi_attivita/Esercizi_Fisici_Motori_Sportivi/imgsportivi/1001.png" alt="CALCIO - N. 1001 - mini partitella con passaggi" class="img-fluid" alt="Responsive image"></p>
<h6 style="text-align: center;">GRAFICA REALIZZATA CON IL SOFTWARE <strong>GESTICS SPORTS<br /></strong><a href="https://www.sportscoachingsystem.com/">HTTPS://WWW.SPORTSCOACHINGSYSTEM.COM</a></h6>
      </div>
      <div class="col-sm-4 bg-success">
<h3>Tipo e Azione</h3>
<p>Sport: calcio<br />Obiettivo: tecnico, passarsi la palla per sei volte<br />Azione: il passaggio (generale)
</p>
<h3>Scheda Tecnica</h3>
<p>
Età: 7 - 11 anni <br />
</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-12 bg-warning">
<h2>Descrizione breve</h2><p>in questo esercizio basta passarsi la palla sei volte per ottenere un punto</p><h2>Partenza</h2><p>disposti da schema descritto, non a squadre. Il campo circa m. 20x20, solo la zona dell'area grande</p>
        <h2>Esecuzione</h2>
        <p>è come una mini partitella solo che non bisogna fare goal ma bisogna eseguire sei passaggi per ottenere un punto. <br />Ci sono anche tre jolly che aiutano la squadra che ha in possesso la palla a completare i sei passaggi (ovviamente i jolly cambieranno squadra ogni volta)</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm bg-danger">
        <h2>Varianti</h2>
        <p><null></p>
      </div>
      <div class="col-sm bg-primary">
        <h2>Consigli</h2>
        <p><CONSIGLIHTML></p>
      </div>
      <div class="col-sm bg-info">
        <h2>Materiali</h2>
        <p>pallone, 4 coni</p>
      </div>
    </div>
  </div>
 
</body>

</html>

Se invece io prendo il codice html del solo tag <body> e lo metto in un articolo di joomla viene con i colori più scuri:
Codice: [Seleziona]
  <div class="container">
   </br>
    <div class="row">
      <div class="col-sm-12 bg-warning">
        <h2>CALCIO - N. 1001 - mini partitella con passaggi
        </h2>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-8 bg-danger">
        <p><img src="
/media/administrator/D/0Archivi/00_GesticsSportsEsercitazioniSportiveGiochi/DatabasePaolo_esercizi_giochi_attivita/Esercizi_Fisici_Motori_Sportivi/imgsportivi/1001.png" alt="CALCIO - N. 1001 - mini partitella con passaggi" class="img-fluid" alt="Responsive image"></p>
<h6 style="text-align: center;">GRAFICA REALIZZATA CON IL SOFTWARE <strong>GESTICS SPORTS<br /></strong><a href="https://www.sportscoachingsystem.com/">HTTPS://WWW.SPORTSCOACHINGSYSTEM.COM</a></h6>
      </div>
      <div class="col-sm-4 bg-success">
<h3>Tipo e Azione</h3>
<p>Sport: calcio<br />Obiettivo: tecnico, passarsi la palla per sei volte<br />Azione: il passaggio (generale)
</p>
<h3>Scheda Tecnica</h3>
<p>
Età: 7 - 11 anni <br />
</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-12 bg-warning">
<h2>Descrizione breve</h2><p>in questo esercizio basta passarsi la palla sei volte per ottenere un punto</p><h2>Partenza</h2><p>disposti da schema descritto, non a squadre. Il campo circa m. 20x20, solo la zona dell'area grande</p>
        <h2>Esecuzione</h2>
        <p>è come una mini partitella solo che non bisogna fare goal ma bisogna eseguire sei passaggi per ottenere un punto. <br />Ci sono anche tre jolly che aiutano la squadra che ha in possesso la palla a completare i sei passaggi (ovviamente i jolly cambieranno squadra ogni volta)</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm bg-danger">
        <h2>Varianti</h2>
        <p><null></p>
      </div>
      <div class="col-sm bg-primary">
        <h2>Consigli</h2>
        <p><CONSIGLIHTML></p>
      </div>
      <div class="col-sm bg-info">
        <h2>Materiali</h2>
        <p>pallone, 4 coni</p>
      </div>
    </div>
  </div>

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Come ti ho già scritto le varie versioni di bootstrap usano tonalità di colore diverse

joomla usa Bootstrap v2.3.2

mentre la versione del tuo codice fa riferimento a bootstrap 4.1.3


per correggere devi fare gli aggiustamenti sovrascrivendo le regole necessarie in un file custom.css
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sportegioco

  • Nuovo arrivato
  • *
  • Post: 18
    • Mostra profilo
Ok, grazie tante per la risposta.Per la verità la prova è stata fatta con joomla 4 beta 8, pertanto dovrebbe utilizzare bootstrap 5Ora provo a cambiare nel codice della pagina senza joomla, da 4.1.3 alla versione 5 di bootstrap...vediamo se viene renderizzato allo stesso modo.Grazie comunque per la risposta.

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
la versione 5 ha un ulteriore tonalità
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Il codice html che permette a una pagina di renderizzare i colori bootstrap, quando viene inserito in un articolo i colori sono più scuri. Non riesco a capire perchè. Qualcuno ha la spiegazione?Allego i colori normali se apro la pagina non da joomla e quando sono dentro un articolo.
Mah... Ho utilizzato il codice che hai postato in un articolo in un sito di test con Joomla 4 e i colori mi paiono assolutamente corretti.
Vedi qui.

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Credo che dipenda dal template, è possibile che helix, il template che hai usato disattivi l'inclusione della versione di bootstrap del core di joomla.

Purtroppo  senza un link al sito che ha il problema non è possibile saperne di più.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sportegioco

  • Nuovo arrivato
  • *
  • Post: 18
    • Mostra profilo
Chiedo scusa e ringrazio nuovamente per la pazienza e il supporto che mi stai dando, ma non avevo risposto perchè non avevo visto la tua risposta.
Ho creato la pagina con il template di default cassiopeia per farti vedere come rende i colori se utilizzo le classi:  https://www.drills4sports.com/index.php/user-area/articolo-di-prova-per-la-resa-dei-colori-con-le-classi

Invece se utilizzo gli stili tutto funziona alla perfezione. Ecco come rende i colori con gli stili:  https://www.drills4sports.com/index.php/user-area/articolo-di-prova-per-la-resa-dei-colori-con-gli-stili

Ecco il codice in cui utilizzo gli stili:
Codice: [Seleziona]
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color: yellow;">
<h2>PALLACANESTRO - N. 3072 - corri, cattura la palla e conquista il canestro</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8" style="background-color: red;">
<p><img src="images/ita/esercitazsportiveimg/3072.png" alt="PALLACANESTRO - N. 3072 - corri, cattura la palla e conquista il canestro" width="643" height="416" class="img-fluid" /></p>
<h6 style="text-align: center;"><span style="color: #ffffff;">GRAFICA REALIZZATA CON IL SOFTWARE <strong>GESTICS SPORTS[br /]</strong><a href="https://www.sportscoachingsystem.com/" style="color: #ffffff;">http://HTTPS://WWW.SPORTSCOACHINGSYSTEM.COM[/url]</span></h6>
</div>
<div class="col-sm-4" style="background-color: cyan;">
<h3>Tipo e Azione</h3>
<p>Sport: pallacanestro, esercizio sintetico[br /]Obiettivo: tecnico, velocità generale[br /]Azione: possesso palla, tiro, palleggio</p>
<h3>Scheda Tecnica</h3>
<p>Gruppo/Squadra: in coppia [br /]Età: tutti [br /]Fase di allenamento: riscaldamento con la palla [br /]Difficoltà: facile [br /]Durata: media (da 5 a 15 minuti)</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color: yellow;">
<h2>Descrizione breve</h2>
<p>L’allenatore lancia la palla e due giocatori alla volta partendo dal proprio angolo devono riuscire a prendere la palla e dopo uno slalom tirare a canestro</p>
<h2>Partenza</h2>
<p>disposti da schema descritto, non a squadre. Il campo è quello usato per la pallacanestro, m. 28x15</p>
<h2>Esecuzione</h2>
<p>&nbsp;</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm" style="background-color: green;">
<h2>Varianti</h2>
<p>&nbsp;</p>
</div>
<div class="col-sm" style="background-color: red;">
<h2>Consigli</h2>
<p>&nbsp;</p>
</div>
<div class="col-sm" style="background-color: pink;">
<h2>Materiali</h2>
<p>&nbsp;</p>
</div>
</div>
</div>

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
hai messo 2 link stessa pagina
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sportegioco

  • Nuovo arrivato
  • *
  • Post: 18
    • Mostra profilo
No, uno rimanda alla pagina di prova con le classi e uno rimanda alla pagina di prova con gli stili

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
nella pagina con i colori più vividi, questi sono inseriti con uno stile in linea, mentre quella con i colori più "smorti" ha le classi del template inserite nel file:
https://www.drills4sports.com/templates/cassiopeia/css/template.min.css

quindi è normale che hanno 2 tonalità diverse, di fatto sono 2 codice esadecimali diversi.

...io devo ancora capire la domanda però.

su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sportegioco

  • Nuovo arrivato
  • *
  • Post: 18
    • Mostra profilo
La domanda è questa:Se joomla 4 utilizza bootstrap 5 ...e bootstrap 5 ha delle classi predefinite che dovrebbero rendere i colori con delle tonalità che si possono vedere nel sito di bootstrap ...perchè joomla visualizza le tonalità relative alle classi con colori diversi?

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
quelle tonalità arrivano da questo file
https://www.drills4sports.com/templates/cassiopeia/css/template.min.css

con bootstrap non centrano niente.

fai un override e correggi secondo il tuo gusto
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sportegioco

  • Nuovo arrivato
  • *
  • Post: 18
    • Mostra profilo
Ok. provvedo a sostituire i codici come mi hai suggerito.
Grazie mille.

 



Web Design Bolzano Kreatif