Custom Boards Skin - Rune Wars Renekton

Sir ArmaMalum·Oct 8, 2014·7 votes·4,204 views

Hey all, thought I'd try my hand at a Board skin as well. This is actually my first time working with CSS and awhile since I've coded in general, so would really like feedback and/or tips for any ones I may do in the future (it was pretty fun messing around with this).

Source code by Icedteaisgood. To put it in perspective Iced did 95% of the work and I muddled around with the other 5%.

Download Stylish if you haven't already then the aforementioned Boards Skin here

You can also grab other themes, like a Worlds Theme and a Blood Moon Akali Theme

Preview: http://i.imgur.com/RQPWf1z.jpg

Added to base code: Various tiny positioning tweaks OP comment marker

I'm learning as I go so I may add more on as I figure out how to work CSS.

19 Comments

Sir FrosthavenOct 8, 20146 votes

I'm really loving what the community is creating. Great work Sir!

Sir ArmaMalumOct 8, 20141 votes

Thank ya kindly Frost. I must say it's a bit of an eye opener. This is the first time I've worked with UI based code and I will have to say I respect your work all the more now. And hell, I didn't even do the code structure, I just changes some assets and changed some pixel location values (I'm sure I'm getting this jargon wrong) :P

IcedteaisgoodOct 8, 20143 votes

Awesome! Glad to see more of these!

Hey all, thought I'd try my hand at a Board skin as well. This is actually my first time working with CSS and awhile since I've coded in general, so would really like feedback and/or tips for any ones I may do in the future (it was pretty fun messing around with this).

Learn these. Probably the hardest and most important part (of making custom styles) is just making sure you have the right element selected... and making sure it doesn't conflict across the 100 various different pages. You have to select the exact element you want, while excluding all the others.

For instance, body div p {border:red;} might give you a red border around paragraphs on this page, just like you wanted, but then it might go and completely mess things up on the redtracker page or the post history page or something. You have to specifically select the exact element you want while excluding all the ones you don't. Styling it from there is pretty easy.

By the way, I learned CSS the exact same way, except it was styling the IGN Boards back in 2002 or something. I actually think it's a pretty decent way to learn. Just focus on properly selecting and styling one element at a time, and your knowledge will grow.

Sir ArmaMalumOct 8, 20142 votes

Freaking awesome! Thanks man!

This also happens to be going in parallel with me using Unity with my university's gaming project group, so I'll be crunching a lot of code over the next few months, which is freakin sweet.

Can't thank you enough ^_^

MrBuffingtonOct 8, 20141 votes

sweeeeet :D maybe I should try something out XD (I have basically no programming experience)

Sir ArmaMalumOct 8, 20142 votes

Unless you want to move some things around it's not too bad. You have to link a few images (2 backgrounds and anything that you want a different color that isn't text essentially).

If you can use an image editor like GIMP then the only other thing you need is an Imgur account XD

MrBuffingtonOct 8, 20141 votes

I'll probably start to fiddle around in a few days, got a bit of work to get through (I should get off boards...) and still don't have an idea on what I should change it to

Fires of JusticeOct 8, 20141 votes

Just installed Stylish and this skin. THIS IS SO AWESOME WOW!!!!!!!!! Could possibly have one for Thunderlord Volibear and a Kayle? Have all of my upvotes, beautiful stuff!

Sir ArmaMalumOct 8, 20141 votes

Thanks! And hey toss a good bit of prasie to Icedteaisgood here. Without his source code I simply would not have been able to do this. Not to mention, compared to his source code, I really didn't add too much :P

FOODFOODOct 8, 20141 votes

Nice jorb! Can someone create a simple skin? I want one that just makes things easier to read... like, light grey background, dark letters, etc. Wish I knew how to do it, else I'd make one myself!

Anyways, nice job! Looks really really cool!

Sir ArmaMalumOct 8, 20142 votes

Someone already jumped on a "at night" setting here that I think might fit what you're looking for. And thank you!

Duke DryfockerOct 8, 20141 votes

How about addressing the plague called IP Farming Bots before it drives away all of your customers? Those of you who haven't seen a Bot in-game yet will. Trust me you will. And trolling my statement like your about to will feel like denying the world is round after you watch two bots on your team feed the enemy to victory.

Sir ArmaMalumOct 8, 20142 votes

Uh........not a Red, sorry?

FOODFOODOct 8, 20141 votes

Just tried out that "at night" one... not a huge fan, but it's a step in the right direction. I didn't like the hover-over effect, it was really laggy.

Sir ArmaMalumOct 8, 20141 votes

Yeah unfortunately all these skins will tax your computer a bit more than the base as it's truly a 'skin' over the base, meaning the page effectively has to be rendered twice. Are the other three working all right for you? (If you've tried them of course)

IcedteaisgoodOct 8, 20141 votes

I think a more plain style would probably run just fine. Stacking fixed background images and various opacities is what really tends to bog browsers down. And I can't imagine having 1+ megabyte background images helps. At the same time, I find it makes the page feel way more... "alive" I guess? Compared to the "dead"ness of one flat colour over another.

AzshrebOct 9, 20141 votes

Great work! I found this is be the most readable skin yet (out of the ones that aren't just a solid color) and the OP comment tracker is a great addition. I hope you don't mind if I use it with my own skin(s).

Also I think it would be neat to have a Mega Thread for people to share their various skins/themes, code tweaks, and icons (for example I'm thinking of making a skull/pumpkin out of the Riot Fist for Halloween). But I don't think that I'm the best suited to make the thread considering I didn't write the code, and I'm not even sure if a non-Rioter is technically allowed to make a Mega Thread.

Sir ArmaMalumOct 9, 20141 votes

Thank you! You're welcome to the code, just be sure to credit icedteaisgood as that still majority his work.

As far as a megethread goes players can easily do that but I just haven't had the time yet (to also keep up with it) and won't until tommorrow. Otherwise I would've made o already XD