Joomla.it Forum
Non solo Joomla... => Sviluppo => : tomtomeight 19 Jun 2021, 15:45:13
-
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:@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:
<?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.
-
dichiara nell'head del template lo stile per la stampa:
<link rel='stylesheet' href= 'stampa.css' media='print' type='text/css' />
Quando stamperai saranno attive solo le regole di questo file
-
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
@page {size: 210mm 297mm; margin: 25mm;}
-
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.
-
Avendo difficoltà ad aggiungere il richiamo al file stampa.css in protostar ho optato per questo codice nel css della vista.
@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.
-
inserisci il richiamo al file nel file index.php dopo la stringa
<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
-
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
-
alcune istruzioni di base da scrivere per definire l'area di stampa:
@page {
size: A4;
}
/**se sono 2 pagine affiancate**/
@page :left {
margin-left: 3cm;
}
@page :right {
margin-left: 3cm;
}
-
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.