Official Forum Skin Work-In-Progress Thread - It's Remodelling Time Guys!

[.Luke]

Well, it's the weekend and I'm finally going to crack down on this generic purple theme we've been stuck with for some time. =P Time to change that and separate ourselves from the rest of genericness. We're the first ever Shantae web community on the Internet darn-it, and still kicking, it's time to make it look like the place to be! (Sorry, full of adreneline from listening to Stardust Utopia! It's really setting that "let's repaint the house" kinda mood for me. :D)

I just downloaded a generic PHPBB3 skin to act as a template while I create the necessary assets, and I gotta say, just looking at all those icons is giving me tons of ideas! My head's swimming with 'em. :D

http://www.awesomestyles.com/phpbb3-styles/view/black

I plan on calling our forum skin ScuttleNights, so it will have a nice, calm, dark night-like theme to it. Expect blue desert sand and lots of moonlight, metaphorically speaking. =P It will be made entirely with pixels if I can, as though it was a UI for an actual Shantae game, (Hint hint!) so a lot of buttons should look clean and very much clickable. ^w^

We're taking any suggestions you guys might have, so feel free to suggest ideas you might have for icons and such, I'm all ears. If you want your room painted black with silver trim, tell me so I can buy some black paint and a silver spray can! Catchin' my drift/analogy? Good because I'm full of team spirit right now woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!!!!!!!!! =P

EDIT : Just got an idea, I think I'll turn the Delete button into a gem with an X engraved in it. >:D

[.Luke]

Okay, I'm getting some of the more basic buttons done GBC style, but I will create other assets with a wider range of colors for that nice, polished look.

Here's some of the icons I got done so far :

These icons will animate when you hover over them! :D Obviously they're meant to compliment a much darker theme than what we're using now. XD

[Paragon-Yoshi]

Looking great so far.

I don't have ideas right now. But I'll see what I can come up with later.

[ShantaeVocaloid]

Okay, I'm getting some of the more basic buttons done GBC style, but I will create other assets with a wider range of colors for that nice, polished look.

Here's some of the icons I got done so far :

These icons will animate when you hover over them! Obviously they're meant to compliment a much darker theme than what we're using now. XD

Those look pretty good - not really too much else I can say! ^^;

[Nai255]

Shiny and spiffin' ^ ^
Say, were there still plans to do Shantae smilies based off her GBC sprites?
I liked the original idea, but thought it'd be better if they were full-color instead of monochrome

[.Luke]

I'm glad everyone's liking the 8-bit color approach to certain elements. ^^ I'll use more complex coloring schemes on other icons like "New Topic", though, because that will clash with what I have in mind for things like polished bars.

Also, more progress on basic forum buttons :



Contact icons will animate when you hover them, as though it were the item select menu in Shantae. XD



Also, Nai, I thought about full color Shantae emoticons, but figured a more minimal color scheme was more like smilies. (I'd probably change the skin to yellow on my old ones though, because with it being all purple is hard to see on CRT montiors. XD) Although If you know how to make full-color smilies work without being direct sprite rips, I'd be plenty interested in that. ^^

[.Luke]

Okay, I think I got all the basic forum buttons covered. XD



Also, having our avatars sparkle while online wouldn't be too feminine, would it? =P (Note : may be hard to see with this painfully bright forum skin.)

[Paragon-Yoshi]

Nice!


I have been thinking as well.

So this skin will be "Scuttle Town Nights"...
I am not sure if Forumotion offers a "Skin Selection", like other forums do.
But if it does (and I don't see why it shouldn't), how about making skins for "Water Town", "Desert Town", "Bandit Town" and "Zombie Caravan" as well?

Of course, it's just optional.
But if you are willing to go the extra mile, why not?

[.Luke]

According to this link, it's not possible to allow users to change the color scheme on Forumotion : http://rpg-directory.com/threads/why-choose-forumotion-as-a-host.21427/

~ Three different temporary themes. Although you don't have the option of allowing your members to choose the skin they want (as with some hosts) you can work on coding one skin while having another one up, and switch between schemes easily. You can have up to three different temporary schemes (not including the one in use by the board) which means you can test something out without it affecting the board. And switching looks does not mean you have to link to all your different graphics again.

It's a great idea and would really only require us to change the color sheme for each theme, and retexture certain buttons appropriately, but even credits can't buy you multiple skins.



It's still possible to create an overall theme/skin for the board, however, so I can continue unabated : http://help.forumotion.com/t13527-how-to-add-a-theme-to-your-board I'm hoping I can change the template myself in the theme's CSS files, so that our user info/avatars are on the left instead of the right, because with it being the reverse at the moment, it's annoyed me since Day 1 on these boards. XD What do you guys think? I wouldn't even have to pay for a template to change that for me if I'm able to change this myself. :D

***

Also, I just got the best idea for full color Shantae smilies ever! Ever heard of Onion Tou? He's a pretty popular international webcomic, and smilies of him are everywhere. Even dA's plz accounts and Manga Tutorials' forums has them at a user's disposal.

Relevant Links :

http://www.onion-club.net/

http://onionlovers.deviantart.com/

http://onionlovers.deviantart.com/journal/Onion-Tou-Emotes-lt-3-235552432

Anyway, what if we were to make chibi Shantae emoticons in a similar style with 64x64 animated frames? I could create a few smilies and post the SVG file to them here so other people could create a wider range of emotions for Shantae and friends! (Just imagine RottyTops leaning backwards with wide, empty white eyes shoeing away bugs on the World Wide Web. Cuteness Level >= 9000!!!!! >=P) Since they're chibis it's really just a matter of dressing them up like the characters and creating the right face to go with it, so it wouldn't terribly hard for other contributors to create smilies with them too, if they want to add to our variety.

So whadda ya think? :D

[.Luke]

Hate double posting, but I just hit a brickwall pretty hard, and right now I'm angrier than an albino in a snow storm.

Forumotion is okay with animated buttons, and changing pretty much any of the images in the Admin panel is enough to train a monkey to do it, but it doesn't have a "pressed" state below the static part of the button. Unless I need to make some changes to the CSS style sheet, there's no obvious way to make icons animate only when they're hovered over, how annoying! WHY WOULD THEY DENY ME SUCH A BASIC FEATURE?!

Venting, Please Wait...:

So I'm going to have to figure this one out while I work on the other forum buttons and decide on the color scheme. (Any help here would be highly appreciated!) Just be glad I don't have access to high-end explosives right now, my inner psyche doesn't tolerate such asinine and archaic limitations very well.

EDIT : Okay, I think I can calm down now, there is a way to make it work, but not with the GUI; I have to add it to the CSS style sheet manually, like so :

Hello !

For rollover buttons within your navbar.
You need first to create double buttons (you also can use 2 single buttons but double is better because browser wont have to load additional button while hovering a button)
In my example button is 100 width and 60 height, so each state of button is half of that.
Normal button 100 * 30 pixels
Hover button 100 * 30

Lets go and set up that button (we will set up a "Register" button.)
► Admin Panel
► Tabsheet Display
► Menu Pictures and Colors ► Pics Management ► Advanced mode
► Register : an empty image here -> https://2img.net/i/fa/empty.gif
► Save
Now lets go to your CSS
► Admin Panel
► Tabsheet Display
► Menu Pictures and Colors ► Colors
► Tabsheet CSS Stylesheet
Add the following lines

Code:

Code: ----------Select content
    #i_icon_mini_register{width:100px; height:30px; background:url("Image'sURL") no-repeat 0 0;}
    #i_icon_mini_register:hover{background:url("Image'sURL") no-repeat 0 -30px;}

Explanation
Width and height are the size of a button, else we would display full button with its two states.
no-repeat 0 0 -> position of button into your graphic file (here means button is top and left of our png file.
no-repeat 0 -30px -> Rollover button, we will display the second button

Example of a double button



And its associated css to work properly

Code:

Code: ----------Select content
    #i_icon_mini_register{width:100px; height:30px; background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 0;}
    #i_icon_mini_register:hover{background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 -30px;}

Then you just have to stick all your buttons in a single graphic file to do the same thing
Example -> http://tutoriel-frenzy.forumactif.com/
(Login button not done yet, all other are working and are on a single png file)

Hopefully, that'll cover it when it's time to install the theme. ^^' Sorry for nearly blowing up there, I go nuts when my imagination is held back by stupid limitations. (Easily why I'll never create content for SRB2 again, or at least custom characters because of that hideous 256 color limit, and the limited number of animation frames made it worse, BLEGH. *vomits*)

SON OF EDIT : Okay, I've downloaded all the images in Pics Management to a folder on my harddrive, that will make figuring out which icons we'll actually need a lot easier. There are so from the theme I downloaded that aren't here on this forum, and visa versa. =P

[.Luke]

More progress! I've got more sprite-based icons than I can be bothered to upload, but all those are done. Now I need to make some gems in GIMP for forum icons, should be fun. ^^

[Paragon-Yoshi]

Looks awesome so far.

It's too bad that Forumotion doesn't allow a Skin Selection.
That would've been great. :/

[BossFight]

This is all looking extremely awesome. Keep up the good work!

Also, I'm all for Shantae-themed emoticons in any form: I would actually use them.

[.Luke]

Thanks for the support guys! That gives me more motivation to keep on going. :D I'm currently making the gem icons now that I know what shape I have in mind. =P And changing where our profiles display on messages was easly changed from the Admin panel, as well as the margins, so there's more room for text as well. (You can read more details about that on the Announcements board.)

It's too bad that Forumotion doesn't allow a Skin Selection.
That would've been great. :/

I know, I would have gladly added more flavors to the default skin otherwise. ;___;

Also, I'm all for Shantae-themed emoticons in any form: I would actually use them.

That's good to know! ^^ After I'm done skinning the boards, I might try making a few smilies so we can see how they'll look in use. =P

[.Luke]

I got Shantae's tiara gem done. :D

Working Resolution :



Forum/Topic Icons : (Or at least their unread versions. When the topic/forum has been read, they will not animate.)



So now that just leaves a few small icons before I can start installing them to the board. =P Are you guys excited? Because I am!

[Maetch]

Geez, what happened? I come online after two days and I see a blue mess on my monitor.

Seriously, lose the blue background. It's a real pain on the eyes, especially with some of the red decals.

[.Luke]

Okay, I got all the colors for our theme set, so that's done, and until I figure out what the names of the graphic buttons are in CSS code, I won't be able to make forum buttons animate the way I want, so they'll be this for the moment. =P Still better than sticking with the default buttons, blegh, but I'll fix as soon as I find an answer on Google, but I think I may just ask the guys on the Forumotion support for help while I do that, because this is really hard to find answers for. ;~;

What do you guys think, so far, though? Any input on color choices will be helpful, and easy to change from the Admin, panel, so it's no trouble to change.

EDIT : I don't know how, but Maetch totally ninja-posted before I did without the forum software even telling me. I just now saw your post! :#

Anyway, yeah, I saw how terrible it was clashing with the red/orange too Maetch, after Paragon mentioned how hard it was to look at in the Announcements topic. XD It's been fixed now with a more suitable purple color, what do you think?

SON OF EDIT : I'm running around in circles trying to find the CSS variables I need to make the icons animate properly, so I've finally opened a support thread on the Forumotion Support Forums, in the hopes that somebody savy enough with forum code will know what to do. In the meantime, I've got some Private Message icons to finish up! That way all the icons will be completely done. (I've even got a Portal icon done encase we enable that sometime in the future. =P )

[.Luke]

Okay, just gotta make those four last Private Message icons, and the overall theme will be done besides the lack of hovering topic icons. ^^ (And of course the multiple citations button!)

Quick Mod Tools buttons :



I figured they should look as powerful as the elemental stones. =P

EDIT : There, every last icon is done, at least! Now to just get that hovering icon issue resolved and we'll be fully skinned up. ^^ What do you guys think so far? The only other major hurdle left are the smileys, and I've actually got a few ideas for basic pixel art ones. >:D Although I've got to take a crack at the chibi idea first! The results could be hilarious and I love animating stuff, so we'll see what happens. :D

[Paragon-Yoshi]

Something's wrong with the Quick Mod Buttons.

The Basket-button is the Delete-Button.
And the actual Basket-Button doesn't appear.

[.Luke]

Wha? The basket's actually important? o_o' *bonks self*

Added a basket icon to the image list, I apologize for thinking it would have been okay to shave a button from the panel; there was additional padding added from its absence that annoyed me anyway, so yeah. ^^# Gotta focus on the radiance of those forum icons while I'm thinking about it.

[MikeHarvey]

Woah! What's going on here? I know I was gone for like a month but... WOW! Guess alot has changed huh? Lovin the 8 bit buttons!

[Paragon-Yoshi]

Glad you decided to come back, MikeHarvery.

Now all we need is a good background-image and the remodelling should be complete, as far as the skin is concerned.

[.Luke]

Haha! I knew the low-color animations would be a hit. =P (The animated icons also use fewer kb than the generic icons did too, surprisingly, so that's good news for any limited-bandwidth users, or anyone still stuck with dial-up.) And I'll chime in with Paragon, it's good to see you here Harvey. ^_^

And yeah, all we need now outside some CSS details is to make the background, and I have just the perfect idea in mind too! I'll make an alpha transparent BG with stars much like the ones in our banner, with silhoettes of Shantae and some buildings from ScuttleTown, which should tile nicely, use less bandwidth than a full-color background, and help reinforce the namesake of our skin, ScuttleNights. =P Anyway, making it right now. XD

EDIT : Well crap, the background won't be visible behind forum posts, I need to figure out how to change that before I add any silhouettes to the star patterns.

SUPER HAPPY SAIYAN EDIT : Apparently it needed some CSS, but with a little googling it just needed this code since we're using PHPBB3. =P Also decided against the silhoettes because they're too distracting, and the background is too small (256x256) for very many of them anyway.

Code:


#wrap{
background: transparent !important;
}

Ha! Also figured out how to hide the * that was in-front our custom ranks with a simple line of code in the field name : &nbsp

Now we have fewer distracting forms text in our messages!

TRIPLE EDIT : Also got the codebox and spoiler tag colors fixed with a little CSS! Now to just get these forum buttons animate properly. >:O

Code:

    .codebox, code{
        background-color: #490BB5 !important;
          border-color: #490BB5 !important;
          color: #FFFFFF !important;
        }
    .codebox.spoiler, code{
        background-color: #490BB5 !important;
          border-color: #490BB5 !important;
          color: #FFFFFF !important;
}

Now all I have to do is fix up the forum jewel icons for extra radiance and slower speed, then that's all I have to do for our board's visual appearance. What do you guys think of the new background? =P

RUNNING RIOT EDIT : BLARGH!!! Too many edits. Anyway, fixing the radiance without breaking the animation is proving deeply troublesome, so that'll have to come later. ;__; I'm itching to get to these smileys, so I declare these boards official skinned, unless you guys have anything to suggest for the background? I won't annouce it until I'm sure we're all in love with the forum skin the way it is.

Also forgot to mention I changed the Main Category's font to Verdana, you guys like it? =P

[Paragon-Yoshi]

You should use the silhouettes.
But only make it so that they'll appear at the very bottom.

Right now, I looks like a generic starry night.
With those silhouettes, it'd give the background a Shantae-theme.

Get to it!

[.Luke]

I hadn't thought about including them in a specific spot other than everywhere at once. XD

Since it's tiled I don't know how I would put them only at the bottom. I think I'll have to create a separate background for that and link it with some CSS; googling it right now.

[Sponsored content]