(prononcez web honnête) Ukraine Support
EN

Receipt

mod_articles_category
Overrides - - - Hits: 2543

This Joomla 4 override allows you to display a realistic supermarket receipt simply using the Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author		web-eau.net
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

$model = JModelLegacy::getInstance('Articles', 'ContentModel', array( 'ignore_request' => true )); 
$params = JFactory::getApplication()->getParams();
$model->setState('params', $params);
$model->setState('filter.category_id', 17); // xxxx category ID 
$num_articles = $model->getTotal();
?>

<div class="container-ticket">
	<div class="ticket">
		<div class="head-ticket">
			<p class="x-bold">E.Leclerc</p>
			<p class="bold">29800 LANDERNEAU</p>
			<p class="bold">Tél: 02 98 21 47 11</p>
			<br>
			<p class="bold">VOUS REMERCIE DE VOTRE CONFIANCE</p>
			<p>Caisse 015-2019 15 avril 2019 18:24</p>
			<p>Ticket 15/04/170 0QRM 02050</p>
			<div class="code-barre">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="body-ticket">
			<div class="produits">				
				<?php foreach ($list as $item) : ?>
				<div class="col2">
					<?php if ($params->get('link_titles') == 1) : ?>
					<p><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></a></p>
					<?php else : ?>
					<p><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></p>
					<?php endif; ?>			
					<?php if ($item->displayDate) : ?>
					<p class="prix">
						<?php echo $item->displayDate; ?> <!-- use the format 'd.m' in module parameters -->
					</p>
					<?php endif; ?>
				</div>						
				<?php endforeach; ?>
				<div class="hr-sm"></div>
				<div class="col2 pt-2">
					<p>Total <?php echo $num_articles; ?> articles</p>
					<p class="prix">1.63</p>
				</div>
				<p>Soit en franc : 10.69</p>
				<p>(1 euro = 6,55957 francs)</p>
				<br>
				<div class="col2">
					<p>Bon achat carte</p>
					<p class="prix">1.63</p>
				</div>
				<div class="col2">
					<p>Rendu</p>
					<p class="prix">0.00</p>
				</div>
			</div>
			<div class="hr-lg"></div>
			<div class="carte">
				<p class="title-carte">Avec la carte E.Leclerc</p>
				<br>
				<div class="col2">
					<p>CUMUL DISPONIBLE AU 15/04/19 :</p>
					<p class="prix">42.65€</p>
				</div>
				<br>
				<p>Ce CUMUL DISPONIBLE est à valoir sur vos prochains achats dans tous les magasins E.LECLERC participant à l'opération et sur présentation de votre carte E.LECLERC.</p>
				<br>
				<p>Modalités, durée de validité à l'accueil</p>
			</div>
			<div class="hr-lg"></div>
		</div>
		<div class="footer-ticket">
			<p class="title-footer">Merci de votre<br>visite et à bientôt</p>
		</div>
	</div>
</div>

CSS

.serif{
	font-family: serif;
}
.sans-serif{
	font-family: 'sans-serif';
}
.bold{
	font-weight: 700;
}
.x-bold{
	font-weight: 900;
	text-shadow: 0px 0px 1px #000;
}
.hr{
	border-bottom: 1.5px dashed #333;
	margin: 10px 0;
}
.hr-sm{
	/*@extend .hr;*/
	width: 30%;
	float: right;
}
.hr-lg{
	@extend .hr;
	width: 100%;
}
.col2{
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.container-ticket {
  background: #e6e6e6;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 50px 0;
  box-sizing: border-box;
  font-size: 12px;
  font-family: 'courier';
}
.container-ticket .ticket {
  cursor: default;
  position: relative;
  width: 350px;
  padding: 10px 20px;
  background: #fff url(https://static.licdn.com/scds/common/u/images/apps/payments/textures/texture_paper_304x128_v1.png);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}
.container-ticket .ticket .head-ticket {
  text-align: center;
  padding: 0px 17px;
}
.container-ticket .ticket .head-ticket p {
  font-size: 14px;
}
.container-ticket .ticket .head-ticket p:nth-child(1) {
  font-size: 18px;
}
.container-ticket .ticket .head-ticket p:nth-child(6), .container-ticket .ticket .head-ticket p:nth-child(7) {
  font-size: 12px;
  text-align: left;
}
.container-ticket .ticket .head-ticket .code-barre {
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-left: -17px;
  margin-right: -17px;
  margin-top: 5px;
}
.container-ticket .ticket .head-ticket .code-barre span {
  height: 100%;
  width: 10px;
  display: inline-block;
  background: #333;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(1) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(2) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(3) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(4) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(5) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(6) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(7) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(8) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(9) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(10) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(11) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(12) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(13) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(14) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(15) {
  width: 6px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(16) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(17) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(18) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(19) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(20) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(21) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(22) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(23) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(24) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(25) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(26) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(27) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(28) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(29) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(30) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(31) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(32) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(33) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(34) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(35) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(36) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(37) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(38) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(39) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(40) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(41) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(42) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(43) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(44) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(45) {
  width: 3px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(46) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(47) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(48) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(49) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(50) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .body-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .body-ticket .produits {
  margin: 30px 0;
}
.container-ticket .ticket .body-ticket .carte {
  text-align: justify;
  text-align-last: center;
}
.container-ticket .ticket .body-ticket .carte .title-carte {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -2px;
}
.container-ticket .ticket .footer-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .footer-ticket .title-footer {
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
  text-align: center;
  letter-spacing: 2px;
}
 

Inspiration: https://codepen.io/EMEDESIGN/pen/xLPLwg

Download this override

override-receipt-j4.zip

This Joomla 3 override allows you to display a realistic supermarket receipt simply using the Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
$model = JModelLegacy::getInstance('Articles', 'ContentModel', array( 'ignore_request' => true )); 
$params = JFactory::getApplication()->getParams();
$model->setState('params', $params);
$model->setState('filter.category_id', xxxx); // xxxx category ID 
$num_articles = $model->getTotal();
?>
  
  
<div class="container-ticket">
	<div class="ticket">
		<div class="head-ticket">
			<p class="x-bold">E.Leclerc</p>
			<p class="bold">29800 LANDERNEAU</p>
			<p class="bold">Tél: 02 98 21 47 11</p>
			<br>
			<p class="bold">VOUS REMERCIE DE VOTRE CONFIANCE</p>
			<p>Caisse 015-2019 15 avril 2019 18:24</p>
			<p>Ticket 15/04/170 0QRM 02050</p>
			<div class="code-barre">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="body-ticket">
			<div class="produits">				
				<?php foreach ($list as $item) : ?>
				<div class="col2">
					<?php if ($params->get('link_titles') == 1) : ?>
					<p><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></a></p>
					<?php else : ?>
					<p><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></p>
					<?php endif; ?>			
					<?php if ($item->displayDate) : ?>
					<p class="prix">
						<?php echo $item->displayDate; ?> <!-- use the format 'd.m' in module parameters -->
					</p>
					<?php endif; ?>
				</div>						
				<?php endforeach; ?>
				
				<div class="hr-sm"></div>
				<div class="col2 pt-2">
					<p>Total <?php echo $num_articles; ?> articles</p>
					<p class="prix">1.63</p>
				</div>
				<p>Soit en franc : 10.69</p>
				<p>(1 euro = 6,55957 francs)</p>
				<br>
				<div class="col2">
					<p>Bon achat carte</p>
					<p class="prix">1.63</p>
				</div>
				<div class="col2">
					<p>Rendu</p>
					<p class="prix">0.00</p>
				</div>
			</div>
			<div class="hr-lg"></div>
			<div class="carte">
				<p class="title-carte">Avec la carte E.Leclerc</p>
				<br>
				<div class="col2">
					<p>CUMUL DISPONIBLE AU 15/04/19 :</p>
					<p class="prix">42.65€</p>
				</div>
				<br>
				<p>Ce CUMUL DISPONIBLE est à valoir sur vos prochains achats dans tous les magasins E.LECLERC participant à l'opération et sur présentation de votre carte E.LECLERC.</p>
				<br>
				<p>Modalités, durée de validité à l'accueil</p>
			</div>
			<div class="hr-lg"></div>
		</div>
		<div class="footer-ticket">
			<p class="title-footer">Merci de votre<br>visite et à bientôt</p>
		</div>
	</div>
</div>

CSS

.serif{
	font-family: serif;
}
.sans-serif{
	font-family: 'sans-serif';
}
.bold{
	font-weight: 700;
}
.x-bold{
	font-weight: 900;
	text-shadow: 0px 0px 1px #000;
}
.hr{
	border-bottom: 1.5px dashed #333;
	margin: 10px 0;
}
.hr-sm{
	/*@extend .hr;*/
	width: 30%;
	float: right;
}
.hr-lg{
	@extend .hr;
	width: 100%;
}
.col2{
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.container-ticket {
  background: #e6e6e6;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 50px 0;
  box-sizing: border-box;
  font-size: 12px;
  font-family: 'courier';
}
.container-ticket .ticket {
  cursor: default;
  position: relative;
  width: 350px;
  padding: 10px 20px;
  background: #fff url(https://static.licdn.com/scds/common/u/images/apps/payments/textures/texture_paper_304x128_v1.png);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}
.container-ticket .ticket .head-ticket {
  text-align: center;
  padding: 0px 17px;
}
.container-ticket .ticket .head-ticket p {
  font-size: 14px;
}
.container-ticket .ticket .head-ticket p:nth-child(1) {
  font-size: 18px;
}
.container-ticket .ticket .head-ticket p:nth-child(6), .container-ticket .ticket .head-ticket p:nth-child(7) {
  font-size: 12px;
  text-align: left;
}
.container-ticket .ticket .head-ticket .code-barre {
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-left: -17px;
  margin-right: -17px;
  margin-top: 5px;
}
.container-ticket .ticket .head-ticket .code-barre span {
  height: 100%;
  width: 10px;
  display: inline-block;
  background: #333;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(1) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(2) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(3) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(4) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(5) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(6) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(7) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(8) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(9) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(10) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(11) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(12) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(13) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(14) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(15) {
  width: 6px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(16) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(17) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(18) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(19) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(20) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(21) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(22) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(23) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(24) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(25) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(26) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(27) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(28) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(29) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(30) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(31) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(32) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(33) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(34) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(35) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(36) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(37) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(38) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(39) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(40) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(41) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(42) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(43) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(44) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(45) {
  width: 3px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(46) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(47) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(48) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(49) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(50) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .body-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .body-ticket .produits {
  margin: 30px 0;
}
.container-ticket .ticket .body-ticket .carte {
  text-align: justify;
  text-align-last: center;
}
.container-ticket .ticket .body-ticket .carte .title-carte {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -2px;
}
.container-ticket .ticket .footer-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .footer-ticket .title-footer {
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
  text-align: center;
  letter-spacing: 2px;
}
 

Inspiration: https://codepen.io/EMEDESIGN/pen/xLPLwg

Download this override

override-receipt-j3.zip

Joomla overrides list

A bunch of tips and snippets
Agenda activities
Archived articles
Articles carousel
Articles list
Articles popular
Articles slideshow
Author bio
Awesome stats
Best offers
Blog article
Blog intro
Blog layout
Blog post
Bootstrap 5 Login Form
Calendar list
Card overlay
Category list
Clients testimonials
Concerts layout
Conference schedule
Documentation center
eCommerce products
Error 404 page
Events list
Facebook timeline
Featured articles
Features boxes
Five articles
Flexbox Card
Flipping postcard
Footer links
Frequently Asked Questions
Friends list
Glossary + index - Joomla4
Gmail inbox
Google SERPs
Graphic portfolio
Great RSS
Horizontal news
Horizontal testimonials
Job board
Knowledge base
Knowledge base Joomla 4
Language Switcher
Latest blog
Latest projects
Latest users
Login form - Bootstrap 4
Login separate
Login with picture
Magazine categories
Magazine Newsfeed
Menu restaurant
Modal login
Movies list
News Ticker
Nice agenda - Bootstrap 4
Offcanvas menu
Our services
Pagination - Bootstrap 4
Portfolio gallery
Pricing table
Products list
Profile card
Profile edition in tabs
Real estate listing
Receipt
Related articles
Related posts
Responsive timeline
Schedule event
Search - Bootstrap 4
Sidebar news
Similar tags
Staff section
Take five
Team list
Top news
Tree menu
Upcoming events
Vertical timeline

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net

About

Joomla

Quick links

Latest posts