Hey, worldsmiths! We have a treat for you!
I had the privilege of interviewing Mapping Dragon this month. You might know her as Ran on the WA discord. She’ll be sharing a super cool CSS/container trick with us.
What we’ll cover:
- Interview with MappingDragon
- Slide Out Navigation Bar – Grandmaster +
Interview with MappingDragon
Tell us a bit about you and your WA worlds. What made you start your worlds?
I’ve been playing table-top roleplaying games ever since I was young. It was a hobby that turned into a passion. I took any classes I could on world-building and game-design and was always creating my own worlds to tell a unique and fantastical story, this is actually how I met my partner who has been a pillar of strength in my work. I’ve always had a fascination and love for creating my worlds and settings for my players to experience. This passion turned into what my current project is, Cretia which World Anvil is hosting.
I’ve been working on this concept of a living world, where a game world lives and reacts to the involved players. I have this vision that when the setting is lore and rule complete, that other GM’s and players who run games within the setting can submit what happened within their own campaigns for inclusion to the lore. Cretia will be an ever-growing and changing world which I found World Anvil to be the perfect tool to complete this project.
I work as a technical writer and have found that because of this; It has given me more confidence in developing my world publicly.
How long have you been world-building? How long have you been on WA?
I’ve been world-building for over 10 years now. Started when I was young, and if I’m to be honest, it’s always been one of my favorite things to do. I never grow tired of it and for as long as I can remember, I was always creating my intricate worlds. I still have a massive repository of all the worlds I’ve created before cloud saving was a thing! Makes me sound old when I say that, doesn’t it?
I’ve been on World Anvil for six months now. I came from Obsidian Portal because of the bountiful amount of features, constant updates, and the thriving community on WA. It has empowered my world-building and I’ve been able to learn quite a lot from fellow World Anvil users.
What do you consider to be the most outstanding aspect of your world(s)? (Link to article or category?)
I’m proud of my introduction page to Cretia. I spent a considerable amount of time tailoring it to introduce readers to the world quickly, understand what the races are, and how they live in the world. The introduction page does this while providing several launching points for deeper dives into the world at large. You can read Cretia’s introduction here.
Do you consider yourself a gamer, a writer, an artist, simply a world builder, a mix, or something else entirely?
I consider myself all the above; I dabble in many aspects of world-building, and I believe it all originated from playing video games and other board/card games from a young age. The work that other people put into their own worlds and settings, has always fascinated me. It’s hard to define me to a single category since I do a little of everything to achieve progress.
What got you involved in world-building and what are your specialties or favorite world-building topics?
Games, such as RPG’s and Tabletop games got me into world-building. This was only fueled more by the first Dragonlance books I read when I was a kid. Since I come from a background of gaming, I have this intrinsic ability for rule development, which aligns very well with my technical writing profession. I really enjoy creating the rules behind the lore of my worlds. I excel at anything that requires mechanics or rules to provide believability.
Why did you start customizing your world?
I firmly believe that the delivery of the world is just as important as its context. The visual aspect of the world helps readers feel more immersed in the world. World Anvil has plenty of good templates that instantly give your world a pleasant and consistent presentation. I chose one of the available themes as a base. I then started making light color changes and font adjustments, which eventually spiraled out into creating a robust, unique theme to add to Cretia’s own personality and feel.
How important is the look of your world(s) to your readers?
It’s important. Knowing from my experience as a web developer and designer, a poor visual representation of your work will drive the audience away. You need to make them comfortable and ensure they enjoy reading your articles. To achieve this, avoid obtrusive colors that distract or impair readability and ensure that your work scales nicely on multiple resolutions. It is also important to have consistency in your work as it helps guide the readers and gives them expectations of how to find information while navigating to other articles.
Another tip is usually in a simple design, which is usually the better approach when creating your theme. You also want to ensure you adhere to the Web Content Accessibility Guidelines found here.
Are you a programmer by trade or education? Did you know CSS before coming to World Anvil?
I come from a technical background of a software engineer and web developer by education and trade. Because of my experience, I was very familiar with CSS before coming to World Anvil, but I had to relearn much as my knowledge of CSS was severely outdated.
Slide Out Navigation Menu: For Grandmaster+
Do you have a tip or snippet of commented CSS or BBCode to share for the readers?
A fly-out navigation tab for your articles is a useful tool and feature to help your readers. It enables you to provide a table of contents, a box with legends, or supplementary images. Using the BBCode containers and the power of CSS3, we’re able to create a highly responsive fly-out menu. You can read more in-depth information on how to achieve this with the tutorial I wrote for other World Anvil users to adapt to their worlds!
The CSS Navigation Fly-out is possibly one of the more ambitious and advanced CSS projects I took on recently. I wanted to give my readers a more intuitive way of navigating through my articles. Using a fixed box just wasn’t delivering the innovative and responsive design I had envisioned. So naturally, I sat down, grabbed a cup of coffee and spent several hours doing exploratory work on the menu I wanted. I knew I needed to implement advanced CSS features, such as animation and working with multiple containers in unison. There are several pieces that all had to work together to achieve the effect I ultimately wanted.
The last piece to get it all working was ingenious on my part. With World Anvil, there are some limitations with what you can do in CSS, and one of those limitations which can, and will break your page is using quotes ” ” or apostrophes ’ ’. A key part of the fly-out menu to render and function is done by giving the containers a string to render the tab for the menu to slide out on the mouse hover. Now because I couldn’t do this: content: ‘Table of Contents’, as the string identifiers would break the page and functionality, I came up with the solution of getting the string from the class itself! So, I renamed the class to .navigation, and retrieved it to populate the content attribute like this: content: attr(class); .
Viola, a fully functioning CSS powered fly-out menu!
How should people reach you with questions?
On Discord send me a private message. That’s the best ways to reach me! (@Ran#8368) You can leave a comment on World Anvil too.
A note of thanks from Ran
I want to give special thanks to Orion_TheHunter, my partner in all of this. She’s been an anchor in the tempest that is life and this project. She is my chief editor for Cretia and advisor. She has added a great amount of lore and flavor to Cretia like the Kitsune race.
She is a skilled artist and an amazing writer and has helped me grow as a writer and artist myself. Thank you, without you, Cretia wouldn’t be what it is now.
Quick Tips
I have a few quick tips to share before we go.
You may want to consider identifying your private articles. I add [] to the beginning of my titles so I can easily tell if it’s private or not. If an article with [] shows up when I look at my world in a browser as a guest, I know I forgot to set it to private and can quickly remedy the situation.
Can’t remember which direction is which in a list of CSS directional properties? They go in the same order as a clock.
So when you see:
margin: 10px 0 10px 0;
You know it’s the top and bottom that are given a margin of 10 pixels.
Coming Soon
In our next installment of WA coding tricks we’ll cover the following:
- A little more direction on what not to tinker with in your WA CSS
- Tips for organizing your code
- Fancy Headers – Journeyman +
- Using Bootstrap for pages that are pretty on multiple devices – Grandmaster +
Make Your World Look Awesome!
Let us know how you use these ideas and let MappingDragon know you appreciated the interview and tips. We’d love to see your creations and your slide out menus! Until next time, my fellow smiths. Go light up the forge!
