How to move Discussion Title Outside 'Content' div?

badlearner

This is how the title of a discussion/topic basically looks —

<div id="Body">
   <div id="Content">
      <div class="Tabs HeadingTabs DiscussionTabs FirstPage">
         <div class="SubTab">It's time we tested some things!</div>
      </div>
   </div>
   <div id="Panel">...</div>
</div>

I would like to move this:

<div class="Tabs HeadingTabs DiscussionTabs FirstPage">
   <div class="SubTab">It's time we tested some things!</div>
</div>

Outside the <div id="Content"> element, so that the code looks like this:

<div id="Body">
   <div class="Tabs HeadingTabs DiscussionTabs FirstPage">
      <div class="SubTab">It's time we tested some things!</div>
   </div>
   <div id="Content">...</div>
   <div id="Panel">...</div>
</div>

Where and what's the PHP code that I need to modify?

I do know that a similar look can be achieved using CSS, but I would like to pull it off from the PHP/HTML-side itself.

Hope to get some help. Thanks!

x00

body.Discussion .HeadingTabs{
   width:980px;
   height:35px;
}

body.Discussion #Panel {
    margin-top: 70px;
}

x00

ok quick and dirty way

in theme/theme/yourtheme/class.yourthemehooks.php

<?php if (!defined('APPLICATION')) exit();
    class YourThemeHooks implements Gdn_IPlugin {
        public function Base_BeforeDiscussion_Handler($Sender){
            echo '</div><div class="ContentDiscussion">';
        }
    }

rename YourThemeHooks and yourtheme in the folder, filenames, and in the code.

you now have two divs to style #Content and #ContentDiscussion. Obviously you are going to have make #ContentDiscussion inhearit most of #Content's properties except you want to set the width and float appropriately.

Although the other way is more correct it has the pitfall is you are copying of whole views, and you still need hooks. Sometimes that is ok, but this dirty solution should do the job. make sure to use clear:both; on #Content

x00

sorry that is ment to be echo '</div><div id="ContentDiscussion">';

mcu_hq

Where and what's the PHP code that I need to modify?

There is none....simply edit the HTML like you stated above.

badlearner

@mcu_hq : You don't understand. That HTML code is from the source code of the page. I don't know where it's output from.

badlearner

And by the way, this is what I am referring to as title of the discussion/topic:

whu606

@badlearner

If you're looking to make these kind of changes you should probably get hold of grep or agentransack, which will allow you to search Vanilla for key words or phrases.

Firebug shows that the element is 'Tablink' - a search in grep/agentransack will then show you which files it appears in, so you can then have a fiddle and see which you want to edit.

Be aware that if you make changes in the core, those changes are likely to be overwritten if you upgrade Vanilla.

x00

Any particular reason? Content has a specific meaning in vanilla it is an asset, where the controller render essentially the payload of the the controller method. Outside the context is outside the controller methods view (only the master template), so you don't data object before this so you would need a bit of expertise, and it is a highly suspect way of doing things.

You can add additional tags for styling if necessary, there is not need to mess with the Content, just for a tag.

First do not edit the core directly. There is a way to move views into your theme.

But before doing that consider using purely css to achieve the same result. This is cosmetic after all.

badlearner

However it is better if you can use hooks to achieve the same result as there is less chance of redundancy when you upgrade.

@whu606 : Is there any documentation for hooks and all that?

I did find the file that's responsible for the title area. But it's an entire file, just for that thing! So, now how should I go about changing where it is output as HTML? (I am trying as you are reading though.)

x00

sorry i rewrote my reply please re read it.

x00

you can't archive what you want by changing one file
#Content is in the master view (of ALL pages), and the title is in the discussion view.

this is like try to the move the whole world becuase you don't like your vantage point. Don't get fixated on context style appropriately.

x00

havign said that this can be done by creating another asset or event hook. but like I said it is highly redundant in most cases.

badlearner

@x00 Thanks for explaining it all to me. So, is there no easy way of doing it?

The thing is, I want the title bar to stretch to full-width of the page like this:

x00

body.Discussion .HeadingTabs{
   width:980px;
   height:35px;
}

body.Discussion #Panel {
    margin-top: 70px;
}

badlearner

@x00 : Of course, that's one way. I knew that — (see this) — I just want to be sure, it's not a bad way of doing it.

422

Create a div called contenttitle and wrap it around headingtabs div in the html.

Then style it using css.

badlearner

@422 : If I should do it with CSS, then why not style 'headingtabs' div directly? Why create 'contenttitle' div and style it instead? What's the thinking?

x00

ok quick and dirty way

in theme/theme/yourtheme/class.yourthemehooks.php

<?php if (!defined('APPLICATION')) exit();
    class YourThemeHooks implements Gdn_IPlugin {
        public function Base_BeforeDiscussion_Handler($Sender){
            echo '</div><div class="ContentDiscussion">';
        }
    }

rename YourThemeHooks and yourtheme in the folder, filenames, and in the code.

you now have two divs to style #Content and #ContentDiscussion. Obviously you are going to have make #ContentDiscussion inhearit most of #Content's properties except you want to set the width and float appropriately.

Although the other way is more correct it has the pitfall is you are copying of whole views, and you still need hooks. Sometimes that is ok, but this dirty solution should do the job. make sure to use clear:both; on #Content

x00

sorry that is ment to be echo '</div><div id="ContentDiscussion">';

badlearner

@x00 : That should work. Thanks a lot!