Improving At HTML!

Introduction

Hey there! Atlas here, just wanted to leave a little update about the website. For more updates, be sure to visit the Website Updates category.

The Vision

Although this website was originally set up using a WordPress template, I knew I wanted to add some unique elements to it. More specifically, designing it to resemble a wiki page. I drew a lot of inspiration from Fandom pages because they were a key tool in the communication between me and Ace. As like minded as we are, it’s hard to describe a game to someone that hasn’t played it.

Links… They’re Everywhere!

That’s where hyperlinks come in. When a character, location, or quest is mentioned, a link will be embedded in the title. This allows us to connect all of Parallax’s elements together, making sure Ace and I are on the same page (literally). But personally, I didn’t like the default color scheme for these links, so I decided to change it.

Decorations

While I’m certainly not a professional web designer, I used to practice learning HTML by creating my own website about superheroes. I discovered this amazing website called w3schools, and I used their section about Text Decoration to remove the underline from a link, change its standard text color, and change its text color when the mouse hovers over it. I’ve always enjoyed it when buttons darken when you hover over them, so I chose to do that with the text.

Since WordPress pages doesn’t treat the code section of individual pages as a standard HTML layout (with a head, body, and style tags), I used the Customization menu to add additional CSS.

To the left, you’ll see that there’s four tags split into two groups. The top two are for a standard link that isn’t interacted with. The bottom two are the same color, but darker, and they’re used for when the mouse hovers over the link or is clicked.

Next, I had to import the CSS into each HTML page. I did this using a “<div>” command and attaching the style to the tag. To keep everything formatted correctly, I placed the opening tag at the very top of the page, and the closing tag at the bottom.

This allowed me to create custom div tags that I then applied to individual links throughout articles. The changes are shown below.

Standard Link

Link when interacted with

Reflection

All-in-all, the pages felt more real and personal because I’m the type of person who can’t settle on just one theme. I’m still learning HTML, but this much I do know: if I put up with Ace’s crazy ideas, he’s gotta put up with my aesthetic obsession! 

Thanks for Reading!

~ Atlas from Atomic Rush Studios

“Rushers Stick Together”