Draft Link Marker
This adds a "DRAFT" marker on top of an article block link.
Utility
This helper container manually marks an article link as a draft, to warn readers that it is not published yet.
You will need to remove this manually when the article in question is published. I recommend limiting its use to, for example, WorldEmber pledges and similar ToDo lists.
Manufacturing
Where to insert it
This container surrounds an article block link.What to insert
The BBCode
There are two containers: One which provides the reference frame, and one which represents the "DRAFT" marker.[container:draft-link] [container:draft-flag]DRAFT[/container] [articleblock:799f8518-8e29-4fab-9bcd-47b878417ed9] [/container]
The CSS
Insert this into either your article or your global CSS.
.user-css .draft-link{
position:relative;
}
This prepares the coordinate system for placing the child elements.
.user-css .draft-link .draft-marker{
display:inline-block;
position:absolute;
z-index:2;
top:0px;
left:0px;
background: darkgray;
padding:10px 15px 15px 5px;
}
The parameter "position: absolute;", combined with "z-index: 2;" makes the marker hover on top of the parent container.
The position is set with "top" and "left".
Access & Availability
Grandmaster
Complexity
Containers, CSS
Discovery
idea during preparation of an overview article
Example
Variations
'tis not done
:root{
--inner-border-size: 5px;
}
.user-css .draft-marker{
top:var(--inner-border-size) ;
left:var(--inner-border-size) ;
width:calc(100% -
2*var(--inner-border-size)) ;
text-align:center;
}
show CSS
.user-css .draft-marker{
top:25%;
left:25%;
width:50%;
text-align:center;
border-radius: 100%;
border:5px solid red;
color:red;
background: transparent;
font-weight:800;
}
Comments