Noob Questions

AresMUSH
1

Hey, everyone. Got some questions, because I have no idea what I’m doing here.

  1. How do I set a different color for table of contents boxes? With a dark theme, the standard pale grey makes the text in the box unreadable.
  2. How can I set it to toss in a divider after a level-two header?
  3. I can’t figure out how to change the font for the life of me. I see the CSS code, but I think I am doing it wrong.
2

#1: You want the .toc style. Something like:

.toc {
  background-color: #222;
}

#2: You could use a border:

h2 {
 border-bottom: 1px solid $border-color;
}

#3: You can use the instructions here to set up a custom font: Configuring the Web Portal. - AresMUSH

3

Thank you so much!

Some follow-up and questions. I apologize in advance if I am asking for too much handholding, but I don’t know the first thing about CSS. I’m trying to teach myself, but it’s slow going. I haven’t touched web design stuff since HTML and some very basic JavaScript in the late 90s.

  1. Is there a list somewhere of color codes that the code understands?

  2. Aha, got it!

  3. I was trying to use that, but I think I got hung up on the part in the example that goes “sans-serif”. What information needs to go after the font family and where can I find it in the Google fonts information?

And an all new #4: Basic custom CSS question: can I just add these to the end of the list, or is there some order that things needs to be in?

4

No worries, the forum is here to help. You might get faster and more useful responses from the discord though - there are members who know a lot more CSS than me even. :slight_smile: And it’s probably easier to chat back and forth live. But regardless, I’m happy to answer here as best I can.

  1. It’s standard HTML color codes. You can find them anywhere. For example: https://htmlcolorcodes.com/

  2. The font-family css is a list of fonts. So for instance font-family: 'Roboto', sans-serif; tells the browser to use the Roboto font (which is your custom one, loaded from the import statement) but fall back to the browser’s built-in sans-serif font if it can’t find one. Normally you’d just use either serif or sans-serif there depending on your font style preference.

  3. CSS processes in the order written, so last one wins. But as long as your CSS definitions don’t collide or overlap, the order won’t matter.