code

[bread]

Live previews

makoto tachibana

<raw-code><div style="display: inline-block;width:140px;"><img src="MAINIMGURL" style="border-radius:50px;box-shadow:-5px 5px 0 #FF988A;margin-left:20px;"><img src="SMALLIMGURL" style="border-radius:50px;height:50px;margin:0 0 -12px -30px;box-shadow:-3px 3px 0 #D8646F;position:relative;z-index:100;"><br /><div style="margin-top:-8px;position:relative;z-index:50;"><div style="width:100px;height:12px;background-color:#FF988A;color:#C2385C;font-family:ms gothic;font-size;9px;line-height:10px;border-radius:10px;padding:0 20px 0 5px;text-transform:lowercase;overflow:hidden;"> CHARACTERNAME</div><div style="width:100px;margin:0 10px;"><div style="height:4px; width:PERCENTAGE%;background-color:#D8646F;border-radius:0 0 0 20px;float:right;margin-right:10px;"></div></div></div></div></raw-code>

Sakura Inami

<raw-code><div style="display: inline-block;width:160px;"><img src="MAINIMGURL" style="border-radius:50px;height:50px;margin:0 -30px -12px 0;box-shadow:3px 3px 0 #D8646F;position:relative;z-index:100;"><img src="SMALLIMGURL" style="border-radius:50px;box-shadow:5px 5px 0 #FF988A;"><br /><div style="margin-top:-8px;position:relative;z-index:50;"> <div style="width:90px;height:12px;background-color:#FF988A;color:#C2385C;font-family:ms gothic;font-size;9px;line-height:10px;border-radius:10px;padding:0 5px 0 13px;margin-left:40px;text-transform:lowercase;overflow:hidden;"> CHARACTERNAME</div><div style="width:100px;margin:0 10px;"><div style="height:4px; width:PERCENTAGE%;background-color:#D8646F;border-radius:0 0 20px 0 ;float:left;margin-left:30px;"></div></div></div></div></raw-code>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Nagisa Hazuki | link

<raw-code><div style="display: inline-block;width:320px;"><div style="float:left;width:130px;margin-bottom:0px;"><img src="http://i.imgur.com/dD1F3vI.png" style="border-radius:50px;height:50px;margin:0 -30px -12px 0;box-shadow:3px 3px 0 #D8646F;position:relative;z-index:100;"><img src="http://i.imgur.com/uxRdR4k.png" style="border-radius:50px;box-shadow:5px 5px 0 #FF988A;"></div><div style="height:85px;font-family:ms gothic;font-size:10px;margin:10px 0 0 0;line-height:12px;text-align:justify;overflow:hidden;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. </div><br style="clear:both;"><div style="margin-top:-18px;position:relative;z-index:50;"> <div style="width:270px;height:12px;background-color:#FF988A;color:#C2385C;font-family:ms gothic;font-size;9px;line-height:10px;border-radius:10px;padding:0 5px 0 15px;text-transform:lowercase;overflow:hidden;float:left;margin:-10px 0 0 40px;"> CHARACTERNAME | <a href="URL" style="color:#C2385C;text-decoration:none;">link</a></div><div style="width:270px;margin:0 10px;"><div style="height:4px; width:100%;background-color:#D8646F;border-radius:0 0 20px 0 ;float:left;margin-left:30px;"></div></div></div></div></raw-code>

momotarou mikosa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor.

<raw-code><div style="display: inline-block;width:140px;"><img src="MAINIMGURL" style="border-radius:50px;box-shadow:-5px 5px 0 #FF988A;margin-left:20px;"><img src="SMALLIMGuRL" style="border-radius:50px;height:50px;margin:0 0 -12px -30px;box-shadow:-3px 3px 0 #D8646F;position:relative;z-index:100;"><br /><div style="margin-top:-8px;position:relative;z-index:50;"><div style="width:100px;height:12px;background-color:#FF988A;color:#C2385C;font-family:ms gothic;font-size;9px;line-height:10px;border-radius:10px;padding:0 20px 0 5px;text-transform:lowercase;overflow:hidden;"> CHARACTERNAME</div><div style="width:100px;margin:0 10px;"><div style="height:4px; width:PERCENTAGE%;background-color:#D8646F;border-radius:0 0 0 20px;float:right;margin-right:10px;"></div></div></div> <div style="height:85px;font-family:ms gothic;font-size:10px;margin:10px 0 0 0;line-height:12px;text-align:justify;overflow:hidden;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. </div></div></raw-code>

game Sigmund Freud

<raw-code><div style="display:inline-block;"><div style="float:left;width:120px;height:170px;text-align:center;margin:5px;"><img src="IMGuRL" style="border-radius:50px 10px 10px 20px ;box-shadow:5px 5px 0 #D8646F;align:center;"><div style="background-color:#998A8D;height:60px;width:60px;margin:-25px 0;position:relative;z-index:100;border-radius:50px;float:right;font-family:ms gothic;text-align:center;"><div style="margin:21px 0;"> <a href="LINKURL" style="color:black;text-decoration:none;">LINK</a></div></div> <div style="width:80px;height:80px;background-color:#FF988A;font-family:ms gothic;text-align:center; border-radius:50%;line-height:10px;position:relative;z-index:50;float:left;vertical-align:middle;margin:-20px 0;"> <div style="margin:30px 0;">CHARACTERNAME </div></div></div></div></div></raw-code>

Shiro Kamiya

<raw-code><div style="display:inline-block;"><div style="float:left;width:120px;height:170px;text-align:center;margin:5px;"><img src="MAINIMGURL" style="border-radius:50px 10px 10px 20px ;box-shadow:5px 5px 0 #D8646F;align:center;"> <img src="SMALLIMGURL" style="height:60px;margin:-25px 0;position:relative;z-index:100;border-radius:50px;float:left;"><div style="width:80px;height:80px;background-color:#998A8D;font-family:ms gothic;text-align:center; border-radius:50%;margin:;line-height:10px;position:relative;z-index:50;float:right;vertical-align:middle;margin:-20px 0;"> <div style="margin:30px 0;">CHARACTERNAME </div></div></div></div></div></raw-code>

Stahl Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor.

<raw-code><div style="display:inline-block;width:250px;"><div style="float:left;width:120px;height:170px;text-align:center;margin:5px;"><img src="MAINIMGURL" style="border-radius:50px 10px 10px 20px ;box-shadow:5px 5px 0 #D8646F;align:center;"><img src="SMALLiMGuRL" style="height:60px;margin:-25px 0;position:relative;z-index:100;border-radius:50px;float:left;"> <div style="width:80px;height:80px;background-color:#998A8D;font-family:ms gothic;text-align:center; border-radius:50%;margin:;line-height:10px;position:relative;z-index:50;float:right;vertical-align:middle;margin:-20px 0;"> <div style="margin:35px 0;">CHARACTERNAME </div></div></div><div style="font-family:ms gothic;font-size:10px;margin:10px 0 0 0;line-height:12px;text-align:justify;overflow:hidden;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. </div></div></div></raw-code>

Akihito Kanbara ★★★★★★★ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Sed mattis at mauris nec sagittis.

<raw-code><div style="display:inline-block;"><div style="float:left;width:120px;text-align:center;margin:5px;"><img src="MAINIMGRUL" style="border-radius:50px 10px 10px 20px ;box-shadow:5px 5px 0 #D8646F;align:center;"><img src="SMALLIMGURL" style="height:60px;margin:-25px 0;position:relative;z-index:100;border-radius:50px;float:left;"><div style="width:80px;height:80px;background-color:#998A8D;font-family:ms gothic;text-align:center; border-radius:50%;margin:;line-height:10px;position:relative;z-index:50;float:right;vertical-align:middle;margin:-20px 0;"> <div style="margin:30px 0;">CHARACTERNAME </div></div></div><div style="width:250px;height:250px;background-color:#FF988A;font-size:10px;text-align:justify;border-radius:0 50% 50% 50%;margin:-10px 0 10px 70px;box-shadow:3px 3px 5px #998A8D;"><div style="width:140px;margin:20px 20px 20px 60px;"><div style="color:#D8646F;font-size:18px;"> ★★★★★★★ </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Sed mattis at mauris nec sagittis. </div></div></div></div></raw-code>

Mirai Kuriyama ★★★★★★★ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Sed mattis at mauris nec sagittis.

<raw-code><div style="display:inline-block;"><div style="float:right;width:120px;text-align:center;margin:5px;"><img src="MAINIMGURL" style="border-radius:10px 50px 20px 20px ;box-shadow:5px 5px 0 #D8646F;align:center;"><div style="width:80px;height:80px;background-color:#998A8D;font-family:ms gothic;text-align:center; border-radius:50%;line-height:10px;position:relative;z-index:50;float:left;vertical-align:middle;margin:-30px 50px;"> <div style="margin:30px 0;">CHARACTERNAME </div></div></div><div style="width:250px;height:250px;background-color:#FF988A;font-size:10px;text-align:justify;border-radius:50% 0 50% 50%;margin:-10px 70px 10px 0;box-shadow:3px 3px 5px #998A8D;"><div style="width:140px;margin:20px 30px 20px 50px;"><div style="color:#D8646F;font-size:18px;text-align:right;"> ★★★★★★★ </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Sed mattis at mauris nec sagittis. </div></div></div></div></raw-code>

Notes ⇀ For "Makoto Tachibana" and "Momotarou Mikoshiba", CHARACTERNAME only supports about 15 characters
⇀ Vertical centering for codes "Sigmund Freud" and on need a little assistance. For the CHARACTERNAME, if the name needs two lines, set the div as "margin:30px 0;" ; for one name, set the div as "margin:35px 0;"
⇀ For "Makoto Tachibana" through "Momotarou Mikoshiba", the bar underneath can be adjusted! However, it looks great as a decoration at 100%, too.

Comments

[ai]

these are all so amazing. i ended up using one of them here :)

[bread]

you play so many amazing females wtf you go IM GLAD YOU LIKE c:

[ai]

tyvm!! your codes are something i've admired for a while so i'll definitely be back for more :)

(and yay fellow sakura fan?!)

[slugs]

hell yeah a fellow fan SHES MY ANGEL

AND THANK YOU A LOT how embarrassing u///u im really glad youve liked my stuff, that means a lot to hear

[punches]

ahhh you're the one with the perfect username for her :D highfives

i will definitely be back points to eyes points to you

[honokairo]

thank youuu I love it, used one of those here :3

[bread]

hehe thank you, also! im glad you liked it

[cheshirechu]

ahhhh so niiiiiiice!! i'll most def be using a bunch of these. such cute designs!! thanks for making them! c:

[bread]

thank you! i really love this set so i love hearing im not the only one. hope they do well for you!

[narva]

These are super nice, snatching at least one for my new muselist :3

[bread]

thank you! glad you like (:

[royul_thyme]

hiya! love this style. I'm usin' these in my CR chart(s???) and i'll definitely be playing with those colors, so that'll be fun~

[bread]

color fiddling [blush] gl with that! glad you like the codes c:

[astralera]

man it's years late but hopefully you're still around haha

I have no idea how to get this one

CHARACTERNAME

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor.

to have the small image icon swapped for a text box instead to write the game name in. I'm getting better at CSS but still am too noob to figure this out. :(

[bread]

i am still around!



is that what you're after? (ignore the font change, it's still in the code)

[astralera]

yeah! exactly it.


also was not expecting a response, let alone such a fast one. (you win the journal name game)

[bread]

im pretty sure i would rise out of my own grave to keep my codes up to date (also thank you uwu)

it took me a hot minute to figure out how-tf my own code worked, so totally fair you had trouble navigating it on your own.

<raw-code><div style="display: inline-block;width:140px;"><img src="USERPIC" style="border-radius:50px;box-shadow:-5px 5px 0 #FF988A;margin-left:20px;"><div style="font-family:ms gothic,serif;background-color:#998A8D;float:right;border-radius:50px;width:50px;height:50px;margin:63px 0 -15px -35px;box-shadow:-3px 3px 0 #D8646F;position:relative;z-index:100;text-align:center;line-height:50px;"> GAME</div><br /><div style="margin-top:-8px;position:relative;z-index:50;"><div style="width:100px;height:12px;background-color:#FF988A;color:#C2385C;font-family:ms gothic;font-size;9px;line-height:10px;border-radius:10px;padding:0 20px 0 5px;text-transform:lowercase;overflow:hidden;"> CHARACTERNAME</div><div style="width:100px;margin:0 10px;"><div style="height:4px; width:PERCENTAGE%;background-color:#D8646F;border-radius:0 0 0 20px;float:right;margin-right:10px;"></div></div></div></div></raw-code>

[astralera]

Haha I don't blame you! I think I'd be the same way if I was any decent at coding from scratch. I'm still just learning/figuring shit out and was very frustrated I had no idea where to even *start* with this.

thanks so much for the tweaked code! :) I'll probably be using it on this journal eventually.

[astralera]

LMAO HELLO IT IS ME AGAIN

I was trying to put them in 3 per row rows but I can't figure out divs very well. If you have any insight it would be greatly appreciated because I have given up. (in the little circles i'm planning to put hearts a la Harvest Moon style, once I figure out how to line these up properly!)

[bread]

OK first apologies from me bc i technically gave you the wrong code the first time i fixed it bc my brain some how didnt register the lorem ipsum (i had fixed it first thing in the morning before and my brain works at half speed lmao). SECOND apologies bc for me to fix it i had to build off the old code instead; i see that you'd cleaned up the code so you could read it better and yeah i kinda reversed those efforts........ (id put it all back but i dont wanna assume your method)

i went ahead and did the hard labour for you of arranging things. i think your code was just fucking up because of my negligence. http://ficken.dreamwidth.org/12937.html theres a model for you there and the code is in the comment.

if the code is still fucking up, it might be because you have custom comment pages turned on, which either you'd have to turn them off or mess with the margin/padding a lot (i deeply love... using custom comment pages, but adjusting codes to fit them can be annoying). as for locking them to 3-column rows, i made a surrounding div of 450px, but you can change the width of that to whatever and get a variety of column set ups.

also, im seeing that youre doing color changes. im not sure how much that's been troubling you or not, but in case the info helps.......
brown: #998A8D
dark pink: #D8646F
light pink: #FF988A
(just so its easier to just ctrl+f and remove the weird ass colors id picked)

[astralera]

nooo it's okay! no apologies necessary! Thank you so much for going out of your way to fix this for me. ;u; I can handle messy code no problem!

I also didn't realize I had custom comment pages set (whoops)

thanks again!! you are a code wiz!

[astralera]

I AM SO SORRY FOR BOTHERING YOU AGAIN OH MY GOSH

but I have an issue with the spacing of subsequent rows as seen:

Here with your basic code and then here. Like the subsequent entries keep getting spaced closer and closer together and I've been tweaking various things to try and fix it but the best I've managed is making the first row squashed as well.

Have I just been copy/pasting new entries incorrectly? I'm so sorry again agklasjh

I also have custom comment pages disabled as far as I'm aware unless that's limited to my own viewing settings or something );

[bread]

i have no idea why its doing that AHKJLKJHALKJH theres almost a sense of impending doom radiating from the codes as they slowly creep together like that, lmao

http://ficken.dreamwidth.org/12937.html here i just did the labour again

i went ahead and just reworked the code myself; imma just list off my changes and maybe that'll help with the learning process.... maybe??? coding is hard so youre fine asking for help
- the whole unit had to be made wider to make work what you wanted to, otherwise it gets too squished
- added some margins between the div areas also. over all the units are a lot wider than they were originally
- instead of <img> for the heart, i made it into a background element, which simplifies the margin playing a lot, and then moved it over to where you have it on yours.
- i see you moved icon over a smidge and idk if that was a desperate attempt to get everything to work which i get, but im not into it personally. instead i realigned the icon so that it was flush-left. if you want it even further left, you can add a margin-left:-##px into that style tag to get it to do what you had before. Related, if you wanted the
- i saw you narrowed the writing area for the lorem ipsum, and added some new padding in there to keep it that way

as for custom comments, im still seeing them. this happened to a friend of mine before. organize -> manage account -> display -> uncheck "Show my journal's entry pages in my chosen style instead of the site skin"

[astralera]

That is actually the best way to describe it askdgjhdsg it was so disconcerting. Like it was being slowly compressed into nonexistence...

OKAY!!! Thanks again! This time it turned out well. :D I'll probably continue making minor tweaks, but now that I won't have to deal with some kind of reverse-mitosis with each element I shouldn't have any more issues lol

And thanks for listing the changes you made - that actually helps a bunch! Is there any way to add the hover text back to the heart image while it's a background element?

...ALRIGHTY CUSTOM COMMENT PAGE NOW NERFED. Thanks! I can't believe I overlooked that. I must have thought turning it off for my own viewing disabled it on the journal layout too or something... hehe

[bread]

totally loving the reversal of the box-shadow/icon border colors.

on the div that holds the heart, after all the styles and shit, add alt="Quote" title="Quote". idk if they've fixed it recently, but prior you needed both to support firefox and chrome (dunno about the other browsers, pretty sure they all support at least one). if youre curious about web support for it, you can google it, but its... such a minor detail

[astralera]

thanks! I might do an accent on the icon border to match the heart colour, but if that looks dumb I'll be leaving it as-is.

I keep getting an error when I add alt="Quote" title="quote"

i dump it in this div, right?

div style="font-family:ms gothic,serif;
i tried it here
background:url('http://imgur.com/pYh4rZO.png') right bottom no-repeat;
float:right;
width:50px;
height:50px;
margin:68px 0 -15px 0px;
position:relative;
z-index:100;
text-align:center;
line-height:50px;
i tried it here too"

[bread]

it cant be inside the style tag! title and alt are their own kinds of tags

so its gotta be <div style="styles go here" alt="Quote" title="quote">

[astralera]

ooooh I see where I was messing up. Stupid quotations!

Thanks so much! :DDDDDD I feel so bad for bothering you but I can't regret it because I've wanted a Harvest Moon-inspired CR chart for years hehe

eta: final product is up over here now. thanks again! i love it ♥

[bread]

YEE HAW im glad it worked out at long last!!!

[astralera]

I keep staring at it so pleased with it. Minimalistic Harvest Moon style! Aw yiss

Thanks again!!! THANK YOU FOREVERRRR

[nocliffhangers]

Hello! I was looking to use the "Akihito" version of this guy and was wondering if there's an easy way to replace the small icon with a plain text bubble? I'm having a hard time trying to remove the link and get the placement right for the bubble overlays. I'm code-directionally challenged. :( I just wanted to replace them with a single text symbol for an easy relationship status key. Thank you very much for the gorgeous code and your time!

[bread]

fear not, this set of codes are basically incorrigible. I think this is what you're after?
edit: it just dawned on me; i dont have those fonts downloaded on my computer any more, so the screen cap looks different. the original font is still in the code!


<raw-code><div style="display:inline-block;"><div style="float:left;width:120px;text-align:center;margin:5px;"><img src="https://v.dreamwidth.org/5599891/1159816" style="border-radius:50px 10px 10px 20px ;box-shadow:5px 5px 0 #D8646F;align:center;"><div style="width:60px;height:60px;background:#D8646F;margin:-25px 0;position:relative;z-index:100;border-radius:50px;float:left;font-family:ms gothic;text-align:center;line-height:10px;position:relative;z-index:49;vertical-align:middle;"><div style="margin:25px 0;">text</div></div><div style="width:80px;height:80px;background-color:#998A8D;font-family:ms gothic;text-align:center; border-radius:50%;margin:;line-height:10px;position:relative;z-index:50;float:right;vertical-align:middle;margin:-20px 0;"> <div style="margin:30px 0;">CHARACTER NAME </div></div></div><div style="width:250px;height:250px;background-color:#FF988A;font-size:10px;text-align:justify;border-radius:0 50% 50% 50%;margin:-10px 0 10px 70px;box-shadow:3px 3px 5px #998A8D;"><div style="width:140px;margin:20px 20px 20px 60px;"><div style="color:#D8646F;font-size:18px;"> ★★★★★★★ </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Sed mattis at mauris nec sagittis. </div></div></div></div></raw-code>

[nocliffhangers]

This is perfect, thank you so much! And this is what I had going with it. ♥

[bread]

yay!!! im glad it worked out!!!

also, if you dont mind me adding, if you want to make the emoji larger and fill that space better, you can change the style tag immediately before it to margin:0;font-size:40px; and it should come out like this:

[nocliffhangers]

I don't at all, thank you! I was going to futz with it after work and enlarging it was #1 on the agenda so we're in agreement on it. c: I'm so ready to offend everyone with thundercloud emojis, heck yes!!

do you ever just pick up new characters and realize they have no happy icons, because that's the hell I'm in rn