Tags:

(full view)
v2. multiple rows

(full view)
v3. in-depth info

(full view)
v4. everything

(live preview)
instructions & notes
❖ Large, but nice and open, clean info sheet that can double as navigation and other things if so desired. Threw in some possible optional stuff that some folks might find useful, so edit and modify as needed! Default colors are from the v2 and v3 set.
❖ Colors:
- #1f1c1e: header, box title text
- #bc600f: subtitle, link text
- #804024: label text, summmary border-bottom
- #c2c1be: box border
- rgba(85, 81, 79): hr gradient
❖ For adding a new row of boxes, use the "BLANK ROW" code and insert after <!-- FIRST ROW END --!> text.
❖ Note on the text details summary code: by default the "BACKGROUND" section is left "open" for visual convenience. To have it "closed" by default instead, just change "details open" to "details." If you want a different section to remain open, change "details" to "detials open."
❖ Note on the images: all previews have the images at 250x350 but you can have it whatever works best for you. It's also possible to use different number of images so long as it fits the width (code is set to be at minimum 800px). Nothing fancy about the image codes, so very easy to modify.
❖ Heavily inspired by EFFICIO.
❖ Credit either
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
Tags:
multiple cards |
multiple cards |
⋗ ⋗ ⋗ LEGEND ⋖ ⋖ ⋖ | |||
⚔: first | ♞: second | ⛯: third | ✠: fourth |
⚜: top symbol | ◉: second symbol | ⛢: third symbol |
sample header
⋗ ⋗ ⋗ CASTMATES ⋖ ⋖ ⋖
❖ Mostly designed for CR charts, but they can be used for little info or muse cards. You can see it in the works here. Default color template is the Rokurou set.
❖ Colors:
- #93151B: character header, boxshadow, hr line
- #4C1459: text
- #300D38: symbol text color
- #FFC46A: symbol diamond bg color
- #EB8D52: header text
❖ For the multiple set, all you have to do is copy/paste the card code from
START CARD
to END CARD
after each card. Just make sure everything stays within the raw-code
tags and you're all good.❖ Note on the diamond symbols: because symbols aren't uniform in size, you'll probably have to fiddle with the
font-size
and/or the line-height
to make the symbol fit centered. Increasing the line-height
will move the symbol down, and decreasing it will move it up. Also, the top symbol is in link form only as a template reference. ❖ Note on the info cards: to be honest the only difference between it and the CR chart version is the top text section. For quick edit, just replace the
CR BARS CONTENT
with the following section and you're good.❖ Last note: everything is coded so that if there's too much text to be displayed, the overflow will be hidden. Some ways to adjust (other than reducing content) is decreasing font size or, in the case of the character header, remove some of the arrows. They're just space filler decoration so you can do whatever with it lol.
❖ Credit either
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
(updated cards only, tracker is fine but will also receive an update later)
SHIZUO HEIWAJIMA » » » hatesviolence Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis elementum elit, ut tempor nisl accumsan ac. Ut est libero, commodo at cursus in, ultricies mattis massa. In hac habitasse platea dictumst. Cras facilisis tellus mauris, sit amet lacinia urna maximus condimentum. Pellentesque sit amet ipsum at tellus facilisis condimentum. In pellentesque nibh eget imperdiet facilisis. Nam sed purus vestibulum, posuere quam et, iaculis felis. |
TRUST SUPPORT AFFECTION STRENGTH |
( code and more under cut )
Tags:
SHIZUO HEIWAJIMA
» » » hatesviolence
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis elementum elit, ut tempor nisl accumsan ac. Ut est libero, commodo at cursus in, ultricies mattis massa. In hac habitasse platea dictumst. Cras facilisis tellus mauris, sit amet lacinia urna maximus condimentum. Pellentesque sit amet ipsum at tellus facilisis condimentum. In pellentesque nibh eget imperdiet facilisis. Nam sed purus vestibulum, posuere quam et, iaculis felis.
ღ link 1 ღ link 2 ღ link 3 ღ link 4 ღ
( code and more under cut )
Tags: