I’m excited to share our latest WA CSS designer interview with you! Damion Otter (theme designer (WA + custom), TTRPG player, Venerable WA Enchanter and Legendary Worldsmith, codex editor, and worldbuilder) has answers for us today. You might know him as Oneriwien on WA and the WA Discord. His humble answers don’t negate the strong contributions he’s made in WA.

I hope you enjoy reading his interview as much as I did!

What we’ll cover:

Interview with Damion Otter
Creating a slide out Global Announcement (Master +)
Creating NO CSS panel (Grandmaster +)
Search bar upgrade (Journeyman +)

Tell us a bit about you and your WA worlds. What made you start your worlds?

Might as well start off with my real name, Damion, but most people in my life know me as Oner by now. My setting is Ravare, a Nobledark Fantasy setting with horror influences throughout. The people of the world are cruel, the Divine are ruthless and uncaring, and the creatures of the night are ever-present.

I have been working on this setting, or variants of it, since I was a small child. The name Ravare has been with me longer than Oneriwien. So it is only natural I expanded upon it once I started running my own D&D campaigns.

How long have you been world building? How long have you been on WA?

Oh man. Since I was in 1st grade (7-8 years old) is the oldest I have actual notes from. We played silly games during gym based on Pokemon but we had the “elemental powers”. The notes from these days are chaotic and basically unusable, but they exist!

WorldAnvil I have the exact date: “Member Since: 16 Jan, 2018”. I bought guild membership pretty sure that same week.

What do you consider to be the most outstanding aspect of your world(s)?

While the Revare Formatting article may not be a lore-filled page that excites you or helps you understand Ravare, this page is the lifeblood behind all of Ravare’s work. Everyone who writes for Ravare likely opens this page a few times a week.

I also love the new navigational sidebar I have. But others have that. Haha.

Do you consider yourself a gamer, a writer, an artist, simply a world builder, a mix, or something else entirely?

I’m a TTRPG player to the core, but I LOVE world-building.

What got you involved in world building and what are your specialties or favorite world building topics?

The one thing my players can confirm and I am most proud of is how interconnected every last thing is. Two of them have entire notebooks dedicated to unraveling the mysteries of Ravare. Be it locations, people, nations, etc. I am really good at making everything feel alive, connected, and out to get you.

So in other words, I really like writing conspiracy theories that my players eat up.

Why did you start customizing your world?

Fun fact, I was likely one of the first 10 worlds to start fully CSSing everything. Hell, I would be even so bold as to say a good portion of CSS classes exist because of my fiddling. I saw the potential in visual world customization since the very beginning.

I know that doesn’t answer WHY so much. I guess the why is because I find it fun? I’m good at it? I don’t know. Haha.

How important is the look of your world(s) to your readers?

It sets both the mood and the tone of the world. If I had a less somber theme it would break immersion.

Are you a programmer by trade or education? Did you know CSS before coming to World Anvil?

I want to get into front-end web design as an actual career. I was dabbling in CSS for a long time then actually took full classes about 4 months before WorldAnvil showed up on my radar.

Do you have a tip or snippet of commented CSS or BBcode to share for the readers?

Slide Out Global Announcement

Well, let’s try this pretty simple one! Make your GLOBAL ARTICLE CONTENT BLOCK show up as something off to the left side instead of in the way of the rest of your article.

(Interviewer’s note: This is similar to the menu in Ran’s interview, but this one uses the new Global Content, so Damion and I wanted to include it.)

/* Expanding Sidebar from Global Announcements */

.world-global-annnouncement {
  background: silver;
  position: fixed;
  width: 340px; /* You can make this smaller, but make 
   sure you increase the left: by the amount you change. */
  top: 20px;
  left: -320px; /* This places it off-screen. */
  padding: 20px;
  padding-left: 30px;
  transition: left 0.8s;
  border-right: 12px solid darkgray;
  box-shadow: 6px 6px 12px black, inset 0px 0px 4px 1px rgba(0,0,0,0.75);;
}

.world-global-annnouncement:hover {
  left: -10px; /* this makes it slide-out on hover. */
}

NO CSS Needed panel

Another pretty newbie friendly secondary panel with NO CSS NEEDED: this just makes another side panel under your first if you set it as SIDEBAR: BOTTOM

[container: m-t-10 panel panel-default][container: panel-body]

[/container][/container]

Search Bar Upgrade

Really snazzy looking search bar that never gets in the way of your cover images!


/* Search Bar */

.user-css .search-form .typeahead-input {
    width: 240px;
    height: 22px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.2;
    color: black;
    background-color: RGBA(210, 210, 210, 0);
    background-image: none;
    box-shadow: 0 0 4px #666;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.user-css .search-form .typeahead-input:active {
    border-color: black;
    color: black;
}

.user-css .search-form button {
    display: none;
}

A Special Note from Damion

If a public theme appears broken or has a few issues, please find out who made it and message them. Not Dimitris! We can’t fix what we don’t know about. The poor man has enough to do.

(Interviewer’s note: The list of themes and their creators is available in the WA codex here.)