killthecake | [1] Clouds & Blocks

LEFT IMAGE is post code-push. RIGHT IMAGE is pre code-push.

LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper.

killthecake

Codes

Clouds/Round <!---RIGHT---> <center> <img src="ICONURL" style="margin-bottom: -115px; margin-right: -650px; border-radius: 50%; border: 15px double #828282;width: 100px; height: 100px;"> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 10px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484; border-radius: 20px 20px 20px 20px;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br /> <!---LEFT---> <center> <img src="ICONURL" style="border-radius: 50%; border: 15px double #828282; margin-bottom: -110px; margin-left: -670px; width: 100px; height: 100px;"> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 5px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484; border-radius: 20px 20px 20px 20px;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br />	Blocks/Square <!---RIGHT---> <center> <img src="ICONURL" style="width: 100px; height: 100px; border: 15px double #828282; margin-bottom: -110px; margin-right: -630px;"> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 10px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br /> <!---LEFT---> <center> <div style=""> <img src="ICONURL" style="width: 100px; height: 100px; border: 15px double #828282; margin-bottom: -110px; margin-left: -640px;;"> </div> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 5px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br />
Round Meter <!---RIGHT---> <div style="float: right; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-right: 25px; border: 2px solid #848484; border-radius: 20px 20px 20px 20px;"> <div style="width: NUMBER%; background: #ff0000; height: 10px; border-radius: 20px;"> </div></div> <!---LEFT---> <div style="float: left; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-left: 25px; border: 2px solid #848484; border-radius: 20px 20px 20px 20px;"> <div style="width: NUMBER%; background: #ff0000; height: 10px; border-radius: 20px;"> </div></div>	Square Meter <!---RIGHT---> <div style="float: right; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-right: 25px; border: 2px solid #848484;"> <div style="width: NUMBER%; background: #ff0000; height: 10px;"> </div></div> <!---LEFT---> <div style="float: left; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-left: 25px; border: 2px solid #848484;"> <div style="width: NUMBER%; background: #ff0000; height: 10px;"> </div></div>
Credit <center><a href="https://killthecake.dreamwidth.org/420.html" style="text-decoration:none; font-variant: small-caps;color: #666; font-family: helvetica; font-size: 12px; font-weight: bold; letter-spacing: 1px;">killthecake</a>

Instructions

UPDATE 1/20/21: WOW THIS WAS OUT OF DATE. I fixed it so that the code will work with pre & post code-push. The readability is also way better. I even touched up the credit link.

UPDATE 1/20/21: Please make sure you check Disable Auto-Formatting before you post.

In the Clouds/Blocks, replace ICONURL with the image you want to use and replace the LOREUM IPSUM text with whatever you'd like to add.

Each code has a RIGHT and LEFT option.

To add in the Heart Meters, paste the code within the Clouds/Blocks code between the end of your customized text and the last DIV. You may need to hit enter a time or two to give yourself some space.

To change the meter amount, replace NUMBER with your preferred percentage. 0% will show nothing, 100% will fill it completely, 50% is half, etc.

If you have problems, leave a comment. I'm so new to this!!

Heavily inspired by this code.

To Change Colors

ICON BORDER:

#828282

BACKGROUND:

#e3e3e3

FILLED METER:

#ff0000

Flat | Top-Level Comments Only

Looks like this broke when the site did one of those code pushes. Any chance you'll fix it?

This was soooo out of date. Thank you for bringing it to my attention. All of the codes are updated, not just to fix the broken parts but to also make it work on pre/post code-push DW, improve readability, and remove unnecessary coding. It should be a lot better now.

It looks different on each version of DW. The old version has big icons overlapping the colored bubbles. The new version has smaller icons on the sides of bubbles, not touching them. I'll update the images above to reflect that.

Thanks again! Let me know if you encounter any other problems.

Great, thanks so much for your attention to this! I've been planning to use this as my CR chart for a while now but I'm just now getting around to it.

[1] Clouds & Blocks

no subject

no subject

no subject