Modificare dinamicamente layout pagina

[ivanisevic82]

Ciao a tutti, ho un dubbio da novellino che spero possiate aiutarmi a sciogliere.

Ho creato un tema per il mio sito wordpress, nel quale ho una certa pagina che viene visualizzata sulla base di un determinato file .php (dentro il quale ovviamente ci sono le istruzioni html e il foglio di stile separato).

Ora vorrei che al resize della pagina web, diversi aspetti della pagina cambino aspetto.

Potrei utilizzare js per eliminare, aggiungere o modificare dinamicamente determinati elementi ed il loro stile.

Tuttavia sarebbe una soluzione molto complessa perché le modifiche da fare sono tante.

Sarebbe molto più pratico per me poter associare al resize un diverso file php con un diverso template.

Il problema è che se agisco solo lato php (senza js), l'attribuzione del corretto template avverrà lato server e quindi non potrà essere dinamicamente gestita in base al resize lato client.

Se invece agisco per via JS, non potrò (o credo di non poter...spero di sbagliarmi!) utilizzare un funzione per cui, al resize, un determinato template (ad esempio pagina_base.php) venga sostituito da un altro (ad esempio pagina_ristretta.php).

E' la prima volta che mi cimento in operazioni del genere, ma il web responsive è ormai necessario da molti anni per chi realizza siti web.

Che soluzioni si adottano generalmente in questi casi?

Grazie del supporto!

[Sonikag]

Non sono sicura di aver capito, ma quello che vuoi fare è tutto fattibile tramite CSS con un layout responsive.

[ivanisevic82]

Ciao Sonikag, grazie innanzitutto per il rapidissimo riscontro!

Con CSS posso modificare lo stile di alcuni elementi.

Tuttavia, nel caso di specie, io devo modificare in maniera più radicale l'aspetto della pagina, eliminando alcuni div, la sidebar ed in generale modificando la struttura.

Si tratta di operazioni che non credo possano essere gestite solo via CSS, dato che deve cambiare una parte dell' "ossatura" html.

[Sonikag]

Quello che dici con i css è possibile. Anzi sarebbe la soluzione più corretta.

[ivanisevic82]

Quello che dici con i css è possibile. Anzi sarebbe la soluzione più corretta.

Grazie ancora.

Questo è il mio codice, che ha la funzione di mostrare alternativamente il contenuto del pannello 1 o del 2 a secondo dell'input checked (si può testare, funziona):

<div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" checked>
  <label for="tab1">TESTO TAB 1</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2">
  <label for="tab2">TESTO TAB 2</label>
  
  <div class="tab-panels">
    <section class="tab-panel">
CONTENUTO PANNELLO 1
  </section>
    <section class="tab-panel">
CONTENUTO PANNELLO 2
    </section>
  </div>


 <style>


    
.tabset > input[type="radio"] {
position: absolute;
left: -200vw;
}


.tabset > input:checked ~ .tab-panels > .tab-panel {
display: none;
animation: fadeOut 0.6s;
}


.tabset > input:checked ~ .tab-panels > .tab-panel.is-active {
display: block;
animation: fadeIn 0.6s;
}


.tabset > input:checked:nth-of-type(1) ~ .tab-panels > .tab-panel:nth-of-type(1),
.tabset > input:checked:nth-of-type(2) ~ .tab-panels > .tab-panel:nth-of-type(2)
 {
animation: fadeIn 0.6s;
display: block;
}


.tabset > label {
  position: relative;
  display: inline-block;
  padding-bottom: 21px;
  margin-right: 30px;
  cursor: pointer;
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
top: 8px;
font-variation-settings: "wght" 400;
will-change: font-variation-settings, color;
transition: font-variation-settings 0.3s , color 0.3s;
}


.tabset > label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: #054363;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  top: 26px;
  opacity: 0;
}


.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  transform: scaleX(1);
  opacity: 1;
}


.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
font-variation-settings: "wght" 600;
color: #054363;
}    
    
.tab-panels {
margin-top: 20px;
}
    
label[for="tab1"] {
width: 101px; /* larghezza fissa */
}


label[for="tab2"] {
width: 217px; /* larghezza fissa */
}
 </style>

Vorrei che al di sotto dei 900px tutto questo "sparisca" e si veda solo il contenuto del tab-panel (quelli che nell'esempio si chiamato "CONTENUTO PANNELLO 1" e CONTENUTO PANNELLO 2") come se fossero due normali DIV con i contenuti che si dispongono uno di seguito all'altro.

Sicuramente dovrò usare qualcosa tipo:

@media (max-width: 900px) {
...............
}

Il problema è che non so come apportare le modifiche di cui ho parlato perché non l'ho mai fatto.

Per praticità ho postato tutto qui, ma se si va troppo off-topic chiudiamo e apro un nuovo topic in CSS.

Grazie!

EDIT: Riguardando il codice e provando a modificarlo, mi sembra proprio che ci voglio qualche regola che al resize elimini delle classi (se non degli elementi). Si può fare questo via css?? Io pensavo si potesse fare solo via JS o PHP.

[Sonikag]

Si io userei

@media (max-width: 900px) {
#tuoblocco {display:none}
}

[ivanisevic82]

Mi scuso per il ritardo con cui rispondo, ho avuto una settimana molto impegnativa e sono tornato sul mio sito solo questa sera.

In effetti la tua soluzione funziona perfettamente, ti ringrazio!