[F2U] ♱ STATUS
created by:Praying
Custom ColorsHTMLMiscellaneous
Copy
This is a BUNDLE! See the tabs above for what you want! ♥︎
Copy
<!-- ✦✦ 【F2U】MOOD by diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://fluxer.gg/uJY1KO8W
❥ iMood Faces: https://postimg.cc/gallery/jn3ptfC
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ NOTES:
- This code uses Variables. Meaning that if you edit
the hex/rgba codes and font family type, it'll change every
instance of the colours/fonts for the rest of the code. Feel
free to change colours on their own.
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ DESCRIPTION OF VARIABLES:
this is only to tell what each variable is responsible for
and to make your editing a little easier.
bg: box backgrounds
outertext: text outside of boxes
feeltext: text inside of boxes
font: TH friendly font
yes: okay to do something today
ask: ask before doing something today
no: dont do this today
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ QUICK FINDS:
CMD+F [MAC] / CTRL+F [WIN]!
> MOODFACE = put an imood face here
------>
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--bg:#fff;
--outertext:#fff;
--feeltext:#000;
--font:monospace;
--yes:#5fff75;
--ask:#ffa75f;
--no:#ff5f5f;
">
<!-- ==================================================== ✦✦
holding container
✧✧ ======================================================= -->
<div class="col d-flex p-0 align-items-center mb-0" style="
font-family:var(--font);
font-size:10px;">
<!-- Start Text -->
<p class="d-inline-block mb-0 mr-1" style="
color:var(--outertext);">
I currently feel
</p>
<!-- ==================================================== ✦✦
feelings box
✧✧ ======================================================= -->
<div class="d-inline-flex align-items-center" style="
background:var(--bg); color:var(--feeltext);
font-family:var(--font); padding-left:0px;
padding-right:1px">
<!-- imood face -->
<img src="MOODFACE">
<!-- feels text -->
content
</div>
</div>
<!-- ==================================================== ✦✦
Status Report
✧✧ ======================================================= -->
<div class="row no-gutters text-uppercase" style="
column-gap:5px;
font-family:var(--font); font-size:10px">
<!-- can someone dm you today? -->
<div class="col-auto pl-0 pr-2 pb-0 pt-0"
title="Ask today please"
data-toggle="tooltip"
style="color:var(--ask);">
dms
</div>
<!-- are pings ok today? -->
<div class="col-auto pl-2 pr-2 pb-0 pt-0"
title="OK to ping today!"
data-toggle="tooltip"
style="color:var(--yes);">
pings
</div>
<!-- can someone vent to you today? -->
<div class="col-auto pl-2 pr-2 pb-0 pt-0"
title="Not good today! Sorry!"
data-toggle="tooltip"
style="color:var(--no);">
vents
</div>
<!-- hover note! -->
<a href="/diadem" class=
"col-auto pl-0 pr-0 pb-0 pt-0 text-lowercase"
title="code by beel"
data-toggle="tooltip"
style="color:var(--outertext); text-decoration:none">
<i class="fa-solid fa-arrow-left-long fa-fw"></i> hover
</a>
</div>
<!-- ==================================================== ✦✦
Currently Doing
✧✧ ======================================================= -->
<div class="row no-gutters" style="
font-size:10px; font-family:var(--font);
column-gap:5px">
<!-- currently box -->
<div class="col pl-1" style="
background:var(--bg); color:var(--feeltext)">
currently
</div>
<!-- input activity -->
<p class="col-auto" style="color:var(--outertext);">
activity <i class="fa-solid fa-heart fa-xs"></i>
</p>
</div>
<!-- ============= ✦✦ End of code! ================== ✦✦ -->
</div>Copy
<!-- ✦✦ 【F2U】FRONT by diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://fluxer.gg/uJY1KO8W
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴·┈·𐑺 ‧₊˚໒꒱
♥︎ NOTES:
- This code uses Variables and normal search hexes.
Meaning that if you edit the hex/rgba codes and font family
type, it'll change every instance of the colours/fonts for the
rest of the code. Feel free to change colours on their own.
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴·┈·𐑺 ‧₊˚໒꒱
♥︎ DESCRIPTION OF VARIABLES:
this is only to tell what each variable is responsible for
and to make your editing a little easier.
front: fronting box colour
co: co-fronting box colour
text: text colour
font: TH friendly font
#ddd - front box border
#e9d3d3 - co-front box border
#785f5f - front box inset
#b88e8e - co-front box inset
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴·┈·𐑺 ‧₊˚໒꒱
♥︎ QUICK FINDS:
CMD+F [MAC] / CTRL+F [WIN]!
> IMGLINK = put img here
------>
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--front:#fff;
--co:#f4e5e5;
--text:#fff;
--font:monospace;
">
<!-- ==================================================== ✦✦
holding container
✧✧ ======================================================= -->
<div class="row no-gutters justify-content-center mb-1" style="
column-gap:5px;
font-size:10px; font-family:var(--font)">
<!-- ==================================================== ✦✦
Fronting Status
✧✧ ======================================================= -->
<div class="col-auto text-center d-block">
<div class="col text-uppercase" style="color:var(--text)">
<i class="fas far fa-sparkle fa-xs "></i> Fronting
</div>
<div class="col p-0 mx-auto"
title="prn/prn ・ Job of alter"
data-toggle="tooltip"
style="height:90px; width:90px;
background-color:var(--front)">
<img class="btn-outline-primary" src="IMGLINK"
style="height:90px; width:90px; padding:10px;
box-shadow:inset 2px 2px 4px 0px #785f5f;
border:2px groove #ddd;
object-fit:cover">
</div>
<!-- Name of alter -->
<p>
name
</p>
</div>
<!-- ==================================================== ✦✦
CO-Front Status
✧✧ ======================================================= -->
<div class="col-auto text-center d-block">
<div class="col text-uppercase" style="color:var(--text)">
Co-Fronting <i class="fas far fa-heart fa-xs" title="code by diadem" data-toggle="tooltip"></i>
</div>
<div class="col p-0 mx-auto"
title="prn/prn ・ Job of alter"
data-toggle="tooltip"
style="height:90px; width:90px; background-color:var(--co)">
<img class="btn-outline-danger" src="IMGLINK"
style="height:90px; width:90px; padding:10px;
box-shadow:inset 2px 2px 4px 0px #b88e8e;
border:2px groove #e9d3d3;
object-fit:cover">
</div>
<!-- Name of alter -->
<p>
name
</p>
</div>
<!-- ============= ✦✦ End of code! ================== ✦✦ -->
</div>
</div>Copy
<!-- ✦✦ 【F2U】FAVED by diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://fluxer.gg/uJY1KO8W
❥ Windows XP icons -
https://oldwindowsicons.tumblr.com/tagged/windows%20xp
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴·┈·𐑺 ‧₊˚໒꒱
♥︎ NOTES:
- This code uses Variables and normal search hexes.
Meaning that if you edit the hex/rgba codes and font family
type, it'll change every instance of the colours/fonts for the
rest of the code. Feel free to change colours on their own.
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴·┈·𐑺 ‧₊˚໒꒱
♥︎ DESCRIPTION OF VARIABLES:
this is only to tell what each variable is responsible for
and to make your editing a little easier.
bg: inner window background colour
decorbg: image decor for blend mode
border: border colour of img links
text: titlebar text colour
font: TH friendly font
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴·┈·𐑺 ‧₊˚໒꒱
♥︎ QUICK FINDS:
CMD+F [MAC] / CTRL+F [WIN]!
> CHARALINK = put character link here
> Character Name = put character name
> IMGLINK = put image here
-->
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--bg:#ECE9D8;
--decorbg:#7f89de;
--border:#aca899;
--text:#fff;
--font:arial;
">
<!-- ==================================================== ✦✦
holding container
✧✧ ======================================================= -->
<div class="col p-0">
<!-- ================== [01] Window ===================== -->
<div class="p-1 d-flex align-items-center justify-content-between" style="
background:linear-gradient(
to bottom,
#3f74ea 0%,
#3093ff 20%,
#0053e3 40%,
#0055e3 70%,
#0068fa 100%
);
border-radius:8px 8px 0px 0px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 1px 0 0 rgba(255,255,255,.18);">
<!-- title -->
<div class="col-auto p-0 text-center" style="
font-size:10px;
font-family:var(--font); font-weight:bold;
color:var(--text);
text-shadow:1px 1px 1px rgba(0,40,120,.75);
white-space:nowrap;">
<img src="https://i.postimg.cc/tCtL2Jnt/faved.png" style="
height:12px; width:12px;
object-fit:cover; vertical-align:middle;
margin-right:2px"> Favourites
</div>
<!-- credit -->
<a href="/diadem"
style="
display:inline-flex; align-items:center;
justify-content:center;
width:15px; height:15px;
margin-left:4px;
background:linear-gradient(
to bottom,
#f59b82 0%,
#e96b4d 18%,
#e94b2f 48%,
#d93620 78%,
#e75d43 100%
);
border:1px solid #fff; border-radius:5px;
box-shadow:
inset 1px 1px 1px rgba(255,255,255,.65),
inset -1px -1px 1px rgba(120,20,10,.45),
0 0 1px #003399;
color:var(--text); font-size:13px; line-height:1;
text-decoration:none;
text-shadow:0 1px 1px rgba(80,0,0,.5);">
<i class="fas fa-xmark"></i>
</a>
</div>
<!-- ================== [02] BOTTOM CONT ================ -->
<div class="col p-0" style="
background:linear-gradient(
to bottom,
#1976f3 0%,
#0868ed 25%,
#0054dc 65%,
#003ca6 100%
);
padding:0 3px 3px 3px !important;
border-radius:0 0 8px 8px;">
<!-- GREY WINDOW BODY -->
<div class="w-100 p-1" style="
background:var(--bg);
border-radius:0 0 5px 5px;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.8),
inset -1px -1px 0 rgba(113,111,100,.45);">
<!-- ==================== IMAGE CAROUSEL =============== -->
<div id="favedCarousel"
class="carousel slide carousel-fade"
data-ride="carousel" data-interval="4000"
style="
width:100%; height:90px;
overflow:hidden;
border:3px groove var(--border);
background:var(--decorbg);
box-shadow:
inset 1px 1px 0 rgba(0,0,0,.25),
inset -1px -1px 0 rgba(255,255,255,.6);">
<div class="carousel-inner">
<!-- IMAGE 01 -->
<div class="carousel-item active"
title="Character Name"
data-toggle="tooltip">
<a href="CHARALINK" class="d-block"
style="background:var(--decorbg);">
<img src="IMGLINK"
class="d-block w-100" style="
height:90px;
object-fit:cover;
object-position:center;
mix-blend-mode:soft-light;">
</a>
</div>
<!-- IMAGE 02 -->
<div class="carousel-item"
title="Character Name"
data-toggle="tooltip">
<a href="CHARALINK" class="d-block"
style="background:var(--decorbg);">
<img src="IMGLINK"
class="d-block w-100" style="
height:90px;
object-fit:cover;
object-position:center;
mix-blend-mode:soft-light;">
</a>
</div>
<!-- IMAGE 03 -->
<div class="carousel-item"
title="Character Name"
data-toggle="tooltip">
<a href="CHARALINK" class="d-block"
style="background:var(--decorbg);">
<img src="IMGLINK"
class="d-block w-100" style="
height:90px;
object-fit:cover;
object-position:center;
mix-blend-mode:soft-light;">
</a>
</div>
<!---- ADD MORE ABOVE ---->
</div>
<!-- PREVIOUS -->
<a class="carousel-control-prev"
href="#favedCarousel"
role="button" data-slide="prev"
style="
text-decoration:none;
opacity:.55;">
<span class="carousel-control-prev-icon"
aria-hidden="true"
style="transform:scale(.75);"></span>
<span class="sr-only">Previous</span>
</a>
<!-- NEXT -->
<a class="carousel-control-next"
href="#favedCarousel"
role="button" data-slide="next"
style="text-decoration:none; opacity:.55;">
<span class="carousel-control-next-icon"
aria-hidden="true"
style="transform:scale(.75);"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- ============= ✦✦ End of code! ================== ✦✦ -->
</div>
</div>
</div>
</div>