wooby

gay dog

welcome to dog !!
gay transfemme nerd
over 21
please don't follow if you're under 18
avi 🎨: @VCRStatic


discord
@wooby
matrix
@woobyrubes:matrix.org
website
ruby.gay/

mynotaurus
@mynotaurus
Anonymous User asked:

what specifically do you dislike about the Other popular textbox template on the site?

a yinglet talking with ears raised, wearing a blue check shirt

Myno

mainly just zhat its use of css float and positioning makes it slightly more of a pain to make responsive zhan it should be (iirc it also made it slightly more annoying to stack on top of each ozher?)

a yinglet amusedly shrugging and talking, wearing a blue check shirt

Myno

nozhing major, i just felt a simpler, more easily tinkerable-wizh template was a better fit for me and for anyone who wants to make zheir own


lorenziniforce
@lorenziniforce
a smug looking red and white dragoness with curved horns and brown hair.

Andréa de Alarojas

The Winged Star of Tozarra

I'm still sticking with this one because it makes me feel more Intimidating and Dragon (and also some creatures very very close to me use it so its perfect to riff on 'em) but honestly yeah i've noticed it too. it gets... weird when it comes to spacing etc. unfortunately i do not understand CSS well enough to fix it


srxl
@srxl
the profile picture of cohost user @srxl

Ruby

Webdev with too much free time on her hands

huzzah! by the power invested in me through CSS Grid, this template should work a good bit nicer with spacing at different widths. i am going to try and pad this out with a bunch of text so that it becomes long enough to demonstrate that the image stays pinned to the bottom of the box. ah there we go we did it. nice. anyways template in the details below for the curious. the spacing between image and text is still a little inconsistent but i will fiddle with that tomorrow when it is not over an hour past my bedtime.

ok i have done the fiddling and the spacing between text and image will now always be consistent yay. might see about making a generator website for these, that could be a fun little project.

source template (tweaked version of this post for better responsiveness)

template code
<div style="display:grid;grid-template-columns:repeat(6,minmax(0,1fr))">
  <div style="grid-column:1/6;grid-row:1;background-image:linear-gradient(rgb(102,202,218) 0%,white 80%);border:4px solid rgb(42,42,42);border-radius:5px"></div>
  <img src="{image url}" alt="{alt text}" style="grid-row:1;grid-column:5/7;margin:0;align-self:end">
  <div style="grid-row:1;grid-column:1/5;padding:15px;color:rgb(42,42,42);font-family:&quot;courier-std&quot;,courier,monospace;font-weight:bold;line-height:1.25rem;text-align:justify;width:100%">
    <h1 style="font-size:1.5rem;margin:0px">Name</h1>
    <h2 style="font-size:0.8rem;font-style:italic;margin:0px">Tagline</h2>
    <p style="font-size:0.9rem;margin:0px">Post content goes here</p>
  </div>
</div>
<p style="margin: 0; font-size: 0.7rem; text-align: right;">
  <a href="https://cohost.org/srxl/post/6299109-div-style-display">source template</a> (tweaked version of <a href="https://cohost.org/werewolfbarista/post/4598597-img-style-position">this post</a> for better responsiveness)
</p>
syntax highlighting by codehost

customizations:

  • don't forget to replace {image url} and {alt text} with the desired image
  • the background-image can have the colours changed to whatever gradient you want, or replace it with background-color for a solid colour fill
  • just about all styles in the text can be safely tweaked to change spacing, font, or colour
  • you can almost certainly get away with a lot more, if you're a css nerd

You must log in to comment.