Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
cornerribbon tile Plone
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:tal="http://xml.zope.org/namespaces/tal" xmlns:i18n="http://xml.zope.org/namespaces/i18n" i18n:domain="bda.aaf.site">
<head>
<style tal:condition="view/show">
/* The ribbons */
.corner-ribbon{
position: fixed;
top: 25px;
left: -50px;
width: 200px;
line-height: 28px;
background: purple;
box-shadow: 0 0 3px rgba(0,0,0,.3);
color: #f0f0f0;
letter-spacing: 1px;
text-align: center;
z-index: 20000;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* Different positions */
.corner-ribbon.top-left{
left: -50px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.top-right{
/* right: -50px; */
top: 0;
right: -85px;
left: auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* Colors */
.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: purple;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}
</style>
</head>
<body>
<div tal:condition="view/show" class="corner-ribbon top-right sticky ${view/color} shaddow">${view/text}</div>
</body>
</html>
# -*- coding: utf-8 -*-
from plone.tiles import Tile
import os
class CornerRibbonTile(Tile):
"""Configureable ribbon
"""
@property
def _tag(self):
return os.environ.get('STATUS', 'DEV')
def show(self):
return self._tag != 'live'
def text(self):
if self._tag == 'latest':
return 'RC'
return 'DEV'
def color(self):
if self._tag == 'latest':
return 'purple'
return 'orange'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.