Diversificare template di stampa da template vista sito

[tomtomeight]

Salve
Ho esigenza di stampare parzialmente una pagina di un componente che sto sviluppando e per nascondere le parti che non voglio stampare le assegno alla classe "no-print" e aggiungo questa istruzione nel file css:

Codice: [Seleziona]

@media print {
    .no-print { display: none !important; }
  }E fin quì nessun problema, devo però aggiungere altri elementi, per esempio degli spazi per abbassare l'inizio della stampa, che devo applicare appunto solo nella stampa.
Esiste un metodo opposto al @media print?
Questo il link:
https://menu.hotelgraziaallascannella.it

N.B.
Per la stampa uso queste istruzioni:

Codice: [Seleziona]

<?php
    $isModal = JRequest::getVar( 'print' ) == 1; // 'print=1' will only be present in the url of the modal window, not in the presentation of the page
    if( $isModal) {
        $href = '"#" onclick="window.print(); return false;"';
    } else {
        $href = 'status=no,toolbar=no,scrollbars=no,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no';
        $href = "window.open(this.href,'win2','".$href."'); return false;";
        $href = '"index.php?option=com_hotelmenu&tmpl=dailymenuit&print=1" '.$href;
    }
?>
     <a href=<?php echo $href; ?> >Click for Printing</a>nel default template della vista.

[giusebos]

dichiara nell'head del template lo stile per la stampa:

Codice: [Seleziona]

<link rel='stylesheet' href= 'stampa.css'  media='print'  type='text/css' />
Quando stamperai saranno attive solo le regole di questo file

[giusebos]

dimenticavo:
molto comodo in quanto puoi usare unità di misura e regole tipiche di word.

se copi un testo da word e lo incolli in un editor (che non ripulisce il codice) vedrai specifico css (in linea) nella formattazione da cui prendere spunto.

ad esempio con questa regola imposti le dimensioni del foglio

Codice: [Seleziona]

@page {size: 210mm 297mm; margin: 25mm;}

[tomtomeight]

Grazie, provo e ti faccio sapere, anche perché  ci sono elementi, nella stampa, che non rispondono ai css della vista. Con un css dedicato posso personalizzare meglio.

[tomtomeight]

Avendo difficoltà ad aggiungere il richiamo al file stampa.css in protostar ho optato per questo codice nel css della vista.

Codice: [Seleziona]

@media print {
    .no-print { display: none !important; }

  }
  @media print {
    .title  {
        padding-top: 155px;
        font-size: 32px;
    }

    .section {
        font-size: 28px;
    }
       
    @page {
        size: 210mm 297mm; margin: 25mm;
    }
       
    .no-print {
         display: none !important;
        }
  }Riesco ad abbassare inizio stampa anche se non sono sicuro prenda le altre istruzioni per aumentare i font, ma vorrei pure poter eliminare l'url in alto a destra e la scritta home a sinistra.

[giusebos]

inserisci il richiamo al file nel file index.php dopo la stringa

Codice: [Seleziona]

<jdoc:include type="head" />


<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/stampa.css" media="print"  type="text/css" />



+/- a riga 138

[giusebos]

per aiutarti a visualizzare il risultato con il css per la stampa:

In Chrome, apri gli Strumenti per sviluppatori
guarda cliccando nell'icona a tre punti in alto a destra
scegli "more tools" poi "rendering"
infine nella finestra inferiore in basso nella tabs "rendering"
scegli EMULATE CSS MEDIA TYPE ->PRINT

a video vedrai l'anteprima di stampa potendo modificare al volo quello che vuoi

[giusebos]

alcune istruzioni di base da scrivere per definire l'area di stampa:

Codice: [Seleziona]

@page {
  size: A4;
}
/**se sono 2 pagine affiancate**/
@page :left {
  margin-left: 3cm;
}

@page :right {
  margin-left: 3cm;
}


[tomtomeight]

Grazie ma preferisco inserire le media print nel css del componente in modo che sia parte di esso e non che poi si debbano effettuare operazioni supplementari per farlo funzionare.