Some HTML for your Stylization Needs

[bluewinged_songbird]

Here's a list of the HTML I tinkered with to make things such as textboxes and images responsive to browser sizes. They're mostly optimized for solarbird's Coexistence Alpha for Neutral Good, but should work for other styles too. I'm very new to all this but so is almost everyone on my access list.

Credit to Owlcation for How to Align Images and How to Align Images Side-by-Side for providing the base.

Note: Replace everything [IN THIS], including square brackets.

Textboxes (+Bonus Template for sharing posts)

<textarea style="width:98%;height:5em;max-width:100%;line-height:1em;padding:0.313em;"> <user name=[USER NAME]> has a <a href="[URL]">post</a> about [TITLE OF TOPIC]. </&textarea> Remove the "&" in /textarea. I couldn't make the textbox work otherwise.

Centre Aligned Images

<p style="text-align: center;"> <img src="[IMAGE URL]" alt="[TEXT]" style="max-width:92%; margin-left:2%; margin-right:2%; margin-bottom: 0.5em" /> </p>

Centre Aligned Images with Link

<p style="text-align: center;"> <a href="[LINK URL]"><img src="[IMAGE URL]" alt="[TEXT]" style="max-width:92%; margin-left:2%; margin-right:2%; margin-bottom: 0.5em" /> </p></a>

Two Images Across

<p style="margin-left: 2.5em;"> <img src="[IMAGE URL]" alt="[TEXT]" style="float: left; max-width:46%; margin-right: 1%; margin-bottom: 0.5em;" /><img src="[TEXT]" alt="[TEXT]" style="float: left; max-width:46%; margin-right: 1%; margin-bottom: 0.5em;" /> <p style="clear: both;">

Three Images Across

<p style="margin-left: 2.5em;"> <img src="[IMAGE URL]" alt="[TEXT]" style="float: left; max-width:30%; margin-right: 1%; margin-bottom: 0.5em;" /><img src="[IMAGE URL]" alt="[TEXT]" style="float: left; max-width:30%; margin-right: 1%; margin-bottom: 0.5em;" /><img src="[IMAGE URL]" alt="[TEXT]" style="float: left; max-width:30%; margin-right: 1%; margin-bottom: 0.5em;" /> <p style="clear: both;">

Comments

[abirdie]

Thank you so much! I'm so beginner level with HTML, so no doubt this'll be a lifesaver in the future.

No Problem!

[bluewinged_songbird]

I'm also a HTML beginner, and honestly so are most people new to DW. Most sites nowadays use Rich Text Editors but the one here is so broken. That said, HTML is way more customizable and it gives me an unfathomable rush of power once I get it right.

These are all the product of me being extra about the Aesthetic™, so I'm glad if it helps. I did 2 image heavy tutorials and I didn't like what the standard image posting gave me. I hated it even more on my mobile screen and on Latest Things. Everything was just stretched so unevenly!

I'm also heavily annoyed about resizing textboxes I see on posts here even though I can just ctrl+A and ctrl+C but Aesthetic™. Especially since it's the only viable way to simulate a reblog on DW. I want to make sharing accessible dammit!!

Re: No Problem!

[abirdie]

I'm actually so bad at making things aesthetically pleasing. I'm a cave troll whose room looks like a prison cell in real life, and I'm not much better online. But I did just use the centered image thing in a post, so thanks again! Maybe I will improve on this front this year.

[bluewinged_songbird]

Hey, I'm not much better IRL either so.... same hat? (I need a new meme)

Awww, that was quick! XD I hope it helped and you liked how it turned out. You're also free to play around with the image style to whatever suits you.

Just remember that for responsive stuff, the values should be in percentage or em (the size of an M, mostly just means it'll fit the browser's default font size). I played around with this to fix the really tiny font size on this journal layout but didn't want to put a value 'cause I'm lazy.

[minoanmiss]

Thank you for this!

[bluewinged_songbird]

No problem! I hope it helps.