Create Alternate Left Panels With XSitePro

Shortly after XSitePro V2 was released people were loving the control they had over the right panels, but wondering why you could not control the left panel on each page. You can only set up the left panel in the main site layout, then it remains static throughout the whole site.

What happens if you need to have greater control over the left panel? What if you want to turn off the left hand navigation on certain pages? Or want AdSense on only certain left panels?

Until now, you do without this extra functionality. Until XSitePro decides they want to add this much desired feature, you either do without, or you find a work around.

I can’t wait, so I found a work around.

In my example site, I wanted to have a left menu on 2 pages, RSS feeds on another page without a menu, and social bookmarking on another, without anything else.

Once I built my site, and decided what I want in the left panel of each site, then I add it all into the main left panel of my site.Just as I would with any other site.

Once everything is added, I went into the source panel and split up the code into sections. Just putting a couple of returns between each code so I could see them clearly. Then I took each section and wrapped them in DIV tags, so they are each in their own selected section.

Each DIV is then given a unique ID to IDentify them. This is important as it is what enables us to turn them on and off when needed.

EXAMPLE:

[LINKS_MENU]
[ADSENSE_0000000065]
[RSS_FEED_0000000039]
[SOCIALNETWORKLINK0000000029]

Now that we have all our left panel content added and divided up into named sections, we can start turning them on and off on each page.

You will need to add some code to every page individually in order to do this. so it is a good idea to take this into account when starting a site. But the codes are pretty minor, so it is not too tough to add to every page.

Go to your first page, and go to:

Page Settings | Advanced Settings | Scripts | Custom Head Script

In there we will add some custom CSS to turn off the display of each of our DIV’s as needed. On my main index page, I only wanted the menu in the left to show up. Nothing else. So I added this CSS to turn off all the rest.

By setting { display: none; } to the three alternate sidebar sections, I am turning them off, while leaving the first one on. The pound sign (#) followed by the ID of each panel is used to choose that panel.

Save and Preview. You will see the main page of your site only has the menu, but no RSS, AdSense of Bookmarking. We have now effectively altered our left panel in XSitePro and made it bend to our will.

You can then go on to each of your pages and turn on and off the sections you want as needed.

Note: The extra sections are actually on each page, they are just hidden. If you check the source code you will see the codes are there. But they are not visible to viewers, and that is what we were after in the first place. Not the best method, but an effective work around until XSitePro adds this much needed control over our sites.

You can see my test site here:

http://www.shopxsitepro.com/LeftPanelDemo/

6 thoughts on “Create Alternate Left Panels With XSitePro

  1. Jason says:

    Hi Myles,

    Excellent tip. I knew you would come up with something for the left panel issue. 🙂

    Jason

  2. james says:

    Excellent tips…exactly what i was looking for :P…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.