Sidebar Redux

[Brian]

Download

One of the most commonly used sidebar codes, remade for V5! Each container's CSS can be fully customized on a per theme basis or universally through the headers & footers. Be sure to read the tooltips next to each option if you're not sure what something does. They are there for your convenience.

Preview:


Features:
- Sidebars for the left and/or right side of your forum
- Sidebars can go beside or below the banner
- Customizable width, spacing, and everything else
- Containers with or without title bars
- Collapsible containers
- User-defined IDs for each container so you can add your own CSS for full customization
- Separate headers/footers so you can place content between your sidebars or completely outside of the sidebars
- Option to use dynamic fixed positioning (sidebar only follows you when you've scrolled down enough on the page and stops at the bottom for full visibility)

Special thanks to Peter for allowing me to modify his Welcome Header Below Ad source and to Maiden for letting me use her theme for the preview image.

Enjoy!




Customization

To customize the CSS of any of your containers, simply add the following codes to the bottom of your theme's style sheet in Themes > Advanced Styles & CSS > Style Sheet. Substitute the text in red with your container's ID.

Keep in mind that a container ID cannot contain spaces and is limited to:

- Letters
- Numbers
- Hyphens
- Underscores

SPOILER: Click to show

Style 1

#your-custom-id > .title-bar {
    /* Title Bar - Insert your CSS below */
}

#your-custom-id > .title-bar h2 {
    /* Title Text - Insert your CSS below */
}

#your-custom-id > .content {
    /* Content - Insert your CSS below */
}

Style 2

#your-custom-id > .content-box {
    /* Content - Insert your CSS below */
}

Making individual Style 2 containers use the outer border color

#your-custom-id > .content-box {
    border-color: @container_outer_border_color;
}

Making EVERY Style 2 container use the outer border color

#sidebarr-left > .container > .content-box,
#sidebarr-right > .container > .content-box {
    border-color: @container_outer_border_color;
}

If your category titles are misaligned...

.container > .title-bar.bbcode h2 { width: auto; }

Codes

These will go in Structure > Headers & Footers > Global Header.

SPOILER: Click to show

Sidebars only show on homepage

<script type="text/javascript">
// Homepage-only Sidebar Redux \\
if(pb.data('route').name != "home") {
    $('head').append('<style type="text/css">.sidebarr-left-td, .sidebarr-right-td { display: none; } .sidebarr-center-td { padding: 0 !important; }</style>');
// Safari Browser Fix \\
    proboards.plugin.get('sidebar_redux').settings.left_enabled = 0;
    proboards.plugin.get('sidebar_redux').settings.right_enabled = 0;
}
</script>

[Tohsaka Rin]

I am unsure why this appears to not be working for me.

The sidebars are not moved up alongside the banner, and there appears to be a weird margin around my boxes (of about 4-5px) smooshing everything over to the right.

How do I remove that, and the rounded moz corners?

V4.5 site: [Here]
V5 site: [Here]

[Brian]

Disable the "Welcome Header Below Ad" plugin on your forum. It's already implemented as part of this plugin.

For the padding and the border radius, add the parts in red to the existing declaration you added into the style sheet.

.sidebarr-main .content-box {
  border-color: @container_outer_border_color;
  padding: 0px !important;
  border-radius: 0px;
}

[Tohsaka Rin]

Jan 10, 2013 14:14:24 GMT -8 Brian said:

Disable the "Welcome Header Below Ad" plugin on your forum. It's already implemented as part of this plugin.

For the padding and the border radius, add the parts in red to the existing declaration you added into the style sheet.

.sidebarr-main .content-box {
  border-color: @container_outer_border_color;
  padding: 0px !important;
  border-radius: 0px;
}

Very close, now there is padding on the right side of the boxes. Um, I can use css to change the font size in the actual side-bars, correct? Since the container for the text seems to be spilling over the right area with the padding.

- Oh, I just noticed now but my banner is cropped on each side now too. Do I have to adjust the space in between the side bars and the forum content or change the forum width?

- Currently fiddling with it now.

The forums under each category image (when expanded) are also a bit (how to put it) weird. There is a 5px gap between the bottom of the first listed forum and the category image; as well as the container for the forums being 4-5px wider than the category image on either side. This may be something messed up with my css or the whole thing of putting images in the headers though.

So close!

Thanks for this plugin!

[Brian]

Jan 10, 2013 15:03:29 GMT -8 Tohsaka Rin said:

Jan 10, 2013 14:14:24 GMT -8 Brian said:

Disable the "Welcome Header Below Ad" plugin on your forum. It's already implemented as part of this plugin.

For the padding and the border radius, add the parts in red to the existing declaration you added into the style sheet.

Very close, now there is padding on the right side of the boxes. Um, I can use css to change the font size in the actual side-bars, correct? Since the container for the text seems to be spilling over the right area with the padding.

The forums under each category image (when expanded) are also a bit (how to put it) weird. There is a 5px gap between the bottom of the first listed forum and the category image; as well as the container for the forums being 4-5px wider than the category image on either side. This may be something messed up with my css or the whole thing of putting images in the headers though.

So close!

Thanks for this plugin!

Lower the width of your sidebars to 252px. That's not padding.

Get rid of the tables in the Creditsnavi container. That has to do with how the V5 layout handles tables. That table isn't necessary though, so it can easily be fixed.

That last one is an issue with your layout. But worry not, I've got it under control.

Change your forum's width to 1225px, then add this to the bottom of your theme's style sheet:

.boards > .title-bar { padding: 0px 1px; }
.boards > .title-bar h2 { line-height: 0px !important; }

[Tohsaka Rin]

Wonderful.

I had to adjust the forum width to 1225px to fix some background spacing. Taking out the table on Credits did fix that and I adjusted the table in the census above it as well.

Now, whenever I make new skins I have to add the bottom portions of the Visual Editor CSS to each style sheet for it to be the same, yes?

Now I just have to figure out how to fix the forum container area and a few other things.

Again, thanks much this was a great update to the sidebars!

[Tohsaka Rin]

Oh, the ID in the containers allows you to give customized code in the Visual Editor CSS area because each "box" then has a unique id name that you gave it.

Example:
Side-bar Name: Welcome
Side-bar ID: welcomenavi

If I wanted to make "welcomenavi" look different from another side-bar, I can use that ID and write custom CSS to it and it won't change any of the other spaces.

- Great feature by the way, even if I am not currently using it! I love when people think ahead on this!

[Brian]

Jan 10, 2013 15:34:00 GMT -8 Tohsaka Rin said:

Wonderful.

I had to adjust the forum width to 1225px to fix some background spacing. Taking out the table on Credits did fix that and I adjusted the table in the census above it as well.

Now, whenever I make new skins I have to add the bottom portions of the Visual Editor CSS to each style sheet for it to be the same, yes?

Now I just have to figure out how to fix the forum container area and a few other things.

Again, thanks much this was a great update to the sidebars!

That's correct. And it was my pleasure.

Jan 10, 2013 15:36:33 GMT -8 Mands said:

What do you mean by custom id in the containers section Brian As you know I'd super love to have the side bar aligned once more with my header so that I can keep them at 700px and glad that the move ad banner is incorporated. But I'm afraid with me being a code dunce, I'm unsure as to what you mean by custom id. Thank you ever so much for your help once more.

When you're creating content boxes for your sidebar, there's a field called ID. You can enter any name you want into this field, as long as it has no spaces and uses only alphanumeric characters and underscores/hyphens ( - and _ ).

Once you've added an ID to a container, you can address it in your forum's CSS using the ID you gave it. So if I named one of my content boxes awesome-box, I can add #awesome-box to my CSS and change its colors, fonts, borders... everything.

So let's say I gave this box Style 2. If I want #awesome-box to have a black background, white text, and a red border, I could add this to my theme's style sheet:

#awesome-box > .content-box {
    background-color: #000000;
    color: #FFFFFF;
    border-color: #FF0000;
}

And it would show up similar to this:

Hi, I'm a container! ...Sort of. Bye!

[Brian]

You don't even have to use that code. By default, the boxes will use the CSS of whatever theme you're on. The code (and even the ID itself) is just in case you want to customize it.

If you're unsure of anything, just leave it blank and see what happens. You can always go back and change it.

[Brian]

You'd still have to do that manually on each theme, since that's your own customization. That was part of Maiden's theme that I asked if I could use for my preview because it looked nice.

The only difference is you have to use #sidebarr-wrapper instead of the regular #wrapper if you don't want the borders to go around the top ads. I added #sidebarr-wrapper to this plugin's HTML with that in mind.

[Brian]

HOLY BONUS POINTS! Apparently this works with my multicolored categories plugin. I didn't even notice that when I made it. Win to the max.

Jan 10, 2013 16:33:50 GMT -8 Mands said:

Okay then. I'll have to remember that. So it can't be done under what I've copied below anymore? As that's how I had been doing it. I need to edit my notes you see for this other plug in then and I want to get it right.

Themes > Colours & Styles> Body {content} > Containers > Title Bars

I'm not entirely sure what you mean anymore (I did see that wall o' code though ). Care to give me screenshots of two different things I can compare?

[Brian]

Oh, right. I forgot about that.

Yeah, they use the same exact containers as Tim's sidebar plugin, so that stays the same.

[Brian]

Jan 10, 2013 17:29:59 GMT -8 Mands said:

Hi Brian - when you get a chance, I know it may be tomorrow now, but I tried the new plug in for sidebars. I thought that you had the option to move it up in line with the header table so that it can be shrunk? I was also under the impression that the banner ad moved to the top automatically. I bet I am doing something wrong.

Screenshot

In the Other Settings tab, you have Move Banner set to No. It's not gonna move unless you set that to Yes.

[Brian]

Settings > Forum Settings > Display Large Images

You can set it to either shrink down to the size of the window or you can make it show with a scrollbar. I don't know of a way to force it to display fully though.

[Former Member]

I believe I'm doing something wrong or over looking something somewhere within the code; but I put it in, followed the few things to enable it, disabled the welcome header code, put in some content, enabled it, saved it, and it looks amazing; but my problem lies on the members and profile page. Instead of being at the top, they're in the middle of the page.

Please help, I have no idea what I could have done wrong; unless there is a limit as to how many content boxes one could have there but I highly doubt that; I'm also only using the left side, if that holds any sort of relevance.