Sidebar Redux

[Brian]

Aug 19, 2017 20:36:47 GMT -8 courelli said:

Hey Brian,

Is there a way to make the categories that come after the bottom end of the sidebar expand back to full size, instead of having this awkward gap?

That's completely impossible to achieve with the HTML used to create this plugin. Sorry!

[purp1eone]

Hi Brian,

I have looked through quite a bit of this thread trying to accomplish what I want done but I haven't gotten it to work.

What I would like to do is enable two different sidebars on the right side of two pages only and have "A" show up on the home page and "B" show up on the General Discussion page.

I have figured out how to have both the left and right sidebars enabled and get one to show up on the home page and one to show up on the General Discussion page.

I have also figured out how to use the sidebar ID and enable and disable sidebars if I have two selected for one side.

The issue I am having is disabling the sidebar ID is done with CSS and controlling the sidebar by which board it appears is controlled with HTML.

Having trouble putting those two together.

Whats the easiest way to accomplish:

1. Enable two("A" and "B") sidebars on the left side bar only with unique IDs
2. "A" shows up on the Home page only
3. "B" shows up on the General Discussion page only

Hope I didn't confuse you.

Thanks for the help.

[Brian]

Aug 25, 2017 6:28:06 GMT -8 purp1eone said:

Whats the easiest way to accomplish:

1. Enable two("A" and "B") sidebars on the left side bar only with unique IDs
2. "A" shows up on the Home page only
3. "B" shows up on the General Discussion page only

CSS is the easiest way to toggle whether or not an element is visible on the page. I would suggest using CSS to hide both of them by default, then use Javascript to determine whether or not either shows on a particular page.

Place this in Structure > Headers & Footers > Global Header. Substitute the text in green with the IDs you specified for containers A and B. Substitute the number in red with the numerical ID of the General Discussion board, found after /board/ in its URL in your forum's address bar when viewing the board.

<script type="text/javascript">
	if(pb.data('route').name == "home") {
		$('head').append('<style type="text/css">#Sidebar-A-ID-here { display: block; }</style>');
	}
	if(pb.data('page').board){
		if(pb.data('page').board.id == 123)
			$('head').append('<style type="text/css">#Sidebar-B-ID-here { display: block; }</style>');
	}
</script>

[purp1eone]

Aug 27, 2017 8:18:58 GMT -8 Brian said:

Aug 25, 2017 6:28:06 GMT -8 purp1eone said:

Whats the easiest way to accomplish:

1. Enable two("A" and "B") sidebars on the left side bar only with unique IDs
2. "A" shows up on the Home page only
3. "B" shows up on the General Discussion page only

CSS is the easiest way to toggle whether or not an element is visible on the page. I would suggest using CSS to hide both of them by default, then use Javascript to determine whether or not either shows on a particular page.

Place this in Structure > Headers & Footers > Global Header. Substitute the text in green with the IDs you specified for containers A and B. Substitute the number in red with the numerical ID of the General Discussion board, found after /board/ in its URL in your forum's address bar when viewing the board.

<script type="text/javascript">
	if(pb.data('route').name == "home") {
		$('head').append('<style type="text/css">#Sidebar-A-ID-here { display: block; }</style>');
	}
	if(pb.data('page').board){
		if(pb.data('page').board.id == 123)
			$('head').append('<style type="text/css">#Sidebar-B-ID-here { display: block; }</style>');
	}
</script>

Thanks for the reply Brian.

I tried that code and it did not work.

I put it in the Global Header where I have my other code which I commented out when I tried yours.  Replaced the green text with the #VNews (A) and #RNews (B) and the board id with 1.

Here is my test site: link

For some reason I can't get the I can't get the == operator to evaluate on my site but the != works just fine.  If you look at my site you will see that in my code I used the != to isolate the boards.  Not sure why I can't get == to work.

Thanks for the help.

[Brian]

In the first part of my post I also mentioned that you needed to hide the containers by default using CSS. Skipping this step will still allow both of them to show. If you're performing this change entirely through your forum's headers then this needs to come before the script I posted before it will work:

<style type="text/css">
#VNews, #RNews { display: none; }
</style>

[purp1eone]

Oops, missed that first part thanks for pointing that out.

So the code I have below is what I have in my Global Header. Now what happens is the space for the side bar shows up on every page(even the ones besides Home and General Discussion) but there is no sidebar.

Thanks for the help Brian.

<style type="text/css">
#VNews, #RNews { display: none; }
</style>

<script type="text/javascript">
if(pb.data('route').name == "home") {
$('head').append('<style type="text/css">#VNews { display: block; }</style>');
}
if(pb.data('page').board){
if(pb.data('page').board.id == "1")
$('head').append('<style type="text/css">#RNews { display: block; }</style>');
}
</script>

[Brian]

Using this script instead of the previous one should take care of the rest.

<script type="text/javascript">
    if(pb.data('route').name == "home") {
        $('head').append('<style type="text/css">#VNews { display: block; }</style>');
    }
    if(pb.data('page').board){
        if(pb.data('page').board.id == "1")
            $('head').append('<style type="text/css">#RNews { display: block; }</style>');
    }
    var left_sidebar_visible = false;
    $('#sidebarr-left > .container').each(function(){
        if($(this).is(':visible')){
            left_sidebar_visible = true;
            return false;
        }
    });
    if(!left_sidebar_visible){
        $('head').append('<style type="text/css">.sidebarr-left-td { display: none; } .sidebarr-center-td { padding: 0 !important; }</style>');
        proboards.plugin.get('sidebar_redux').settings.left_enabled = 0;
    }
</script>

[purp1eone]

So I was just supposed to replace the javascript correct?  And keep the css.

So this is what I have now in the Global Header and I now no sidebar shows up(or the space where it goes) on any page.  Not sure what I am missing.

<style type="text/css">
#VNews, #RNews { display: none; }
</style>

<script type="text/javascript">
if(pb.data('route').name == "home") {
$('head').append('<style type="text/css">#VNews { display: block; }</style>');
}
if(pb.data('page').board){
if(pb.data('page').board.id == "1")
$('head').append('<style type="text/css">#RNews { display: block; }</style>');
}
var left_sidebar_visible = false;
$('#sidebarr-left > .container').each(function(){
if($(this).is(':visible')){
left_sidebar_visible = true;
return false;
}
});
if(!left_sidebar_visible){
$('head').append('<style type="text/css">.sidebarr-left-td { display: none; } .sidebarr-center-td { padding: 0 !important; }</style>');
proboards.plugin.get('sidebar_redux').settings.left_enabled = 0;
}
</script>

[Brian]

purp1eone, according to your Plugins > Manage page you have the Sidebar Redux plugin disabled on the theme you have selected in your profile. Click on the Edit button next to it in the list and turn it back on for the theme you're currently on.

[purp1eone]

Aug 28, 2017 7:56:01 GMT -8 Brian said:

purp1eone , according to your Plugins > Manage page you have the Sidebar Redux plugin disabled on the theme you have selected in your profile. Click on the Edit button next to it in the list and turn it back on for the theme you're currently on.

I actually use a different account to test with using the Default theme.  I switched my admin account to the Default theme and still the same issue.

[Brian]

I've edited the code in your global header. It should work now.

The problem was that the CSS that initially hid the containers took priority over the CSS that made it show, and the check for visible containers was running before those containers were specified in the HTML.

[purp1eone]

Works great!!!

Thank you Brian!!!

[oldhickory]

Hi Brian, I am trying to help a friend that is using your plug in.  He has multiple themes but one theme isn't aligning properly



Can you help? 
Is there a way to shorten the Navigation tree, so that the left sidebar isn't pushed to the edge of the browser?

Thanks.


The site is here

sonsofsibelius.proboards.com/

This admin also would like to know
Can you use the side bars like threads as in having them viewable by selected people?

EDIT: He also wanted to know if videos can be added to the sidebar.   I thought I read somewhere that they can, but the thread is now 132 pages.  So I'll ask you if they can and how to do it.

Edit:9/27/2017  Brian , just a reminder in help needed here.  Thanks.

[Brian]

oldhickory, that's an issue with the design of the theme rather than the plugin and is better suited for the Templates board. I'm not going to assist with that in this thread since it has nothing to do with the function of the plugin.

The plugin accepts HTML, so videos can be added to it. I have no idea where you're obtaining the video from but most video sites usually include an iframe tag or some other means of embedding you can use in their Share section next to the video.

[oldhickory]

Sept 27, 2017 12:19:09 GMT -8 Brian said:

oldhickory , that's an issue with the design of the theme rather than the plugin and is better suited for the Templates board. I'm not going to assist with that in this thread since it has nothing to do with the function of the plugin.

The plugin accepts HTML, so videos can be added to it. I have no idea where you're obtaining the video from but most video sites usually include an iframe tag or some other means of embedding you can use in their Share section next to the video.

Ok thanks.  I tried to add a youtube vid but I probably did it wrong and will look for the iframe tag.  I wondered about the theme being the issue since all other themes work. 

The other question was
Can you use the side bars like threads as in having them viewable by selected people?

Again, thank you Brian.