26. blocks's Comments

not at all!  there are two ways you can go about it:

<h2 class="text-primary" style="border-bottom: 1px dotted #808080;">about me</h2>

1. change text-primary to any of the other text colour classes or remove the class attribute entirely (text-primary, text-secondary, text-danger, text-warning, text-success, text-info)
this will keep the code theme-friendly, but is obviously a bit more limiting in terms of your options ^^'

<h2 style="border-bottom: 1px dotted #808080; color: #000000;">about me</h2>

2. remove the text-primary class and add color: #HEXCODE; to the inline styling :)
if you're going to use a custom colour like this though, you will probably either need to find a colour that's legible on light mode and dark mode, or convert the rest of the html to custom colours as well.  eg. if you change it to a light/pastel colour, then users on light mode themes will have a hard time reading the text.

hope that helps!

I'm able to access it on my end - could potentially be an internet issue?  in the UK one of our biggest internet providers is down right now, I'm not sure how it is where you are.  for me there are some sites that just won't load/seem to have gone down completely.  I'm not sure whether the two are related though.

I've pasted the code below for you, but I'm not sure what that will do to the formatting.  if it look a bit wonky when you paste it into a code editor it may be worth waiting a bit and trying the pastebin link again later.

love what you did with it, glad you like it! :)

this thread might help!

you'll want to copy/paste the code from here: https://pastebin.com/1jVkhLQe

also, if you'd like to see changes you make to the code in real-time, I recommend using circlejourney's live editor: https://th.circlejourney.net/

hope that helps :)

hey!  they already are links, it's just done a little differently than usual:

<div class="col-4 p-1">
  <!-- thumbnail image -->
  <div class="card border-0" style="background-image: url(https://media.discordapp.net/attachments/730913454726316074/900123823876210748/PH4.png); background-size: cover; background-position: center; height: 150px;"></div>
           
  <!-- character info -->
  <h5 class="text-center mb-0 text-primary">character name</h5>
  <p class="text-center text-secondary">pro/nouns</p>
  <a href="#" class="stretched-link"></a> <!-- link to oc's bio -->
</div>

the anchor <a> element in blue is for the link.  the class="stretched-link" part means that it'll affect the thumbnail image, name, and pronouns - this way people can click on any of those three elements and be taken to the character profile :-)
just paste the url into the href="#" attribute where the # is, and you should be good to go!

if you want to make it so that only the name links to the profile, remove the <a> tag, and replace the character name line with:
<h5 class="text-center mb-0 text-primary"><a href="#">character name</a></h5>
( again, the # should be replaced with a link to the character profile )

hope that helps!

hey!  there are a couple ways to fix it, yes :-)

1. make the text smaller - for this, try replacing display-2 with display-3 or display-4:
  <h1 class="display-3 text-center text-primary mb-0">username</h1>
  <h1 class="display-4 text-center text-primary mb-0">username</h1>
  ( you could also try removing the display class entirely )

2. have the text break to a new line:
  <h1 class="display-4 text-center text-primary mb-0" style="word-wrap: break-word;">username</h1>

3. make the first column wider + the second one narrower:
   line 13: <div class="col-md-5 p-1">
   line 27: <div class="col-md-7 p-1">

4. make the main container wider:
  line 1: <div class="container" style="max-width: 900px;">

yep, feel free!

aaa thanks! <3

I promise HTML isn't as scary as it looks! I'll leave some resources here for you in case they're helpful (o゜▽゜)o☆

some examples of what basic elements look like:
text: <p>your text here!</p>, <h1>your text here!</h1>
links: <a href="URL">link name here</a>
images: <img src="image URL here">, <div style="background-image: url(image URL here);"></div>

the text in <> brackets is known as a 'tag', for example <p></p> for paragraphs.  usually the content that you see on the page is found in-between the tags: <p>text here</p>
for links, you need to use the href="URL" attribute in the <a></a> tag to point to the site you wanna link to.
for images, you use a different attribute, src="URL", to point to the image you want to show.

this thread goes over how to add codes to your user + character profiles, and this thread is a good resource for figuring out some of the basics :-)
I'd also recommend W3Schools as a good reference site, and AviCode has a HTML basics tutorial here! 

this code is a fairly simple one, and it has a couple comments to signpost what each section of the code does - I always recommend editing codes in the Circlejourney live code editor!
in the editor, text fields should be highlighted in white, and URLs for images and links are usually yellow ^^
comments will show up in grey and look like this: <!-- comment here -->

yep, it's F2U!

aa thanks!  and ye, I seem to be a little hyperfixated on the old HTML at the moment haha :D