➜ Forum: Creative corner

A speech bubble enclosing an ellipsis Thread: Simple HTML Pairings list template

Posted by MisspelledFox
The cooler Jalid, a cerulean and silver chicken with a lace pattern Ectoplasm, a teal and spring chicken with a head pattern Magma, a yellow and vermilion chicken with a speckle pattern THE orange, a orange chicken
6 months ago (edited 3 months ago )

Simple HTML Pairings list template

I can never remember who's supposed to be with who so I made this thing. Hope you like it! smile emoji

Layout design:

Get code here

Notes:
  • This is just a template! Feel free to use as-is, use as inspiration, or completely modify it. You can do whatever you want with it smile emoji
  • 100% Mobile friendly!!
  • Have more than 3 pairs? Just copy & paste the field as many times as you'd like!
  • Header color is 100% customizable using all available site colors
How to change header color:
  1. Find "badge col-grey" in the template: <span class="badge col-grey w-100" style="font-size: 1.1rem;">PAIR NAME 2</span>
  2. Replace "grey" with your preferred color
Click me to see all available colors .col-pink .col-maroon .col-rose .col-crimson .col-red .col-russet .col-brown .col-vermilion .col-bark .col-cream .col-beige .col-orange .col-honey .col-gold .col-ochre .col-yellow .col-lemon .col-lime .col-apple .col-chartreuse .col-olive .col-leaf .col-grass .col-gluppy .col-viridian .col-spring .col-mint .col-turquoise .col-teal .col-aqua .col-sea .col-cerulean .col-sky .col-sapphire .col-ultramarine .col-tumblr .col-navy .col-indigo .col-lilac .col-blurple .col-overcast .col-violet .col-amethyst .col-lavender .col-orchid .col-plum .col-fuchsia .col-wine .col-black .col-sable .col-grey .col-ash .col-silver .col-mist .col-white

How to use custom images for chicken cards



  1. Do the regular chicken chicken card. Like [chicken=ID]

  2. Now that you have the regular chicken card generated, use the inspect element tool to copy the card's HTML code.

Vladimir, a navy and gold chicken with a speckle pattern
#1666 Vladimir
SapphireRose
7 months • ZW A green-grey seed



You should be able to click on the first line here, right click and select "copy element"

  1. Now that you've copied the element, paste it exactly where your [chicken=ID] was. Visually it'll look the same, but now we can customize it :D

  2. Change the chicken's image url to whatever you want.

And you're done! >:D

You can also change the text on the card, the background image, and even whether it uses a light or dark background >:)

Vladimir, a navy and gold chicken with a speckle pattern
Vladimir
SapphireRose
4 weeks • ZW

Replies

MisspelledFox
The cooler Jalid, a cerulean and silver chicken with a lace pattern Ectoplasm, a teal and spring chicken with a head pattern Magma, a yellow and vermilion chicken with a speckle pattern THE orange, a orange chicken
6 months ago • Reply

@Kallikit Thank you!! cry emojiheart emoji

Yuchino
Carlos, a tumblr and wine chicken with a lace pattern Bossa Pozza, a overcast and tumblr chicken with a neck-speckle pattern kurzgesagt, a rose and indigo chicken with a head pattern goth baby, a wine and black chicken with a lace pattern skyline watcher, a black and sable chicken with a half-lace pattern
6 months ago • Reply

THIS IS SO FREAKING AWESOME

MisspelledFox
The cooler Jalid, a cerulean and silver chicken with a lace pattern Ectoplasm, a teal and spring chicken with a head pattern Magma, a yellow and vermilion chicken with a speckle pattern THE orange, a orange chicken
6 months ago • Reply

@Yuchino AA TY!!! glad you like it cry emojiheart emoji

CheepCheep777
Lyca - The Broken, a crimson and yellow chicken with a head pattern
6 months ago • Reply

I'm curious on how you did the custom info + image for Jalid on your list of pairings on the example think emoji

MisspelledFox
The cooler Jalid, a cerulean and silver chicken with a lace pattern Ectoplasm, a teal and spring chicken with a head pattern Magma, a yellow and vermilion chicken with a speckle pattern THE orange, a orange chicken
6 months ago (edited 6 months ago) • Reply

@CheepCheep777 for some reason it wouldn't let me reply as a comment but I sent it via pm and also added it to the post! >:D

let me know if the formatting's broken I am on mobile and fighting for my life

CheepCheep777
Lyca - The Broken, a crimson and yellow chicken with a head pattern
6 months ago • Reply

Oh wow that's actually pretty straight forward smile emoji Though the editing part to get stuff right (with more custom drawings) is a little tedious to do for a lot of chickens on one page (plus the amount of code adds up fast), good to know though for individual profiles!

MisspelledFox
The cooler Jalid, a cerulean and silver chicken with a lace pattern Ectoplasm, a teal and spring chicken with a head pattern Magma, a yellow and vermilion chicken with a speckle pattern THE orange, a orange chicken
6 months ago • Reply

@CheepCheep777 oof yeah!! I have yet to find a good use case myself, it's a curious neat thing for now, it makes everything so much longer... 😭😭