Recent Posts

options
JCINK :: Button BG + Moving 'Posted:' written Jan 8, 2023 21:53:57 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
Unsure if this is still an open question, but it depends on the skin / changes that have already been implemented. Could you post any custom HTML you're using for the post rows? (From the admin control panel, click "Skins & Templates" > "HTML Templates" > "Edit" (on the row allocated to the skin you're working on) > "Edit" (on the "Post Row" row)
options
quote
where do you get design inspiration? written May 15, 2020 2:35:35 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
Hey there, have a few sites from my ever-growing collection of bookmarks that I tend to use as a springboard:

Also, if you're seeking inspiration for rp-forum-specific components but also want to divert a bit from common trends, French RP sites have some pretty imaginative aesthetics that I don't see much (or at all) on English ProBoards/JCink forums.
options
quote
Penguins in Spring written May 3, 2020 19:25:16 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
iii. thunderstorms / rainshowers [break]
so this app template is also not getting posted in the template board right away because I need to consolidate a whole lot of hard-coded colors to make it easilly editable 8')

[break]

[nospaces]
[attr="class","in-the-rain"]
[attr="class","texture"]
[attr="class","hues"]

[PTabbedContent][PTab=X]
[attr="class","covercontent"]

Raziel of the Autumn Court
Head merchant of the Golden Coast


Played by Iceguin



[/PTab][PTab=+]
[attr="class","appcontent"]

[attr="class","appimg"]

[b]LAST EXILE,[/b] Dio Eraclea @tag


[attr="class","summary"]

gender unidentified


age limitless


sexuality asexual


faction the autumn court


occupation appropriator of wealth




[attr="class","smaller approw"]

the person


[attr="class","smaller listbox"]


Positive Traits


trait 1

trait 2

trait 3


Negative Traits


trait 1

trait 2, but a bit longer

trait 3


Likes


trait 1

trait 2

trait 3


Dislikes


trait 1

trait 2

trait 3



[attr="class","freeform"]

Personality



mercilessempathetic


ineptcapable


untrustworthyloyal



A certain king had a beautiful garden, and in the garden stood a tree which bore golden apples. These apples were always counted, and about the time when they began to grow ripe it was found that every night one of them was gone. The king became very angry at this, and ordered the gardener to keep watch all night under the tree. The gardener set his eldest son to watch; but about twelve o’clock he fell asleep, and in the morning another of the apples was missing.



[attr="class","approw"]

their story


[attr="class","freeform"]

The Watch

Then the second son was ordered to watch; and at midnight he too fell asleep, and in the morning another apple was gone. Then the third son offered to keep watch; but the gardener at first would not let him, for fear some harm should come to him: however, at last he consented, and the young man laid himself under the tree to watch.

The Thief

As the clock struck twelve he heard a rustling noise in the air, and a bird came flying that was of pure gold; and as it was snapping at one of the apples with its beak, the gardener’s son jumped up and shot an arrow at it. But the arrow did the bird no harm; only it dropped a golden feather from its tail, and then flew away. The golden feather was brought to the king in the morning, and all the council was called together. Everyone agreed that it was worth more than all the wealth of the kingdom: but the king said, ‘One feather is of no use to me, I must have the whole bird.’




[/PTab][/PTabbedContent={tabs: side; tabvalign: top; tabgap: 0; }]


[newclass=".in-the-rain"]box-sizing: border-box; width: 450px; height: 562px; margin: auto; background: #0F2027; color: #f3f3f3; border: 1px solid rgb(15, 32, 39); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; font: 400 12px / 1.3em Jost, Arial, sans-serif;[/newclass]
[newclass=".in-the-rain h1, .in-the-rain h2, .in-the-rain h3, .in-the-rain h4, .in-the-rain h5, .in-the-rain h6"]margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;[/newclass]
[newclass=".in-the-rain *"]box-sizing: border-box;[/newclass]
[newclass=".in-the-rain .hues"]position:relative; display: flex; justify-content: center; align-items: center; z-index:0; height:100%; background: linear-gradient(340deg, rgba(15, 32, 39, 0.92), rgba(32, 58, 67, 0.92), rgba(44, 83, 100, 0.92));[/newclass]
[newclass=".in-the-rain .texture"]height:100%; background-image: url('https://i.imgur.com/SMUV4RR.jpg');[/newclass]
[newclass=".in-the-rain .covercontent"]position: relative; width: 200px; height: 250px; color: #f3f3f3; border: 1px solid #f3f3f3; padding: 16px; background-color: rgba(243, 243, 243,0.03); box-shadow: 2px 2px 3px rgba(15, 32, 39, 0.6), inset 2px 2px 3px rgba(15, 32, 39, 0.6); display: flex; justify-content: space-evenly; align-items: center; flex-direction: column;[/newclass]
[newclass=".in-the-rain .covercontent h1"]font: 500 28px / 0.85em Playfair Display, Times, serif; word-break: break-word; text-align: left; text-shadow: 1px 2px .06em rgb(15, 32, 39);[/newclass]
[newclass=".in-the-rain .covercontent h1 b"]display: block; margin-top: 12px; font: 400 10px / 1em Jost, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; width: 80%; opacity: 0.8;[/newclass]
[newclass=".in-the-rain .covercontent h1::after"]content: ''; display: block; position: absolute; left:20%; right: 20%; height: 2px; background-color: rgb(15, 32, 39); margin-top: 12px;[/newclass]
[newclass=".in-the-rain .covercontent h2"]font: 400 10px / 1em Jost, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; margin-left:20%; width: 80%; text-align: right; opacity: 0.8; text-shadow: 2px 2px 3px rgb(15, 32, 39);[/newclass]

[newclass=".in-the-rain .appcontent"]position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-evenly; padding: 20px; padding-top: 110px;[/newclass]
[newclass=".in-the-rain .appcontent .appimg"]border-radius: 100%; position: absolute; top: 10px; right: 10px; right: 40px; width: 100px; height: 100px; background-size: cover;[/newclass]
[newclass=".in-the-rain .appcontent .appimg::before, .in-the-rain .appcontent .appimg::after"]content: ''; display: block; position: absolute; border: 10px solid rgb(243, 243, 243); border-radius: 100%; pointer-events: none;[/newclass]
[newclass=".in-the-rain .appcontent .appimg::before"]top: -20px; bottom: -20px; left: -20px; right: -20px; border-width: 10px; opacity: 0.2;[/newclass]
[newclass=".in-the-rain .appcontent .appimg::after"]top: -80px; bottom: -80px; left: -80px; right: -80px; border-width: 30px; opacity: 0.1;[/newclass]
[newclass=".in-the-rain .appcontent .appimg > *"]display: block; border-radius: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; font: 400 10px / 1em Jost, Arial, sans-serif !important; padding: 10px; background-color: rgba(15, 32, 39, 0.82); opacity: 0;[/newclass]
[newclass=".in-the-rain .appcontent .appimg > *:hover"]opacity: 1;[/newclass]
[newclass=".in-the-rain .appcontent .summary"]margin-top: 20px; display: flex; justify-content: space-evenly; align-items: center; right: 130px; position: absolute; left: 0; top: 0; flex-wrap: wrap; padding: 0px 20px; height: 70px;[/newclass]
[newclass=".in-the-rain .appcontent .summary h3"]text-align: center; flex-basis: 26%; flex-grow: 1; margin-top: 7px; line-height: 1em;[/newclass]
[newclass=".in-the-rain .appcontent .summary h3 b"]display: block; font: 700 10px / 1em Jost, Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px;[/newclass]
[newclass=".in-the-rain .appcontent .approw"]display: flex; flex-grow: 3; margin-top: 10px;[/newclass]
[newclass=".in-the-rain .appcontent .approw > *"]margin-left: 10px;[/newclass]
[newclass=".in-the-rain .appcontent .approw > *:first-child"]margin-left: 0px;[/newclass]
[newclass=".in-the-rain .appcontent .approw > div"]background-color: rgba(32, 58, 67, 0.6); flex-grow: 3; position: relative; font-family: Open Sans, Arial, sans-serif; font-size: 11px; line-height: 1.2em;[/newclass]
[newclass=".in-the-rain .appcontent .approw > div > div"]position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 15px; overflow-y: auto; text-align: justify; scrollbar-color: rgba(243, 243, 243,0.2) transparent; scrollbar-width: thin;[/newclass]
[newclass=".in-the-rain .appcontent .approw > div > div::-webkit-scrollbar"]width: 6px; border: none; background-color: transparent;[/newclass]
[newclass=".in-the-rain .appcontent .approw > div > div::-webkit-scrollbar-track"]background: transparent;[/newclass]
[newclass=".in-the-rain .appcontent .approw > div > div::-webkit-scrollbar-thumb"]background-color: rgba(243, 243, 243,0.2); border-radius: 20px;[/newclass]
[newclass=".in-the-rain .appcontent .approw > div > div::after"]content: ''; display: block; height: 15px;[/newclass]
[newclass=".in-the-rain .appcontent .approw > h1"]width: 35px; position: relative; border-right: 2px solid rgb(15, 32, 39);[/newclass]
[newclass=".in-the-rain .appcontent .approw > h1 b"]transform: rotate(-90deg); transform: rotate(-90deg); display: block; position: absolute; bottom: 15px; left: 25px; transform-origin: bottom left; white-space: nowrap; font: 400 12px / 1em Jost, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6;[/newclass]
[newclass=".in-the-rain .smaller"]flex-grow: 2!important;[/newclass]
[newclass=".in-the-rain .approw h2"]font: 700 10px / 1em Jost, Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #85a2a7; padding: 5px;[/newclass]
[newclass=".in-the-rain .approw h2:first-child"]padding-top: 0;[/newclass]
[newclass=".in-the-rain .approw h4]position: relative; border-bottom: 4px solid rgba(15, 32, 39); display: flex; justify-content: space-between; margin-bottom: 5px;[/newclass]
[newclass=".in-the-rain .approw h4 b"]display: inline-block; font: 400 10px / 1em Jost, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; text-align: right;[/newclass]
[newclass=".in-the-rain .approw h4 > div"]position: absolute; display: block; left: 0; bottom: -4px; height: 4px; background-color: #f3f3f3;[/newclass]
[newclass=".in-the-rain .approw h6]margin-bottom: 2px;[/newclass]
[newclass=".in-the-rain .approw h6::before]content: '+'; color: #85a2a7; font-weight: 700; margin-right: 3px;[/newclass]
[newclass=".in-the-rain hr"]border: none; border-bottom: 2px solid rgb(15, 32, 39); width: 40%; margin: 10px auto 5px auto;[/newclass]

[newclass=".in-the-rain .PT_Tabs_holder i"]position: absolute; top: 0; right: 0; z-index: 1; font-style: normal; width: 30px; line-height: 30px; text-align: center; font-weight: bold; font-size: 10px; border-radius: 4px; margin: 3px; background-color: rgb(32, 58, 67);[/newclass]
[newclass=".in-the-rain .PT_Tabs_holder b"]position: absolute; right: 100px; top: 250px; height: 50px; width: 50px; border-radius: 100%; background: #f3f3f3; color: rgb(32, 58, 67); text-align:center; box-shadow: 1px 1px 5px 0 rgba(15, 32, 39, 0.25); z-index: 1; transition: 0.4s transform;[/newclass]
[newclass=".in-the-rain .PT_tabs b:hover, .in-the-rain .PT_tabs_hover b:hover"]cursor: pointer; transform: rotate(90deg);[/newclass]
[newclass=".in-the-rain .PT_tabs b::after, .in-the-rain .PT_tabs_hover b::after"]content: ""; opacity: 0; position: absolute; top: 0px; left: 0px; right: 0; bottom: 0; border: 4px solid rgba(243, 243, 243, 0.6); border-radius: 100%; animation-name: ripple; animation-duration: 3s; animation-delay: 0s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); z-index: -1;[/newclass]
[newclass=".in-the-rain .PT_tabs b::before, .in-the-rain .PT_tabs_hover b::before"]opacity: 0; position: absolute; top: 0px; left: 0px; right: 0; bottom: 0; content: ""; border: 4px solid rgba(243, 243, 243, 0.3); border-radius: 100%; animation-name: ripple; animation-duration: 3s; animation-delay: 0.6s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); z-index: -1;[/newclass]
[newclass="nullelem"]} @keyframes ripple { from { opacity: 1; transform: scale3d(0.9, .9, 1); } to { opacity: 0; transform: scale3d(1.6, 1.6, 1); } [/newclass]

[newclass=".in-the-rain .PT_spots"]background-color: transparent; z-index: -1; display: flex!important; justify-content: center; align-items: center; position: absolute!important; top: 0px; left: 0px; bottom: 0px; right: 0px; transition: 0.6s all ease 0s;[/newclass]
[newclass="nullelem"]} .in-the-rain td[class^="PT_tabs"] { font: 400 30px / 46px Jost, Arial, sans-serif; text-transform: uppercase; transition: 0.4s all; cursor: pointer; } .in-the-rain td[class^="PT_tabs"] *, .in-the-rain div[class^="PT_spots"] * { transition: 0.6s all ease 0s; } .in-the-rain td[class*="PT_tabs_selected"] { opacity: 0; pointer-events: none; cursor: auto; } .in-the-rain div.PT_spots[style*="none"] { opacity: 0; pointer-events: none; left: -450px!important; right: 450px!important;[/newclass]
[newclass=".in-the-rain table.PT_table"]border: none;[/newclass]
[newclass=".in-the-rain .PT_table > tbody > tr > td:first-of-type"]width:0px !important;[/newclass]
[newclass=".in-the-rain table.PT_table tbody td"]padding: 0px;[/newclass]


[googlefont=Jost:400,700|Playfair+Display:500|Open+Sans:400,700]
last edit on May 3, 2020 22:18:57 GMT by iceguin
options
quote
Penguins in Spring written May 1, 2020 2:33:28 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
ii. birds and/or flowers [break]
the official template post for this bestiary is a w.i.p. as I work out some of the details on this code-monster



[nospaces][break]
[attr="class","bestiarywrap"]
[attr="class","bestiary"]
[attr="class","sidebanner"]

[attr="class","listreveal"]

[PTabbedContent]

[PTab=Avion]
[attr="class","creaturecontent"]

[attr="class","quote"]It casts a colossal shadow across a misty lake... as it soars through the sky...To reach it is no easy task...

Avion


the fifth colossus


[attr="class","imgoverlay"]
[attr="class","bottomright caption"]fig 01. a wanderer's sketch of Avion's lair


[break]Avion is directly east of the shrine, as the sword indicates. Just head east as the cliffside path becomes narrow. When it widens again, the colossus' lair is close.
[attr="class","imgoverlay"]
[attr="class","bottomleft caption"]fig 02. An illustration of the weakpoints of Avion, on the tips of both its wings and the end of its tail.



[/PTab]


[PTab=Boobrie]
[attr="class","creaturecontent"]

Boobrie


shapeshifter of Scottish folklore



[break]A giant, ferocious bird that lives near the water's edge and mercilessly devours any who approach. It's rumoured to transform into a horse and gallop across the water.

[/PTab]


[PTab=Chocobo]

[attr="class","creaturecontent"]

Chocobo




A breed of flightless birds, characterized by their yellow feathers, distinct odor, and the unforgettable chirp, "kweh!" Domesticated for their gentle nature and quick feet, they are often used as a mode of ground transportation.
[break][break]
What creature, fair or foul, has affected the lives of the common man more than the noble chocobo? Though the yellow chocobo is by far the most common, and the only domesticable sort, many other wild breeds of differing hues have been identified. In general, the other colorations of chocobo tend to be quite violent, giving rise to the saying: "Yellow, best for riding; aught else, best be hiding."
[break][break]
Even as tame chocobos are known for their temper, true domestication requires time and expertise. Their curiosity can often get them into trouble, but they are charming nevertheless, and popular throughout Ivalice. As famed naturalist Merlose once wrote: "a little personality goeth a long way."



[/PTab]


[PTab=Eagle]
[attr="class","creaturecontent"]

Eagle




[break]Eagles are large birds of prey primarily found across the globe and are classified under the bird family Accipitridae.
[break][break]
Eagles play an important role to the Assassin Brotherhood, in that many of the Order's outfits and weapons bear resemblance to eagles in their details, and the birds tend to perch on the Viewpoints which the Assassins use to navigate their surroundings and perform Leaps of Faith from. In this regard, the Assassins dubbed the sixth sense that belonged to some of their members as "Eagle Vision".

[/PTab]


[PTab=Flut Flut]
[attr="class","creaturecontent"]

Flut Flut




[break]The flut flut is a rather large bird, somewhat resembling, in shape, to an ostrich, and its later Jak 3 equivalent, the leaper lizard. It has a round head, two very large eyes, a combination of both a beak and a mouth, two relatively small feathered arms used for gliding, hooved feet, and a long bony tail with a prominent, vibrant tail fan.
[break][break]
The flut flut has two main attacks, a charge attack where it will headbutt forward, and an aerial attack, where while air-borne, will charge down with its claws releasing a purple-colored cloud.
[break][break]
Due to the flut flut's large legs, it has incredible jumping power, coupled with its wings which it uses for gliding long distances.

[/PTab]


[PTab=Giant Crow]
[attr="class","creaturecontent"]


[break]

Giant Crow


The Giant Crow is a mysterious entity that transports the Chosen Undead from the end of the Undead Asylum to Firelink Shrine in Lordran.

[/PTab]


[PTab=Griffin]
[attr="class","creaturecontent"]

The griffin looks like a combination of a ferocious cat and a giant bird. It usually inhabits primeval highlands and builds its nests on unreachable mountain summits. The griffin preys on large mammals and, being a highly territorial creature, fiercely defends its hunting grounds. When the first colonists appeared and trade routes expanded, griffins were known to attack settlers and merchants in defense of their territory. Griffins are tough opponents and their strength should not be underestimated. Obstinate and aggressive, they make deadly use of their ability to fly during combat, swooping down on their enemies, knocking them to the ground and ripping them to shreds with their claws and beak.
[break]

[/PTab]


[PTab=The Hierophant]
[attr="class","creaturecontent"]

[break][break]
[attr="class","quote"]
Transcendence faith immortality / in mortality
[break]Rifts crafted, dangerous potential
[break]A foundation for faith & violence
[break]A loss of self, a narrow path traveled
[break]--Extracts from the Monoliths



[/PTab]


[PTab=Sand Vulture]
[attr="class","creaturecontent"]

Sand Vulture


The bird cage of Azad was famed throughout Persia, often described as one of the wonders of the world. However, not even the Sultan's cherished bird collection escaped transformation by the Sands of Time.
[break]

[/PTab]

[PTab=The Shrieker]
[attr="class","creaturecontent"]



Deep within the heart of the Weald stands a gigantic tree that towers above all other trees, and hidden within the gnarled and twisted branches of this tree is the Shrieker's Nest. Like the Noble Raven depicted on our family’s Coat of Arms, this poor creature has seen better days, for the corruption that plagues the estate has twisted this feathered bird into a feathered fiend. Despite being corrupted, this feathered fiend is still a Raven at heart and has an eye for everything that glitters and shines. The Nest of the Shrieker is decorated with all the shiny and glittering Trinkets it has stolen from our Trinkets Chest or taken from the dead bodies of our fallen heroes. Reclaiming these items will not be easy, for the Shrieker will defend its Nest from any intruders. But if Shrieker feels that it is not worth its life to protect his hoard of treasures, it will abandon its nest and escape to live another day, free to steal more of our rare and valuable Trinkets.

[/PTab]


[PTab=Suzaku]
[attr="class","creaturecontent"]

Suzaku



The Zhu Que (朱雀) Vermilion Bird is one of the Four Symbols of the Chinese constellations (Si Xiang) along with White Tiger, Xuanwu and Azure Dragon. According to Wu Xing, the Taoist five-elemental system, it represents the fire element, the direction south and the season summer correspondingly. Thus, it is sometimes called the Vermilion Bird of the South and it is also known as Suzaku in Japan and Jujak in Korea. Occasionally confused with Feng Huang, although this confusion does make some sense when one is aware that non-Han variations of the Four Symbols consider the Feng Huang and the Suzaku as the same creature. Suzaku is an elegant and noble bird in both appearance and behavior, it is very selective in what it eats and where it perches, with its feathers in many different hues of Vermilion.

[/PTab]


[/PTabbedContent={tabs: side; tabvalign: top; tabgap: 0; }]



[newclass=".bestiary h1, .bestiary h2, .bestiary h3, .bestiary h4, .bestiary h5, .bestiary h6"]margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;[/newclass]
[newclass=".bestiary"]height: 430px; position: relative; background-color: #F5E8DA; color: #3D302D; overflow: hidden; border: 1px solid #3D302D; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;[/newclass]
[newclass=".bestiarywrap"]display: block; margin: auto; width: 550px; position: relative; background-color: #BD8B75; padding: 4px; border: 1px solid #3D302D;[/newclass]
[newclass=".bestiary *"]box-sizing: border-box;[/newclass]
[newclass=".bestiary .sidebanner"]position: absolute; z-index: 3; top: 0px; bottom: 0px; left: 0px; width: 120px; background-image: url('https://i.imgur.com/c7pzeOw.png'); background-size: cover; background-position: center; border-right: 5px solid #BD8B75;[/newclass]
[newclass=".bestiary .sidebanner::before"]content: ''; background-color: #EB9249; opacity: 0.4; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;[/newclass]
[newclass=".bestiary .sidebanner::after"]content: ''; position: absolute; display: block; top: 10px; left: 10px; bottom: 10px; right: -5px; border: 2px dotted #F5E8DA; border-right-width: 0px;[/newclass]
[newclass=".bestiary h1"]font: bold 28px / 18px Crimson Text, Times, serif; text-align:left; z-index:1; font-variant: small-caps; text-align: right; opacity: 0.93;[/newclass]
[newclass=".bestiary h2"]font: 10px Montserrat, Arial, sans-serif; text-transform: uppercase; text-align: right; opacity: 0.6; letter-spacing: 0.5px;[/newclass]
[newclass=".bestiary .creaturecontent"]position: absolute; top: 0px; bottom: 0px; right: 0px; width: 100%; padding: 20px; overflow-y: auto; font: 12px / 1.4em Open Sans, Arial, sans-serif; text-align: justify; scrollbar-width: thin; scrollbar-color: #BD8B75 transparent;[/newclass]
[newclass=".bestiary .creaturecontent::after"]content: '';display: block;height: 15px;[/newclass]
[newclass=".bestiary .listreveal"]position: absolute; z-index: 4; transform: rotate(-45deg); transform-origin: 50% 50%; background-color: #BD8B75; width: 30px; height: 30px; border-radius: 4px; border: 2px solid #F5E8DA; left: 105px; top: 20%; color: #F5E8DA;[/newclass]
[newclass=".bestiary .listreveal::before"]content: '+'; display:block; transform: rotate(45deg); transform-origin: 50% 50%; font: bold 26px / 28px Montserrat, Arial, sans-serif; line-height: 28px; text-align: center;[/newclass]
[newclass=".bestiary .creaturecontent b img"]box-shadow: 1px 2px 4px #3D302D;[/newclass]
[newclass="table.PT_table"]border: none;[/newclass]
[newclass=".bestiary .listreveal + table .PT_Tabs_holder"]position: absolute; width: 430px !important; top: 0; bottom: 0; right: 430px; transition: 0.4s all; margin: 0px; opacity: 0.8; z-index: 2; display: block; overflow-y: auto; background-color: #F5E8DA; scrollbar-width: thin; scrollbar-color: #BD8B75 transparent;[/newclass]
[newclass=".bestiary .listreveal:hover + table .PT_Tabs_holder, .PT_Tabs_holder:hover"]opacity: 1!important; right: 0px!important;[/newclass]
[newclass=".bestiary .PT_spots"]position: absolute !important; z-index: 1; top: 0px; left: 120px; right: 0px; bottom: 0px; background-color: transparent;[/newclass]

[newclass=".bestiary .quote"]quotes: '\201c' '\201d'; position: relative; font-family: Crimson Text; font-style: italic; font-size: 18px; line-height: 1em; width: 80%; margin: auto; text-indent: 25px; text-align: left;[/newclass]
[newclass=".bestiary .quote::before"]content: open-quote; top: 0px; left: -5px; position: absolute; font-size: 80px; line-height: 40px; display: block; color: #fff; z-index: -1; font-style: normal;[/newclass]
[newclass=".bestiary .caption"]font: 10px Open Sans, Arial, sans-serif; letter-spacing: 0.5px;[/newclass]
[newclass=".bestiary .caption i"]font: italic bold 1.4em Crimson Text, Times, serif;[/newclass]

[newclass=".bestiary .imgoverlay"]position:relative; line-height: 0;[/newclass]
[newclass=".bestiary .bottomright"]position: absolute; bottom: 5px; right: 5px; text-align: right;[/newclass]
[newclass=".bestiary .bottomleft"]position: absolute; bottom: 5px; left: 5px; text-align: left;[/newclass]
[newclass=".bestiary .topright"]position: absolute; top: 5px; right: 5px; text-align: right;[/newclass]
[newclass=".bestiary .topleft"]position: absolute; top: 5px; left: 5px; text-align: left;[/newclass]

[newclass="nullelem"]} .bestiary td[class^="PT_tabs"] { font: 18px / 28px Crimson Text, Times, serif; text-transform: uppercase; transition: 0.4s all; cursor: pointer; [/newclass]
[newclass=".bestiary .PT_tabs_selected"]background-color: transparent; opacity: 0.6;[/newclass]
[newclass=".bestiary .PT_tabs_selected_hover"]background-color: #BD8B75;[/newclass]
[newclass=".bestiary .PT_tabs_hover"]background-color: #BD8B75;[/newclass]
[newclass=".bestiary .PT_Tabs_holder"]counter-reset: best-numerals;[/newclass]
[newclass=".bestiary .PT_Tabs_holder td"]counter-increment: best-numerals; width: 430px; text-align: left; padding: 4px 30px !important[/newclass]
[newclass=".bestiary .PT_Tabs_holder td::before"]content: counter(best-numerals, upper-roman); display: inline-block; border: 2px solid; min-width: 28px; text-align: center; margin-right: 5px;[/newclass]


[newclass=".bestiary .creaturecontent::-webkit-scrollbar, .PT_Tabs_holder::-webkit-scrollbar"]width: 10px; border: none; background-color: transparent;[/newclass]
[newclass=".bestiary .creaturecontent::-webkit-scrollbar-track, .PT_Tabs_holder::-webkit-scrollbar-track"]background: transparent;[/newclass]
[newclass=".bestiary .creaturecontent::-webkit-scrollbar-thumb, .PT_Tabs_holder::-webkit-scrollbar-thumb"]background-color: #BD8B75; border-radius: 20px; border: 2px solid #F5E8DA;[/newclass]

[googlefont=Crimson+Text:400,400italic,700,700italic|Montserrat|Open+Sans:400,700]
last edit on Sept 4, 2023 18:47:47 GMT by iceguin
options
quote
Penguins in Spring written Apr 5, 2020 19:36:33 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
i. old friends [break]
( link to template )



[nospaces][googlefont=Special+Elite|Quicksand:400,700]
[attr="class","polaroid_memories"]

[attr="class","polaroid"]
[attr="class","name"]
The Optimist
[attr="class","detail"]

[attr="class","summary"]
gender Female

group Orphan

face Emma

alignment LG


Summary I don't know whether you have ever seen a map of a person's mind. Doctors sometimes draw maps of other parts of you, and your own map can become intensely interesting, but catch them trying to draw a map of a child's mind, which is not only confused, but keeps going round all the time.
[break][break]
History There are zigzag lines on it, just like your temperature on a card, and these are probably roads in the island, for the Neverland is always more or less an island, with astonishing splashes of colour here and there, and coral reefs and rakish-looking craft in the offing, and savages and lonely lairs, and gnomes who are mostly tailors, and caves through which a river runs, and princes with six elder brothers, and a hut fast going to decay, and one very small old lady with a hooked nose.
[break][break]


[attr="class","polaroid"]
[attr="class","name"]
The Pragmatist
[attr="class","detail"]

[break][break]
Status: reserved

[break]Summary It would be an easy map if that were all, but there is also first day at school, religion, fathers, the round pond, needle-work, murders, hangings, verbs that take the dative, chocolate pudding day, getting into braces, say ninety-nine, three-pence for pulling out your tooth yourself, and so on, and either these are part of the island or they are another map showing through, and it is all rather confusing, especially as nothing will stand still.
[attr="class","summary"]
gender Male

group Orphan

face Ray

alignment CN




[attr="class","polaroid"]
[attr="class","name"]
The Level Head & Bleeding Heart
[attr="class","detail"]

[attr="class","summary"]
gender Male

group Orphan

face Norman

alignment NG


Status: open!

[break]Summary Of course the Neverlands vary a good deal. John's, for instance, had a lagoon with flamingoes flying over it at which John was shooting, while Michael, who was very small, had a flamingo with lagoons flying over it.
[break][break]
History John lived in a boat turned upside down on the sands, Michael in a wigwam, Wendy in a house of leaves deftly sewn together. John had no friends, Michael had friends at night, Wendy had a pet wolf forsaken by its parents, but on the whole the Neverlands have a family resemblance, and if they stood still in a row you could say of them that they have each other's nose, and so forth.
[break][break]




[newclass=".polaroid_memories"]width: 370px; text-align: center; margin: auto; margin-bottom: 50px; margin-top: 30px;[/newclass]
[newclass=".polaroid"]background: #fff; padding: 1em; padding-bottom: 60px; -webkit-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .3); -moz-box-shadow: 0 0.2em 0.3em rgba(0,0,0,.3); box-shadow: 0 0.2em 0.3em rgba(0,0,0,.3); transition: all 0.35s; width: 80%; margin-left: 20%; margin-bottom: -70px; overflow: hidden; transform: scale(0.8, 0.8) rotate(-2deg);[/newclass]
[newclass=".polaroid > .detail"]position: relative;[/newclass]
[newclass=".polaroid > .detail > img"]max-width: 100%; height: auto;[/newclass]
[newclass=".polaroid > .detail > div"]position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; background: rgba(33,33,33,0.8); color: #fff; font: 12px / 14px Quicksand, Calibri, Arial, sans-serif; text-align: justify; z-index: 1; padding: 0rem 1rem 1rem 1rem; opacity: 0; transition: all 0.35s; transition-delay: 0s; scrollbar-color: rgba(255,255,255,0.5) transparent; scrollbar-width: thin;[/newclass]
[newclass=".polaroid:hover > .detail > div"]opacity: 1; transition-delay: 1s;[/newclass]
[newclass=".polaroid:nth-of-type(2n+1)"]margin-left: 0%; transform: scale(0.8, 0.8) rotate(6deg);[/newclass]
[newclass=".polaroid:nth-of-type(2n+3)"]transform: scale(0.8, 0.8) rotate(2deg);[/newclass]
[newclass=".polaroid:nth-of-type(2n+4)"]transform: scale(0.8, 0.8) rotate(-5deg);[/newclass]
[newclass=".polaroid:hover"]filter: none; transform: scale(1, 1) rotate(0deg); -webkit-box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, .3); -moz-box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,.3); box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,.3); margin-bottom: -15px;[/newclass]
[newclass=".polaroid > .name"]color:#212121; font: 26px / 0.8em Special Elite, Courier New, Courier, serif; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 55px; text-align: center; display: flex; justify-content: center; align-items: center;[/newclass]
[newclass=".detail .summary"]display: flex; justify-content: space-evenly; align-items: center[/newclass]
[newclass=".detail .summary h6"]font-size: 10px; text-align: center; font-weight: normal; margin: 20px 0px; flex-grow: 1; flex-basis: 1rem;[/newclass]
[newclass=".detail .summary h6 b"]display: block; text-transform: uppercase; font-size: 8px; letter-spacing: 1px;[/newclass]
[newclass=".detail > div > b"]display: inline-block; text-transform: uppercase; font-size: 8px; line-height: 8px; padding: 5px; letter-spacing: 1px; border: 2px solid; float: left; margin-right: 5px; clear: both; margin-top: 3px;[/newclass]
[newclass=".detail > div > h5"]text-transform: uppercase; font-size: 10px; text-align: center; margin: 0; margin-bottom: 3px; line-height: 14px; position: relative; vertical-align: middle;[/newclass]
[newclass=".detail > div > h5:before, .detail > div > h5:after"]content: ''; display: inline-block; border: 2px solid; width: 3px; height: 14px; margin-top: -1px; vertical-align: middle;[/newclass]
[newclass=".detail > div > h5:before"]border-right-width: 0px; margin-right: 10px;[/newclass]
[newclass=".detail > div > h5:after"]border-left-width: 0px; margin-left: 10px;[/newclass]
[newclass="::-webkit-scrollbar"]width: 7px; background: transparent;[/newclass]
[newclass="::-webkit-scrollbar-thumb"]background: rgba(255,255,255,0.5);[/newclass]
last edit on Apr 5, 2020 19:36:59 GMT by iceguin
options
quote
Penguins in Spring written Apr 5, 2020 19:19:23 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
[newclass=.ppBarBG]--ppBarAccent:#485f91;--ppBarProgress:30%;[/newclass]

[nospaces]
[attr="class","ppBarBG"]
[attr="class","ppBarHead"]

Iceguin

[attr="class","ppProgBar"]



[attr="class","ppBarBG"]
  1. Old Friends
  2. Birds and/or Flowers
  3. Thunderstorms / Rainshowers
  4. Rebirth
  5. Desserts
  6. Quiet or Loud
  7. Friendly Faces
  8. Strength
  9. Memories
  10. Hope



[newclass=".ppBarBG li i"]opacity: 0.5[/newclass]
[newclass=".ppBarBG ol"]text-align: left; list-style-type: upper-roman; margin: 10px 70px[/newclass]
last edit on May 3, 2020 19:19:50 GMT by iceguin
options
What Am I Breaking? (Newclass/Table Spacing?) written Apr 5, 2020 0:26:40 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
Try adding this to your code:
[newclass=table]border-collapse: separate; table-layout: auto; width:auto!important;[/newclass]

ProBoards bakes in some extra HTML to their sites that specifically influences tables, unfortunately ;u;
options
bbcode converter written Jan 14, 2020 0:29:34 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
tbqh I was already a few minutes into my attempt at compiling a list of tags that PB doesn't support before you reminded me that people can just... name tags whatever the heck they want. Thank you for saving both my time & my sanity ;o;

This is (hopefully) the complete list of HTML tags that PB does support (with the Style Tags plugin), if anyone wants to suggest changes:
["a", "b", "big", "blockquote", "br", "center", "code", "div", "em", "font", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "marquee", "ol", "p", "pre", "s", "span", "strike", "strong", "sub", "sup", "table", "tbody", "td", "th", "tr", "u", "ul"]

now I really want to check if any of those selectors will work if they're tossed in the body of a newclass tag (like how keyframes have to be formatted)... And thank you for volunteering! ;u; I'll likely message you today or tomorrow with a link, though there's still some changes I'd like to make (tabs not being among them, alas -- there's just way too many ways to implement them in HTML) it's still functional for most things I've put through it.
options
bbcode converter written Jan 11, 2020 17:38:57 GMT via mobile
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
I made a web app that people can use to convert their HTML/CSS templates into ProBoards-compatible BBCode, but I'd like to finish up the error handling and have a few testers check it out before releasing it to the general public.

So! I'm looking for:
1) Issues that people run into when using BBCode (what sorts of things just don't work? What tags or styles does PB rudely remove? What needs to be coded wierdly, like keyframes?)
2) Does anyone know if PB has a documented list of which styles / html elements they allow vs which ones they remove?
3) Some volunteer testers who are willing to toss a bunch of html templates into the converter and check that the resulting BBCode works as expected.

(Also, if Staff thinks this thread should be better located elsewhere, feel free to move it!)
options
quote
08. a-b-c-'s of code written Aug 4, 2019 3:52:13 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
[nospaces][googlefont="Barlow|Unica+One"]
[attr="class","harmonious"]
[attr="class","glitch"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]


[attr="class","albumoverlay"](Art by Rafaarseb)


[attr="class","rightpannel"]

ABCs of Code




  1. Becoming Harmonious
    [attr="class","artist"]by the glitch mob

    Harmonious - a music template

  2. Hearts are Open Graves
    [attr="class","artist"]by elysian fields

    Open Graves - a posting template

  3. Xanadu
    [attr="class","artist"]by rush

    [Coming soon] - a map template
❄


[newclass=.harmonious .album] background: url('https://i.imgur.com/WdB39VV.png') no-repeat 50% 0; [/newclass]

[newclass=.harmonious] position: relative; box-sizing: border-box; width: 100%; margin:auto; padding: 15px; color: #e2dad6; text-align:right; border-radius: 10px; -moz-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); -webkit-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); font: 14px / 14px Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; overflow:hidden; background-color: #2d2d2d;[/newclass]
[newclass=.harmonious .rightpannel] position: absolute; top: 0px; right: 0px; left: 270px; bottom: 0px; overflow: auto; [/newclass]
[newclass=.harmonious h1] margin: 0px; margin-top: 15px; margin-right: 15px; font: 20px / 20px Unica One, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; text-align: right; [/newclass]
[newclass=.harmonious ol] margin:0px; padding: 0px; margin-right: 7px; margin-left: 5px; counter-reset: songs; list-style-type: none; padding-bottom: 10px; [/newclass]
[newclass=.harmonious li] position: relative; padding: 11px 0px; counter-increment: songs; transition: all 0.5s; border-bottom: 1px solid rgba(226, 218, 214, 0.3); [/newclass]
[newclass=.harmonious li marquee] color: transparent; [/newclass]
[newclass=.harmonious li .artist, .harmonious li marquee] position: absolute; bottom: 0px; right: 0px; opacity: 0.7; font-size: 10px; text-transform: uppercase; transition: all 1s; [/newclass]
[newclass=.harmonious li:hover marquee] color: inherit; [/newclass]
[newclass=.harmonious li:hover .artist] color: transparent; [/newclass]
[newclass=.harmonious li::before] content: counter(songs); float:left; font-size: 10px; margin-right: 20px; [/newclass]
[newclass=.harmonious li a, .harmonious li b] position: relative; display: inline-block; max-width: 85%; font-family: Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; [/newclass]
[newclass=.harmonious a, .harmonious b] color: #ffa489; text-decoration: none; [/newclass]
[newclass=.harmonious li a:hover, .harmonious li b:hover] display:inline-block; animation-name: glitch-anim-text; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0.2s; [/newclass]
[newclass=.harmonious h1::after] content: ''; display: block; height: 2px; width: 60%; background-color: #ffa489; position: absolute; right: 0; [/newclass]
[newclass=.harmonious .glitch] position: relative; width: 250px; height: 250px; overflow: hidden; border-radius: 5px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay] opacity: 0; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(45, 45, 45, 0.7); text-align:center; padding-top: 200px; font-size: 10px; text-transform: uppercase; z-index: 5; transition: 1s all; color: #e2dad6;[/newclass]
[newclass=.harmonious .glitch .albumoverlay::before] content: ''; opacity: 0.8; display: block; border: 15px solid #ffa489; box-sizing: border-box; width: 150px; height: 150px; position: absolute; top: 50%; margin-top: -75px; left: 50%; margin-left: -75px; border-radius: 75px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay::after] content: ''; opacity: 0.8; display: block; box-sizing: border-box; width: 0; height: 0; border-top: 35px solid transparent; border-bottom: 35px solid transparent; border-left: 60px solid #ffa489; position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -25px; [/newclass]
[newclass=.harmonious .glitch:hover .albumoverlay] opacity: 1; [/newclass]
[newclass=.harmonious .album] position: absolute; width: calc(100% + 4px); height: calc(100% + 40px); background-color: transparent; background-size: cover; transform: translate3d(0,0,0); background-blend-mode: none; -moz-box-shadow: inset 0 0 25px #1e1e1e; -webkit-box-shadow: inset 0 0 25px #1e1e1e; box-shadow: inset 0 0 25px #1e1e1e; z-index: 4; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(2)] transform: translate3d(0, 2px, 0); animation: glitch-anim-1 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(3)] transform: translate3d(0, -2px, 0); animation: glitch-anim-2 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(4)] transform: translate3d(-20px, 0, 0) scale3d(-1,-1,1); animation: glitch-anim-3 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(5)] animation: glitch-anim-flash 1.5s steps(1,end) infinite; [/newclass]
[newclass=.harmonious .album:nth-child(3)] background-color: #af4563; background-blend-mode: multiply; [/newclass]
[newclass=.harmonious ::-webkit-scrollbar] width: 0px; [/newclass]
[newclass=.keyframehellscape] }@keyframes glitch-anim-1 { 0% { -webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); } 10% { -webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); } 20% { -webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); } 40% { -webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); } 50% { -webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); } 60% { -webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); } 80% { -webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); } 90% { -webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); } } @keyframes glitch-anim-2 { 0% { -webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); } 15% { -webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); } 22% { -webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); } 31% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); } 51% { -webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); } 63% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 76% { -webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); } 81% { -webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); } 94% { -webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); } 100% { -webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); } } @keyframes glitch-anim-3 { 0% { -webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); } 5% { -webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); } 10% { -webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); } 25% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 27% { -webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); } 33% { -webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);; clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%); } 37% { -webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);; clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%); } 40% { -webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); } 50% { -webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); } 53% { -webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); } 57% { -webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); } 60% { -webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); } 65% { -webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); } 73% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 80% { -webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); } } @keyframes glitch-anim-flash { 0% { opacity: 0.2; transform: translate3d(20px, 2px, 0); } 15%, 100% { opacity: 0; transform: translate3d(0,0,0); } } @keyframes glitch-anim-text { 0% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 9% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); } 10%, 100% { transform: translate3d(0,0,0) scale3d(1,1,1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } [/newclass]
last edit on Mar 27, 2020 3:25:37 GMT by iceguin
options
quote
missing end brackets written Aug 4, 2019 0:08:51 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar


This is just a test post -- the final template will be up... eventually, probably
[break][break]

rule i. Don't remove or alter the credit![break]
(That's it... That's the only rule.)
[break]
This was made to be a wanted ad, but can be used for anything really -- a multiplotter, site location descriptions, an addition to a character development thread -- go wild!

[break][break]The components of the description that's visible on hovering are meant to be mix-and-match, so there's a different order for each of the 3 sample images. The name beneath the image can be up to 2 lines, and there can be as many or few traits in the summary list as you feel like putting there!

[break][break]#212121 | #fff
[break]image 300px minimum width





[nospaces][break]
[attr="class","bestiarywrap"]
[attr="class","bestiary"]
[attr="class","sidebanner"]

[attr="class","listreveal"]

[PTabbedContent]

[PTab=Avion]
[attr="class","creaturecontent"]

[attr="class","quote"]It casts a colossal shadow across a misty lake... as it soars through the sky...To reach it is no easy task...

Avion


the fifth colossus


[attr="class","imgoverlay"]
[attr="class","bottomright caption"]fig 01. a wanderer's sketch of Avion's lair


[break]Avion is directly east of the shrine, as the sword indicates. Just head east as the cliffside path becomes narrow. When it widens again, the colossus' lair is close.
[attr="class","imgoverlay"]
[attr="class","bottomleft caption"]fig 02. An illustration of the weakpoints of Avion, on the tips of both its wings and the end of its tail.



[/PTab]


[PTab=Boobrie]
[attr="class","creaturecontent"]

Boobrie


shapeshifter of Scottish folklore



[break]A giant, ferocious bird that lives near the water's edge and mercilessly devours any who approach. It's rumoured to transform into a horse and gallop across the water.

[/PTab]


[PTab=Chocobo]

[attr="class","creaturecontent"]

Chocobo




A breed of flightless birds, characterized by their yellow feathers, distinct odor, and the unforgettable chirp, "kweh!" Domesticated for their gentle nature and quick feet, they are often used as a mode of ground transportation.
[break][break]
What creature, fair or foul, has affected the lives of the common man more than the noble chocobo? Though the yellow chocobo is by far the most common, and the only domesticable sort, many other wild breeds of differing hues have been identified. In general, the other colorations of chocobo tend to be quite violent, giving rise to the saying: "Yellow, best for riding; aught else, best be hiding."
[break][break]
Even as tame chocobos are known for their temper, true domestication requires time and expertise. Their curiosity can often get them into trouble, but they are charming nevertheless, and popular throughout Ivalice. As famed naturalist Merlose once wrote: "a little personality goeth a long way."



[/PTab]


[PTab=Eagle]
[attr="class","creaturecontent"]

Eagle




[break]Eagles are large birds of prey primarily found across the globe and are classified under the bird family Accipitridae.
[break][break]
Eagles play an important role to the Assassin Brotherhood, in that many of the Order's outfits and weapons bear resemblance to eagles in their details, and the birds tend to perch on the Viewpoints which the Assassins use to navigate their surroundings and perform Leaps of Faith from. In this regard, the Assassins dubbed the sixth sense that belonged to some of their members as "Eagle Vision".

[/PTab]


[PTab=Flut Flut]
[attr="class","creaturecontent"]

Flut Flut




[break]The flut flut is a rather large bird, somewhat resembling, in shape, to an ostrich, and its later Jak 3 equivalent, the leaper lizard. It has a round head, two very large eyes, a combination of both a beak and a mouth, two relatively small feathered arms used for gliding, hooved feet, and a long bony tail with a prominent, vibrant tail fan.
[break][break]
The flut flut has two main attacks, a charge attack where it will headbutt forward, and an aerial attack, where while air-borne, will charge down with its claws releasing a purple-colored cloud.
[break][break]
Due to the flut flut's large legs, it has incredible jumping power, coupled with its wings which it uses for gliding long distances.

[/PTab]


[PTab=Giant Crow]
[attr="class","creaturecontent"]

Giant Crow


The Giant Crow is a mysterious entity that transports the Chosen Undead from the end of the Undead Asylum to Firelink Shrine in Lordran.
[break]

[/PTab]


[PTab=Griffin]
[attr="class","creaturecontent"]

The griffin looks like a combination of a ferocious cat and a giant bird. It usually inhabits primeval highlands and builds its nests on unreachable mountain summits. The griffin preys on large mammals and, being a highly territorial creature, fiercely defends its hunting grounds. When the first colonists appeared and trade routes expanded, griffins were known to attack settlers and merchants in defense of their territory. Griffins are tough opponents and their strength should not be underestimated. Obstinate and aggressive, they make deadly use of their ability to fly during combat, swooping down on their enemies, knocking them to the ground and ripping them to shreds with their claws and beak.
[break]

[/PTab]


[PTab=The Hierophant]
[attr="class","creaturecontent"]

[break][break]
[attr="class","quote"]
Transcendence faith immortality / in mortality
[break]Rifts crafted, dangerous potential
[break]A foundation for faith & violence
[break]A loss of self, a narrow path traveled
[break]--Extracts from the Monoliths



[/PTab]


[PTab=Sand Vulture]
[attr="class","creaturecontent"]

Sand Vulture


The bird cage of Azad was famed throughout Persia, often described as one of the wonders of the world. However, not even the Sultan's cherished bird collection escaped transformation by the Sands of Time.
[break]

[/PTab]

[PTab=The Shrieker]
[attr="class","creaturecontent"]



Deep within the heart of the Weald stands a gigantic tree that towers above all other trees, and hidden within the gnarled and twisted branches of this tree is the Shrieker's Nest. Like the Noble Raven depicted on our family’s Coat of Arms, this poor creature has seen better days, for the corruption that plagues the estate has twisted this feathered bird into a feathered fiend. Despite being corrupted, this feathered fiend is still a Raven at heart and has an eye for everything that glitters and shines. The Nest of the Shrieker is decorated with all the shiny and glittering Trinkets it has stolen from our Trinkets Chest or taken from the dead bodies of our fallen heroes. Reclaiming these items will not be easy, for the Shrieker will defend its Nest from any intruders. But if Shrieker feels that it is not worth its life to protect his hoard of treasures, it will abandon its nest and escape to live another day, free to steal more of our rare and valuable Trinkets.

[/PTab]


[PTab=Suzaku]
[attr="class","creaturecontent"]

Suzaku



The Zhu Que (朱雀) Vermilion Bird is one of the Four Symbols of the Chinese constellations (Si Xiang) along with White Tiger, Xuanwu and Azure Dragon. According to Wu Xing, the Taoist five-elemental system, it represents the fire element, the direction south and the season summer correspondingly. Thus, it is sometimes called the Vermilion Bird of the South and it is also known as Suzaku in Japan and Jujak in Korea. Occasionally confused with Feng Huang, although this confusion does make some sense when one is aware that non-Han variations of the Four Symbols consider the Feng Huang and the Suzaku as the same creature. Suzaku is an elegant and noble bird in both appearance and behavior, it is very selective in what it eats and where it perches, with its feathers in many different hues of Vermilion.

[/PTab]


[/PTabbedContent={tabs: side; tabvalign: top; tabgap: 0; }]



[newclass=".bestiary h1, .bestiary h2, .bestiary h3, .bestiary h4, .bestiary h5, .bestiary h6"]margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;[/newclass]
[newclass=".bestiary"]height: 430px; position: relative; background-color: #F5E8DA; color: #3D302D; overflow: hidden; border: 1px solid #3D302D; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;[/newclass]
[newclass=".bestiarywrap"]display: block; margin: auto; width: 550px; position: relative; background-color: #BD8B75; padding: 4px; border: 1px solid #3D302D;[/newclass]
[newclass=".bestiary *"]box-sizing: border-box;[/newclass]
[newclass=".bestiary .sidebanner"]position: absolute; z-index: 3; top: 0px; bottom: 0px; left: 0px; width: 120px; background-image: url('https://i.imgur.com/c7pzeOw.png'); background-size: cover; background-position: center; border-right: 5px solid #BD8B75;[/newclass]
[newclass=".bestiary .sidebanner::before"]content: ''; background-color: #EB9249; opacity: 0.4; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;[/newclass]
[newclass=".sidebanner::after"]content: ''; position: absolute; display: block; top: 10px; left: 10px; bottom: 10px; right: -5px; border: 2px dotted #F5E8DA; border-right-width: 0px;[/newclass]
[newclass=".bestiary h1"]font: bold 28px / 18px Crimson Text, Times, serif; text-align:left; z-index:1; font-variant: small-caps; text-align: right; opacity: 0.93;[/newclass]
[newclass=".bestiary h2"]font: 10px Montserrat, Arial, sans-serif; text-transform: uppercase; text-align: right; opacity: 0.6; letter-spacing: 0.5px;[/newclass]
[newclass=".bestiary .creaturecontent"]position: absolute; top: 0px; bottom: 0px; right: 0px; width: 100%; padding: 20px; overflow-y: auto; font: 12px / 1.4em Open Sans, Arial, sans-serif; text-align: justify; scrollbar-width: thin; scrollbar-color: #BD8B75 transparent;[/newclass]
[newclass=".bestiary .creaturecontent::after"]content: '';display: block;height: 15px;[/newclass]
[newclass=".bestiary .listreveal"]position: absolute; z-index: 4; transform: rotate(-45deg); transform-origin: 50% 50%; background-color: #BD8B75; width: 30px; height: 30px; border-radius: 4px; border: 2px solid #F5E8DA; left: 105px; top: 20%; color: #F5E8DA;[/newclass]
[newclass=".bestiary .listreveal::before"]content: '+'; display:block; transform: rotate(45deg); transform-origin: 50% 50%; font: bold 26px / 28px Montserrat, Arial, sans-serif; line-height: 28px; text-align: center;[/newclass]
[newclass=".creaturecontent b img"]box-shadow: 1px 2px 4px #3D302D;[/newclass]
[newclass="table.PT_table"]border: none;[/newclass]
[newclass=".listreveal + table .PT_Tabs_holder"]position: absolute; width: 430px !important; top: 0; bottom: 0; right: 430px; transition: 0.4s all; margin: 0px; opacity: 0.8; z-index: 2; display: block; overflow-y: auto; background-color: #F5E8DA; scrollbar-width: thin; scrollbar-color: #BD8B75 transparent;[/newclass]
[newclass=".listreveal:hover + table .PT_Tabs_holder, .PT_Tabs_holder:hover"]opacity: 1!important; right: 0px!important;[/newclass]
[newclass=".PT_spots"]position: absolute !important; z-index: 1; top: 0px; left: 120px; right: 0px; bottom: 0px; background-color: transparent;[/newclass]

[newclass=".quote"]quotes: '\201c' '\201d'; position: relative; font-family: Crimson Text; font-style: italic; font-size: 18px; line-height: 1em; width: 80%; margin: auto; text-indent: 25px; text-align: left;[/newclass]
[newclass=".quote::before"]content: open-quote; top: 0px; left: -5px; position: absolute; font-size: 80px; line-height: 40px; display: block; color: #fff; z-index: -1; font-style: normal;[/newclass]
[newclass=".caption"]font: 10px Open Sans, Arial, sans-serif; letter-spacing: 0.5px;[/newclass]
[newclass=".caption i"]font: italic bold 1.4em Crimson Text, Times, serif;[/newclass]

[newclass=".imgoverlay"]position:relative; line-height: 0;[/newclass]
[newclass=".bottomright"]position: absolute; bottom: 5px; right: 5px; text-align: right;[/newclass]
[newclass=".bottomleft"]position: absolute; bottom: 5px; left: 5px; text-align: left;[/newclass]
[newclass=".topright"]position: absolute; top: 5px; right: 5px; text-align: right;[/newclass]
[newclass=".topleft"]position: absolute; top: 5px; left: 5px; text-align: left;[/newclass]

[newclass="nullelem"]} td[class^="PT_tabs"] { font: 18px / 28px Crimson Text, Times, serif; text-transform: uppercase; transition: 0.4s all; cursor: pointer; [/newclass]
[newclass=".PT_tabs_selected"]background-color: transparent; opacity: 0.6;[/newclass]
[newclass=".PT_tabs_selected_hover"]background-color: #BD8B75;[/newclass]
[newclass=".PT_tabs_hover"]background-color: #BD8B75;[/newclass]
[newclass=".PT_Tabs_holder"]counter-reset: best-numerals;[/newclass]
[newclass=".PT_Tabs_holder td"]counter-increment: best-numerals; width: 430px; text-align: left; padding: 4px 30px !important[/newclass]
[newclass=".PT_Tabs_holder td::before"]content: counter(best-numerals, upper-roman); display: inline-block; border: 2px solid; min-width: 28px; text-align: center; margin-right: 5px;[/newclass]


[newclass=".bestiary .creaturecontent::-webkit-scrollbar, .PT_Tabs_holder::-webkit-scrollbar"]width: 10px; border: none; background-color: transparent;[/newclass]
[newclass=".bestiary .creaturecontent::-webkit-scrollbar-track, .PT_Tabs_holder::-webkit-scrollbar-track"]background: transparent;[/newclass]
[newclass=".bestiary .creaturecontent::-webkit-scrollbar-thumb, .PT_Tabs_holder::-webkit-scrollbar-thumb"]background-color: #BD8B75; border-radius: 20px; border: 2px solid #F5E8DA;[/newclass]

[googlefont=Crimson+Text:400,400italic,700,700italic|Montserrat|Open+Sans:400,700]



last edit on Oct 17, 2023 22:27:05 GMT by iceguin
options
quote
06. out with the old written Jul 21, 2018 1:47:29 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
Aah, yes, please enjoy this ancient artifact from the good 'ol days of pre-PBv4 2010. In the spirit of compatibility, the new version is presentable on mobile in in the PB Preview (albeit very bare bones).

[attr="class","prophets"]
[attr="class","head"]
[attr="class","icon smallpic"]
[attr="class","icon mainpic"]
[attr="class","icon smallpic"]
[attr="class","postbody"]
There are fragments of possessions
The moment Alice appeared, she was appealed to by all three to settle the question, and they repeated their arguments to her, though, as they all spoke at once, she found it very hard indeed to make out exactly what they said.

The executioner's argument was, that you couldn't cut off a head unless there was a body to cut it off from: that he had never had to do such a thing before, and he wasn't going to begin at his time of life. The King's argument was, that anything that had a head could be beheaded, and that you weren't to talk nonsense. The Queen's argument was, that if something wasn't done about it in less than no time she'd have everybody executed, all round. (It was this last remark that had made the whole party look so grave and anxious.)

Alice could think of nothing else to say but "It belongs to the Duchess: you'd better ask her about it."

"She's in prison," the Queen said to the executioner: "fetch her here." And the executioner went off like an arrow.

The Cat's head began fading away the moment he was gone, and, by the time he had come back with the Dutchess, it had entirely disappeared; so the King and the executioner ran wildly up and down looking for it, while the rest of the party went back to the game.
Shards of past relations Splintering my skin




____ ICON URL GOES HERE:
[newclass=.prophets .icon div] background: url('https://i.imgur.com/UWLwe9l.png') center / cover [/newclass]


____ COLORS!
[newclass=.prophets h6, .prophets .postbody b, .prophets a.user-link] color:slategrey!important [/newclass]
[newclass=.prophets .icon, .prophets .mainpic::before, .prophets .mainpic::after, .prophets h6, .prophets h6::before, .prophets .postbody] border-color:slategrey [/newclass]
[newclass=.prophets .head::after] background: rgba(119, 136, 153, 0.2); border: 1px solid rgba(119, 136, 153, 0.4) [/newclass]
[newclass=.prophets .postbody] outline: 8px solid rgba(119, 136, 153, 0.4) [/newclass]


[googlefont=Montserrat:400,700|Open+Sans:400,700]
[newclass=.prophets] position: relative; [/newclass][newclass=.prophets .head] text-align:center [/newclass]
[newclass=.prophets .head::after] content:''; display:block; position: absolute; z-index:0; top:80px; left: -23px; bottom: -23px; right: -23px [/newclass]
[newclass=.prophets .icon] position: relative;z-index:1;display: inline-block; background-color: #fff; transform: rotate(45deg); border-width: 1px; border-style: solid; vertical-align:middle [/newclass]
[newclass=.prophets .mainpic] padding: 10px; margin: 20px [/newclass][newclass=.prophets .mainpic div] width: 75px; height: 75px; opacity: 0.85 [/newclass]
[newclass=.prophets .smallpic] padding: 6px; margin-top: -40px [/newclass][newclass=.prophets .smallpic div] width: 40px; height: 40px; -webkit-filter: grayscale(100%); filter: grayscale(100%) [/newclass]
[newclass=.prophets .mainpic::before, .prophets .mainpic::after] content:''; display: block; background-color: #fff; width: 12px; height: 12px; position: absolute; border-width: 1px; border-style: solid [/newclass]
[newclass=.prophets .mainpic::before] left:-85px; bottom:-65px [/newclass][newclass=.prophets .mainpic::after] right:-65px; top:-85px [/newclass]
[newclass=.prophets h6] position: absolute; left: 20px; right: 20px; z-index: 2; text-align:center; border-style: dotted [/newclass]
[newclass=.prophets h6::before] content: ''; display:block; border-width:1px; border-style: solid; width:7px; height:7px; position:absolute; transform:rotate(45deg); left:50%; margin-left:-4px; background-color:#fff [/newclass]
[newclass=.prophets h6:first-of-type::before] top: 25px; [/newclass][newclass=.prophets h6:last-of-type::before] bottom:25px [/newclass]
[newclass=.prophets .postbody h6:first-of-type] top: 5px; border-bottom-width: 1px [/newclass][newclass=.prophets .postbody h6:last-of-type] bottom: 5px; border-top-width: 1px; [/newclass]
[newclass=.prophets .postbody] position: relative; z-index:2; border-width: 1px; border-style: solid; margin-top: -40px [/newclass]
[newclass=.prophets .postbody b] font-family: Montserrat, Copperplate, Copperplate Gothic Light, Tahoma, Arial [/newclass]
[newclass=.prophets a.user-link] font: 8px/8px Montserrat, Copperplate, Copperplate Gothic Light, Tahoma, Arial [/newclass]
last edit on Jan 9, 2020 0:08:17 GMT by iceguin