15th: fondness

[yanyan]

Another one of these things with gauges/bars. Can be used for CR charts! UPDATE (10/4): Fixed. Code doesn't mess up text and comments below it anymore.

Shinobu Oshino (Monogatari Series) → servant

Saber (Fate/Zero) → servant

CODE
<raw-code> <!--ITEM START--> <div style="height: 104px; width: 514px; margin-bottom: 20px;"> <div style="height: 48px; width: 500px; background: #fff; border-radius: 60px; text-align: left;"> <!--BAR STARTS HERE--> <div style="height: 16px; width: 400px; background: #fff; position: relative; top: 6px; left: 20px; border: 2px solid #HEXCODE1; border-radius: 16px;"> <div style="height: 100%; width: NUMBER%; background: #HEXCODE2; border-radius: 16px 0px 0px 16px;"></div> </div> <!--BAR ENDS HERE; TEXT STARTS HERE--> <div style="width: 380px; position: relative; top: 6px; left: 24px;"> <span style="font-family: 'segoe ui', verdana, sans-serif; font-size: 12px; color: #HEXCODE3; text-transform: lowercase; letter-spacing: 0.1em;">Text here → <b style="color: #HEXCODE4;">Text</b></span> </div> <!--TEXT ENDS HERE, IMAGE STARTS HERE--> <img src="IMAGE URL HERE" style="display: inline-block; position: relative; bottom: 72px; left: 430px; border: 6px solid #fff; border-radius: 50%;"> </div> </div> <!--ITEM END--> </raw-code>

NOTE
1. HEXCODE1 is the border color of the bar, HEXCODE2 is the color of what's inside the bar, HEXCODE3 is the color of the text below, HEXCODE4 is the color of the bold text. Replace these with any colors of your choosing.
2. To adjust how much the bar has filled up, replace NUMBER with any number from 0 to 100. If the value is above 98, replace border-radius: 16px 0px 0px 16px; with just border-radius: 16px;
3. If you want to make more rows, copy and paste the code between ITEM START and ITEM END.
4. Use this code however you want and let me know if something comes up!

Comments

[milky]

KISSES YOU O/////////////O I LOVE THIS SO MUCH TY

[yanyan]

hehehe you're welcome lulu! u///u

http://yanyan.dreamwidth.org/2749.html#cutid1

[(Anonymous)]

totally not creeping on you, but will you ever post this code? i really like the first part.

[yanyan]

I actually forgot I put it there, hahaha! I'm planning to, but I obviously forgot about it. The code for it is very messy, so I still have to fix it and make it neater for public use, too. It will be up this weekend.

Thanks!

[(Anonymous)]

ty!

[bicarbonate]

this is quite a while since you've posted this, but i did want to ask if it was possible to somehow switch it so it's on the left...?

[yanyan]

I fixed it a bit and came up with this!

<raw-code> <!--ITEM START--> <div style="height: 104px; width: 514px; margin-bottom: 20px; display: block;"> <div style="height: 48px; width: 500px; background: #fff; border-radius: 60px; text-align: left;"> <!--IMAGE STARTS HERE--> <img src="IMAGE URL HERE" style="float: left; position: relative; bottom: 32px; left: -36px; border: 6px solid #fff; border-radius: 50%;"> <!--BAR STARTS HERE--> <div style="height: 16px; width: 400px; background: #fff; position: relative; top: 6px; left: 80px; border: 2px solid #HEXCODE1; border-radius: 16px;"> <div style="height: 100%; width: NUMBER%; background: #HEXCODE2; border-radius: 16px 0px 0px 16px;"></div> </div> <!--BAR ENDS HERE; TEXT STARTS HERE--> <div style="width: 380px; position: relative; top: 6px; left: -30px;"> <span style="font-family: 'segoe ui', verdana, sans-serif; font-size: 12px; color: #HEXCODE3; text-transform: lowercase; letter-spacing: 0.1em;">Text here → <b style="color: #HEXCODE4;">Text</b></span> </div> <!--TEXT ENDS HERE--> </div> </div> <!--ITEM END--> </raw-code>

There's now an example of it on the post. (The black and blue one on the bottom.)