Re-imagining: Sidebar Tabs (in General)

QBPixel Sage July 3 2006 1:25 PM EDT

Now that we got User Profiles out of the way, I'd like to bring up a new topic. (Reason for separating re-imagine threads is to organize topics of discussion.)

The sidebar is an important feature, as it gives users an easy way to navigate through the website. Verifex mocked up a new tab system (which I redid). It looks like a nice system, and does some things for organizing the sidebar a bit.

My first entry for the sidebar was similar to what we have right now. Click here to check out two themes applied to the theme engine. I think it works pretty nicely.

But, I liked the tab system, so I started working on it. Its not complete yet, but the first tab section is working fine. But there's a problem. Its taking a terribly long time to CSS (theme) it, considering each element (each tab and each link under the tabs) needs to be properly placed using CSS. Plus, I'm not even sure yet if it works on windows IE, which may throw off the placement of these elements.

So here's the dilemma. Do we keep what I first mocked up (easy to theme and straightforward), or do we continue with the tab system (much more organized and revamped, though a pain to CSS)? Jonathan wanted to re-imagine the theme engine because it was outdated, and (for me at least) was a serious pain to theme. So we're bringing it up to date, and we're TRYING to make it easier to theme.

Tabs in or out? You decide, but Jon has the final say.

AdminShade July 3 2006 2:29 PM EDT

A button which will inspect yourself.

QBPixel Sage July 3 2006 2:41 PM EDT

@Shade: I'll try to implement that somewhere.

While I'm at the sidebar, does anyone use the "Specify..." link while viewing fav opponents? If not, it'd be nice to just remove that function.

AdminQBnovice [Cult of the Valaraukar] July 3 2006 2:45 PM EDT

I have used it, mainly for an easy link to xfers.

QBPixel Sage July 3 2006 2:50 PM EDT

Ah, smart, never thought of that. Guess it'll stay then.

Flamey July 3 2006 2:56 PM EDT

i've used specify to search for certain characters of which i do not know the user name of.

i don't think there is a way around that.

QBJohnnywas July 3 2006 3:09 PM EDT

Hey, Shade, that's been top of my ongoing wishlist for ages!

It's called The Johnnywas Is Lazy Link. At least in my head anyway....;)

QBPixel Sage July 3 2006 3:29 PM EDT

Like this, Shade?

BootyGod July 3 2006 3:32 PM EDT

just to say... this being my first look at it... I like it alot. Interesting really.

Vicious Cat July 3 2006 3:50 PM EDT

Please can we have a Heal button on the sidebar?
Useful for those awkward times at work when you need to stop playing for a while (not that I would obviously...)

Xenko July 3 2006 3:52 PM EDT

I am not sure whether this is the case (since I don't know CSS very well), but if the tab system is a pain because each TAB and link needs to be properly placed with CSS, would this have a large effect on themeing?

Wouldn't a new theme just take the default theme, and adjust the colours/images, without touching the placement of the elements themselves? Thus, making it initially would be a big pain, but re-theming it later would not be that much more difficult than a non-tab layout?

If this is the case, I would like tabs since they look very professional and organized. Let me know if my logic is flawed somehow since I have very little idea how CSS works.

QBJohnnywas July 3 2006 3:53 PM EDT

Pixel, in all seriousness, do you know how long I've been asking for that? I think the first time was back in February 2005, and then at least once a month for about 6 months then every change month until earlier this year when I gave up!!

If you implement that then I shall...oh I dunno throw a great big party at my house!

BootyGod July 3 2006 3:54 PM EDT

I take it you mean the healing link? lol confusifying.

QBJohnnywas July 3 2006 4:03 PM EDT

I'm talking about the 'your account' button... one single click to see my user page....because I'm lazy!

BootyGod July 3 2006 4:05 PM EDT

Hmm okay.

QBPixel Sage July 3 2006 4:06 PM EDT

@Vicious Cat: Sorry, don't think so. That's what the home page is for. If we start sticking everything we want in the sidebar, it'll become messy. Its good to keep the sidebar as simple as possible... which is why I think even the Stats section should be taken out and put in the community (while the "Top Clans" stats should be a submenu of "Clans").

@Kultur: Incorrect. Making a theme isn't just about changing colors and images. The sizes of elements (text, images, spacing in backdrops, sections) changes from theme to theme. Sure, making a color adjustment is easy, but that's not the point of the theme engine. The theme engine is supposed to allow the user to make a fully customizable theme, as easy as possible. In example: If I changed the height of the header image and just the header image, I'd have to go through and change the height position of all the elements of the tabbing system (which is a LOT).

@Johnnywas: Its just for you =)

... and Shade =P

QBPixel Sage July 3 2006 4:34 PM EDT

I've talked to Verifex on this issue. We've come up with a goal, and that is to re-organize the sidebar so its as simple as possible, but has all the capabilities we need it to have. And easy to theme, but with a lot of capabilities as far as theming goes.

Its back to the white board!

Vicious Cat July 3 2006 5:16 PM EDT

np PS :-)
Cheers for the answer

QBJohnnywas July 3 2006 5:25 PM EDT

Pixel: wow!

QBPixel Sage July 3 2006 6:14 PM EDT

Alrighty, here's the new mockup! It makes good use of sub-menus. Also, this will be the new Blue/Gray default theme if this passes. How about a new name besides Blue/Gray? Blugray? Haha.

Here was the list I used to make this: Click!

th00p July 3 2006 6:22 PM EDT

So, um, everyone in CB line up and bow down?

BlueWolf July 3 2006 6:45 PM EDT

dude that's awesome!! I can't wait until the rest of it is finished!!

QBPixel Sage July 3 2006 6:53 PM EDT

Okay, I got the main HTML code for the sidebar finished, all tagged and ID'd. Now, to apply the default theme...

Gallatin [Thanoscopter And You] July 3 2006 7:48 PM EDT

Implement the thing now! I can't wait! XD

QBPixel Sage July 3 2006 9:17 PM EDT

Still no menu functionality; that will come later. Check this out for the latest build. Only the theme Blue Tabs is integrated with the new engine.

AdminJonathan July 3 2006 9:23 PM EDT

I vote for the unified sidebar. (And I like the look, a lot. Nice work guys!)

QBPixel Sage July 3 2006 9:44 PM EDT

Unified sidebar? What makes it unified? *confused*

Xenko July 3 2006 9:50 PM EDT

New sidebar looks awesome Pixel. Keep up the good work.

AdminJonathan July 3 2006 10:20 PM EDT

"unified" just sounds better than "tab-less" :)

QBPixel Sage July 3 2006 10:59 PM EDT

Yay, tabs scrapped!

An update! That's right. You can now click on "Your Account" to view the user profile page. The two columns have been moved under the profile section. Much more organized. Just for kicks, you can click "view" to view your active character.

Click for the update!

QBPixel Sage July 4 2006 12:01 AM EDT

You may now click on "settings" to view the settings page. As you can see, it it HIGHLY simplified. Jon went a bit crazy with all the extra text ;)

AdminJonathan July 4 2006 1:33 AM EDT

is this the link you meant?

AdminQBnovice [Cult of the Valaraukar] July 4 2006 1:36 AM EDT


QBPixel Sage July 4 2006 1:41 AM EDT

Oops, that is the link I meant =D. Anyways, moved the update profile feature. Now you can click on Your Account, and you'll see an "Update!" link next to Profile. Click on that, and you have the update page. I moved the change photo feature to this page, don't know why it wasn't here in the first place...

AdminQBVerifex [Serenity In Chaos] July 4 2006 4:05 AM EDT

The interface looks clean and pretty simple too. Great job Pixel!

Don't forget stats, and the section for add/delete/higher/lower/reset/favoritfy

QBJohnnywas July 4 2006 4:15 AM EDT

Like it. The interface is similar enough to the old that it feels nice but having things laid out in a more graphically pleasing form makes it smoother somehow.

One thing though, I understand that this is work in progress and all but is the view character link supposed to remove the lefthand frame?

Otherwise I like what I'm seeing!

Can we have the same options for settings though, like the ability to remove the logo from the left hand frame for those of us doing their best to camouflage CB at work!

AdminQBGentlemanLoser [{END}] July 4 2006 4:28 AM EDT

Don't know if this is a problem with my browser, but some of the links in the sidebar don't appear until I mouse over them. :/

Apart from that it looks awesome! :D

QBPixel Sage July 4 2006 1:19 PM EDT

@Verifex: Yay, Verifex likes it! Anyways, the opponent functions will be in a menu. See Favorite >? The arrow signifies a drop-down menu. To change to standard, you activate the drop-down menu in the opponents menu. Did that make sense?

@Johnnywas: Thanks =D. The view link isn't supposed to do that... weird. It works fine for me! Oh, and removing the logo will be possible, of course.

@GL: That is a problem... hmmm...

QBPixel Sage July 4 2006 3:41 PM EDT

Updated. Now you can collapse the individual sections by clicking on the tab's name.

QBPixel Sage July 4 2006 6:31 PM EDT

Big update ~ Drop-down menus now are there! Themable as well.

Gallatin [Thanoscopter And You] July 4 2006 10:28 PM EDT

Where's the link?

Xenko July 4 2006 10:33 PM EDT

I believe this is the link

Flamey July 4 2006 10:59 PM EDT

profile page looks cool.

the dropdown list for the buttons on the right drop on the left that is a little off-putting, but i guess its supposed to be like that.

overall great.

QBPixel Sage July 5 2006 12:56 AM EDT

Verifex previously mentioned the left-drop of the menus being a bit awkward. I agree (and I guess we're not the only ones). Anyways, it is fixed!

PS: Link for the demo will always be the same ;)
This thread is closed to new posts. However, you are welcome to reference it from a new thread; link this with the html <a href="/bboard/q-and-a-fetch-msg.tcl?msg_id=001qPv">Re-imagining: Sidebar Tabs</a>