Skip to main content

Forums » Art & Creativity » Template for Overwatch Characters

Hey! I just got done making a custom Overwatch template just for RPR. Mostly in preparation for porting a couple of my Overwatch characters onto RPR finally.

You can view it on Artemis, my guinea pig for my rusty as hell CSS skills.

If you're an Epic Member and want to use it, it's available with the name "Welcome to the Watch".

:D

Again, my skills are a little rusty, so there might be some things I still have to fix. Overall, I'm pretty pleased with the simplistic look to it while keeping true to the overall colour scheme and theme of Overwatch. > o < If there's anything you can point out, I'll try to fix them!

Any suggestions and fixes + the required CSS to make it happen is highly appreciated. ; v ; /
Kim Site Admin

Oooooooh this is impressive as heck!!

I notice it doesn't seem to have mobile support -- maybe you can try your hand at that next? :D We have some starter CSS to get you pushed off into the deeper waters of responsiveness: http://www.rprepository.com/help/custom-templates#384
FreeJayFly Topic Starter

I used BlueStacks to help me out a bit since I don't always have my phone on hand on the weekdays. I did what I could to make it mobile friendly, but I'm not sure how to fix the image I made for the template in order to show up properly on the screen. ; o ;
I dont play overwatch but this template IS AWESOME.
Great job Jay!
Nicely done.
Kim Site Admin

Even if you don't have a phone, you can test just by making your browser window narrower on your desktop. :)

Your responsive translation actually came out great, it worked really well when I tested it. I have a few tidbits that might help to tighten it further if you want them:
Code:
@media screen and (max-width: 900px) { .mobilesupportenabled #headerholder {background: #091b29;} .mobilesupportenabled #footer {background-position: right bottom; padding-bottom: 80px;} } @media screen and (max-width: 500px) { .mobilesupportenabled #characterName {padding-top: 0; margin-top: 0;} .mobilesupportenabled #playedBy {padding-top: 0;} }

Since your header was designed to work at a fixed width, I'd swap to color when the screen starts changing sizes all unpredictably.
FreeJayFly Topic Starter

Thanks for the tip about making a narrower window. Honestly, never occurred to me till now. :'D

Went ahead and changed the mobile coding so now it does do the colour change instead of keeping the header image. :D Actually looking at the coding, I might play with it a bit and see about making two different headers that are mobile friendly and see how that goes.

At the moment , since I also changed some of the header content coding, I'm currently tearing my hair out over the navigation and how it won't cooperate with me. @ v @

EDIT: Sanne just helped me get over what was causing me misery, haha. So hopefully it's all good now~ ; v ;
Pharah (played anonymously)

This is just what I needed, thank you so much c:
Soldier 76 (played by Gwendolyne)

Thank you so muuuuch!

You are on: Forums » Art & Creativity » Template for Overwatch Characters

Moderators: Mina, Keke, Cass, Auberon, Claine, Ilmarinen, Ben, Darth_Angelus