Je vous propose aujourd'hui un module ruban que j'ai spacifiquement écrit pour la template Protostar. N'utilisant pas cette template sur ce site, il ne fonctionne pas ici.
L'idée est de placer dans la coin gauche des pages un module qui affiche de manière diagonale, un texte. Ce texte est placé sur fond rouge mais vous pouvez changer tout le CSS fourni.
helper.php
<?php
class ModRibbon{
public static function showRuban($params){
$document = JFactory::getDocument()->addStyleSheet("modules/mod_ribbon/style.css");
$valeurruban = $params->get("valeurruban");
echo '<div class="ribbon ribbon-top-left">'.$params->get("valeurruban").'</div>';
}
}
?>mod_ribbon.php
<?php
defined('_JEXEC') or die;
require_once dirname(__FILE__).'/helper.php';
$hello = ModRibbon::showRuban($params);mod_ribbon.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="3.1.0" client="site" method="upgrade">
<name>Ruban</name>
<author>sebastien lhuillier</author>
<version>1.0.0</version>
<description>Module affichant un ribbon dans le coin haut gauche</description>
<files>
<filename>mod_ribbon.xml</filename>
<filename module = "mod_ribbon">mod_ribbon.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field name="valeurruban" type="text" default="" label="Texte à afficher" description="" size="10" required="1" />
</fieldset>
</fields>
</config>
</extension>
style.css
/* common */
.ribbon {
background-color: red;
color: white;
font-size: 20px;
transform: rotate(-45deg);
top: 50px;
position: fixed;
width: 300px;
left: -60px;
text-align: center;
padding-left: 15px;
padding-top:10px;
height:45px;
z-index:100000000; /*Plus c'est elevé, plus c'st au premier plan*/
}
.ribbon span {
position: absolute;
display: block;
width: 235px;
padding: 15px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font: 700 18px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
}
/* top left*/
.ribbon-top-left {
top: 60px;
left: -65px;
border-style:groove;
border-color:yellow;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
border-top-color: transparent;
border-left-color: transparent;
}
.ribbon-top-left::before {
top: 0;
right: 0;
}
.ribbon-top-left::after {
bottom: 0;
left: 0;
}
.ribbon-top-left span {
right: -25px;
top: 30px;
transform: rotate(-45deg);
}
/* top right*/
.ribbon-top-right {
top: -10px;
right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon-top-right::before {
top: 0;
left: 0;
}
.ribbon-top-right::after {
bottom: 0;
right: 0;
}
.ribbon-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}
/* bottom left*/
.ribbon-bottom-left {
bottom: -10px;
left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
border-bottom-color: transparent;
border-left-color: transparent;
}
.ribbon-bottom-left::before {
bottom: 0;
right: 0;
}
.ribbon-bottom-left::after {
top: 0;
left: 0;
}
.ribbon-bottom-left span {
right: -25px;
bottom: 30px;
transform: rotate(225deg);
}
/* bottom right*/
.ribbon-bottom-right {
bottom: -10px;
right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
border-bottom-color: transparent;
border-right-color: transparent;
}
.ribbon-bottom-right::before {
bottom: 0;
left: 0;
}
.ribbon-bottom-right::after {
top: 0;
right: 0;
}
.ribbon-bottom-right span {
left: -25px;
bottom: 30px;
transform: rotate(-225deg);
}
