Change where the categories are listed to the top of main content on the page

ScriptedPixels

I'm looking to take out the side bar and move the categories to the top of the main content; to make a tabbed effect at the top of the discussions page. Is this possible?

Thanks

peregrine

probably just change the panel dimension in css and float it to the top.

Linc

Hi @ScriptedPixels, are you using a custom theme? If so, is it PHP-based or Smarty-based? Also, are you comfortable writing a plugin?

ScriptedPixels

I managed to move the panel "call in" from the side to the top but I don't want anything else calling in the Panel which then shows another "side bar" feature - does that make sense?

I basically don't want to put the whole sidebar at the top and have any nasty surprises later

ScriptedPixels

@Lincoln said:
Hi ScriptedPixels, are you using a custom theme? If so, is it PHP-based or Smarty-based? Also, are you comfortable writing a plugin?

I'm using the theme documentation provided to try and change the structure. I was hoping it would be a simple html / module change rather than creating a plugin If that's what I need to do then I'm not too sure how I'd go about doing that?

Sorry, was meant to say - it's PHP based - I'm purely just trying to create a slight variation of the Vanilla theme.

vrijvlinder

Ok then you can simply move the panel to that area and change the width so it is the width of the content and arrange the modules to display inline .
Move this section to above the content. In the default.master.php

<div id="Panel"><?php $this->RenderAsset('Panel'); ?></div>

You can also add css to not display the panel and copy the categories module to your theme in a modules folder and make that target the content intsead of the panel.

You can also use the CategoriesDropdown or the categories2menu plugins to send them to the menu and not have a module at all.

Linc

Okeydoke, just trying to get a gauge of what the best solution will be for you. Vanilla lets you do things in lots of ways so it's helpful to know some background before giving a solution.

I suggest trying this just before the Content asset in your default master template (comments optional). It needs to be between <?php tags of course.

 // Add Categories List
 if (InSection('DiscussionList')) :  // Only trigger on discussion list
 $CategoriesModule = new CategoriesModule();  // Instantiate the module
 echo $CategoriesModule; // echo will trigger its ToString method
 endif;

You can then delete the Panel asset if you want - sounds like you're ready to ditch the sidebar paradigm which is cool! We hope to get rid of it one day too.

ScriptedPixels

@Lincoln said:
Okeydoke, just trying to get a gauge of what the best solution will be for you. Vanilla lets you do things in lots of ways so it's helpful to know some background before giving a solution.

I suggest trying this just before the Content asset in your default master template (comments optional). It needs to be between <?php tags of course.

 // Add Categories List
 if (InSection('DiscussionList')) :  // Only trigger on discussion list
 $CategoriesModule = new CategoriesModule();  // Instantiate the module
 echo $CategoriesModule; // echo will trigger its ToString method
 endif;

You can then delete the Panel asset if you want - sounds like you're ready to ditch the sidebar paradigm which is cool! We hope to get rid of it one day too.

Thanks for that, but it works only when I remove the wrapping if statement

if ( inSection('DiscussionList'))

The error I get is: Fatal error: Call to undefined function InSection() in /Applications/MAMP/htdocs/vanilla/applications/dashboard/views/default.master.php on line 54

ScriptedPixels

@vrijvlinder said:
Ok then you can simply move the panel to that area and change the width so it is the width of the content and arrange the modules to display inline .
Move this section to above the content. In the default.master.php

<div id="Panel"><?php $this->RenderAsset('Panel'); ?></div>

You can also add css to not display the panel and copy the categories module to your theme in a modules folder and make that target the content intsead of the panel.

You can also use the CategoriesDropdown or the categories2menu plugins to send them to the menu and not have a module at all.

Do you know if the panel contains anything else other than the Categories list? If it doesn't then I'm happy to simply move the code and style as needed

vrijvlinder

Yes it does, the bookmarks, the who's online module the in this conversation module. There can be 100 modules in the panel at one given time, adverts, games, messages...

Killing the panel means you would get rid of those. To get those you would have to add them to your theme. It is better to add the categories to the menu, then render the panel bellow the content.

You can do pretty much anything you want. If you want to remove functionality and don't care about the other things, then you can just hide the entire panel all together with css.

ScriptedPixels

@vrijvlinder said:
Yes it does, the bookmarks, the who's online module the in this conversation module. There can be 100 modules in the panel at one given time, adverts, games, messages...

Killing the panel means you would get rid of those. To get those you would have to add them to your theme. It is better to add the categories to the menu, then render the panel bellow the content.

You can do pretty much anything you want. If you want to remove functionality and don't care about the other things, then you can just hide the entire panel all together with css.

Ah ok, then I'll need to look in to how to specifically pull the categories out and in to the list above the main content.

I'm not too great with how the module system works here, it's not clear on where I can find and move the categories or call it in. I can't seem to find a module/template page for the Panel area to see how categories are bought in to it

vrijvlinder

It is very simple, a module is a widget , a container of the code that makes up the module.

Look in your vanilla folder in applications/dashboard/modules/class.categoriesmodule.php

this is the code inside there

<?php if (!defined('APPLICATION')) exit();


/**
 * Renders the discussion categories.
 */
class CategoriesModule extends Gdn_Module {

   public function __construct($Sender = '') {
      // Load categories
      $this->Data = FALSE;
      if (C('Vanilla.Categories.Use') == TRUE && !C('Vanilla.Categories.HideModule')) {
         if (!property_exists($Sender, 'CategoryModel') || !is_object($Sender->CategoryModel)) {
            $Sender->CategoryModel = new CategoryModel();
         }
         $Sender->CategoryModel->Watching = TRUE;
         $this->Data = $Sender->CategoryModel->GetFull();
      }
      parent::__construct($Sender);
   }

   public function AssetTarget() {
      return 'Panel';
   }

   public function ToString() {
      if ($this->Data)
         return parent::ToString();

      return '';
   }
}

This code tells the module to go in the panel as in AssetTarget return Panel

If you change that to return content, it will render it above the content or possibly above it.

You can have it render in the Head and it would appear above everything on the page.

You can copy this module into your theme. Then edit it to suit.

Just copy the file and add it to your theme folder. The module will be called from there.

My suggestion is you try the dropdown plugin and then select to not show the module in the panel. If you don't want it there at all.

ScriptedPixels

@vrijvlinder said:
It is very simple, a module is a widget , a container of the code that makes up the module.

Look in your vanilla folder in applications/dashboard/modules/class.categoriesmodule.php

this is the code inside there

<?php if (!defined('APPLICATION')) exit();


/**
 * Renders the discussion categories.
 */
class CategoriesModule extends Gdn_Module {
   
   public function __construct($Sender = '') {
      // Load categories
      $this->Data = FALSE;
      if (C('Vanilla.Categories.Use') == TRUE && !C('Vanilla.Categories.HideModule')) {
         if (!property_exists($Sender, 'CategoryModel') || !is_object($Sender->CategoryModel)) {
            $Sender->CategoryModel = new CategoryModel();
         }
         $Sender->CategoryModel->Watching = TRUE;
         $this->Data = $Sender->CategoryModel->GetFull();
      }
      parent::__construct($Sender);
   }

   public function AssetTarget() {
      return 'Panel';
   }

   public function ToString() {
      if ($this->Data)
         return parent::ToString();

      return '';
   }
}

This code tells the module to go in the panel as in AssetTarget return Panel

If you change that to return content, it will render it above the content or possibly above it.

You can have it render in the Head and it would appear above everything on the page.

You can copy this module into your theme. Then edit it to suit.

Just copy the file and add it to your theme folder. The module will be called from there.

My suggestion is you try the dropdown plugin and then select to not show the module in the panel. If you don't want it there at all.

Ok cool that makes sense but when I change the code it doesn't make a difference. I've moved the applications/vanilla/modules/class.categoriesmodule.php file in to my new theme folder and it doesn't make a difference, even if I've copied or changed default.master.php to stop the panel rendering in

ScriptedPixels

@vrijvlinder said:
It is very simple, a module is a widget , a container of the code that makes up the module.

Look in your vanilla folder in applications/dashboard/modules/class.categoriesmodule.php

this is the code inside there

<?php if (!defined('APPLICATION')) exit();


/**
 * Renders the discussion categories.
 */
class CategoriesModule extends Gdn_Module {
   
   public function __construct($Sender = '') {
      // Load categories
      $this->Data = FALSE;
      if (C('Vanilla.Categories.Use') == TRUE && !C('Vanilla.Categories.HideModule')) {
         if (!property_exists($Sender, 'CategoryModel') || !is_object($Sender->CategoryModel)) {
            $Sender->CategoryModel = new CategoryModel();
         }
         $Sender->CategoryModel->Watching = TRUE;
         $this->Data = $Sender->CategoryModel->GetFull();
      }
      parent::__construct($Sender);
   }

   public function AssetTarget() {
      return 'Panel';
   }

   public function ToString() {
      if ($this->Data)
         return parent::ToString();

      return '';
   }
}

This code tells the module to go in the panel as in AssetTarget return Panel

If you change that to return content, it will render it above the content or possibly above it.

You can have it render in the Head and it would appear above everything on the page.

You can copy this module into your theme. Then edit it to suit.

Just copy the file and add it to your theme folder. The module will be called from there.

My suggestion is you try the dropdown plugin and then select to not show the module in the panel. If you don't want it there at all.

Ignore that. It looks like the issue was to do with the version I was running. I've downloaded the latest stable release and updated it locally. all seems to be ok now and I can use " {asset name="Panel"} " to place the panel anywhere. Now I just need to understand how I can take the categories list out of the panel

Linc

My solution requires 2.1.

vrijvlinder

yes you just traded php for tpl ...

You have an option in the dashboard where you make new categories to not use the side module.

You can also use css to hide them for sight.

in 2.1 this is the module html

 <div class="Box BoxCategories">
           <h4>Categories</h4>
           <ul class="PanelInfo PanelCategories">
           <li><a href="/foro/categories" class="ItemLink">All Categories <span class="Aside"><span class="Count"><span title="33 discussions" class="Number">33</span></span></span></a></li><li class="ClearFix Depth1 Category-general"><a href="http://www.fumamx.org/foro/categories/general" class="ItemLink">General <span class="Aside"><span class="Count"><span title="3 discussions" class="Number">3</span></span></span></a></li>
        <li class="ClearFix Depth1 Category-equipo"><a href="http://www.fumamx.org/foro/categories/equipo" class="ItemLink">Equipo <span class="Aside"><span class="Count"><span title="30 discussions" class="Number">30</span></span></span></a></li>
        <li class="ClearFix Depth1 Category-noticias"><a href="http://www.fumamx.org/foro/categories/noticias" class="ItemLink">Noticias <span class="Aside"><span class="Count"><span title="0 discussions" class="Number">0</span></span></span></a></li>
           </ul>
        </div>

the css to hide:

.Box.BoxCategories{
display:none;
}

vrijvlinder

There may be other plugins that hide or make it small the panel....

ScriptedPixels

@Lincoln said:
My solution requires 2.1.

I tried yours with the latest and it doesn't show anything ... I've added your code to the default.master.tpl in the dashboard folder for testing to test.

Linc

@ScriptedPixels said:
I tried yours with the latest and it doesn't show anything ... I've added your code to the default.master.tpl in the dashboard folder for testing to test.

2.1... and a PHP-based theme, as you specified.

In Smarty, simply add:

{module name="CategoriesModule"}

This is a great example of why we switched to Smarty in 2.1.

vrijvlinder

You can go into the modules folder and change the target of that module to be the Content instead of Panel it is very simple to do that.

applications/dashboard/modules/class.categoriesmodule.php

change the AssetTarget to 'Content'

or use the categoriesdropdown plugin which send the categories to the menu....

vrijvlinder

I gave you the wrong location for this categories module, I tested this theory and it worked. The simplest is to change the target to Content and they show right before the content

forum/applications/vanilla/modules/class.categoriesmodule.php

change this in that file to this

public function AssetTarget() {
      return 'Content';
   }

You will need to sort the modules if you want the warning messages that can go there to be at the top.