Fixed Side Bar

[Serpent]

Site: rainiertest.proboards.com/

So I've been working on updating this skin to our site, and I was wondering if there was a way to have a fix sidebar that doesn't obscure the skin (like moves it over), but does have the option to be hidden if need be. I've tried a couple sliding ones and they just go over the skin, especially the top banner. 

[Kami]

Feb 25, 2017 13:17:49 GMT -8 Serpent said:

Site: rainiertest.proboards.com/

So I've been working on updating this skin to our site, and I was wondering if there was a way to have a fix sidebar that doesn't obscure the skin (like moves it over), but does have the option to be hidden if need be. I've tried a couple sliding ones and they just go over the skin, especially the top banner. 

Well yes and no. Whether or not the sidebar "goes over" the theme is entirely dependent on your screen resolution. If you have a sidebar fixed to the left of the browser, even if it's hidden, the only way it would overlap the forum is if the distance between the forum + the edge of your browser is less than the width of the sidebar. What may overlap for you would not overlap on anyone with an extended display or a screen resolution wider than yours.

[Serpent]

Is there a way to have the theme like move over to have the cbox there? And is there a code to do this?

[Kami]

Feb 25, 2017 13:52:23 GMT -8 Serpent said:

Is there a way to have the theme like move over to have the cbox there? And is there a code to do this?

Could you rephrase that?

[Serpent]

So I want like a side bar or something to contain the cbox that doesn't interfere with the skin. Something may like this. Or if that can't be done something like this. I can't figure out how to get those popup ones to fit into the code I have, but I'd prefer the first option if possible

[Kami]

Ok well, like I said: The reason those don't "interfere with the skin" is because of the width of the forum versus the width of the sidebar + the gap between the forum and the edge of your browser. Theoretically any sidebar will work if you keep that in mind.

It would help if you put something up that "interferes" so that I or someone else can see why.

[Serpent]

I'm not really sure by what you mean by like the width of the forum and stuff.

I don't even really know where to put it. the only thing I have found that has worked is the peekaboo plugin, but that just opens up over the skin

[Kami]

Feb 25, 2017 16:36:47 GMT -8 Serpent said:

I'm not really sure by what you mean by like the width of the forum and stuff.

I don't even really know where to put it. the only thing I have found that has worked is the peekaboo plugin, but that just opens up over the skin

Okay, let me try to explain.

The forum is centered in your web browser. However, the "space" around it is entirely dependent on your screen resolution. For example: if your forum is 700 px in width and you have an 800 px wide resolution, the space on either side of the forum will only be 50 px each; someone else viewing this 700 px forum on a larger resolution, say 1024 px wide, will have 162 px on either side.

With me so far?

So, if you add a sidebar to the left hand side of the website, that will be "fixed", as in, attached, to wherever the edge of your browser window is. So, let's say your sidebar is 100 px wide. Using the above example, the person that only has 50 px on each side of the forum will see the sidebar overlap, whereas the person with 162 px will still have a 62 px gap between the sidebar and the forum and no overlap.

Therefore, any sidebar regardless of whether or not it is initially hidden or not can accomplish what you're wanting it to do, but what a user sees is dependent on how wide the forum and side bar are in relation to their screen resolution.

Does this make sense?

[Serpent]

That make sense. Is there anyway to have it where the skin and stuff resizes to accommodate both on all screen?

[Kami]

Feb 25, 2017 17:01:58 GMT -8 Serpent said:

That make sense. Is there anyway to have it where the skin and stuff resizes to accommodate both on all screen?

The short answer: Yes and no.

The long answer: responsive design (meaning that the design response (adjusts) to the size of the screen), while possible with ProBoards as it is currently, is not simplistic as it wasn't intended to be responsive. This will change come v6, which unfortunately has no ETA.

It is definitely doable to an extent, but you also have to realise it's just not practical to accommodate every screen with identically displaying content. The smaller the screen goes, the more you will have to decide how to display information. For example it's really not practical to show a chat that's no wider than your standard avatar, so you may not want to display a chat at all for browsers a certain width.

Using media queries, fluid measurements (eg: specifying the browser will occupy 80% of the browser width instead of a fixed pixel width will ensure the same "spacing" in all browsers), and so on will move towards your goal of having the same view across all sizes.

The trick is figuring out what's right for your tastes, then figuring out how to make sure that translates over to resolutions different from yours.

I hope that all made sense.

"Yeah but HOW" I'm sure you're wondering. Well, again it depends. Of the two examples above, which did you prefer? And also, what information would the sidebar need to include? Is it just a chat, or did you need other stuff too?

[Serpent]

That makes sense.

Of the two above I prefer the 1st one, but I would be fine with either. It just has to contain the chat.

[Kami]

Feb 26, 2017 11:21:12 GMT -8 Serpent said:

That makes sense.

Of the two above I prefer the 1st one, but I would be fine with either. It just has to contain the chat.

Okay. It's going to take me a little while to look into this as my weekend is ending and I have work and other obligations this week.

For anyone reading this, if you want to pick up the reigns please feel free to.

Otherwise, if this isn't covered by next weekend, I'll take a crack at it.

[Serpent]

Sounds good. Thank you.

[Former Member]

You mean like an off-canvas type of one?

Those types of bars really impact user experience and performance.
Because of the nature of the way they work, by pushing other elements around, the whole DOM has to be recalculated and painted every time the user interacts with it(and that is before the user even decides to scroll).

A better solution would be to have the nav only about 20% wide on either side, and have that slide In/out.
Have it in it's own layer on the z-index or better yet transform:translateZ(0) as that will push it into the composite layer, which the GPU will take care of, therefore every time it slides, it does not interfere with other elements around it, thus the whole DOM won't need to be re-painted.

[Serpent]

So it wouldn't interfere with the skin? The issue I've been having is that any of the ones I've tried have covered up parts of the skin. We'd prefer it on the side, but I can't fiure out a way to do that and not have it cover up the skin