Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

How to move Discussion Title Outside 'Content' div?

edited March 2012 in Vanilla 2.0 - 2.8

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!

Best Answers

  • Options
    x00x00 MVP
    Answer ✓
    body.Discussion .HeadingTabs{
       width:980px;
       height:35px;
    }
    
    body.Discussion #Panel {
        margin-top: 70px;
    }

    grep is your friend.

  • Options
    x00x00 MVP
    edited March 2012 Answer ✓

    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

    grep is your friend.

  • Options
    x00x00 MVP
    Answer ✓

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

    grep is your friend.

Answers

  • Options
    mcu_hqmcu_hq yippie ki-yay ✭✭✭

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

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

  • Options

    @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.

  • Options

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

    Imgur

  • Options
    whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @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.

  • Options
    x00x00 MVP
    edited March 2012

    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.

    grep is your friend.

  • Options

    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.)

  • Options

    sorry i rewrote my reply please re read it.

    grep is your friend.

  • Options
    x00x00 MVP
    edited March 2012

    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.

    grep is your friend.

  • Options

    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.

    grep is your friend.

  • Options
    edited March 2012

    @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:

    Imgur

  • Options
    x00x00 MVP
    Answer ✓
    body.Discussion .HeadingTabs{
       width:980px;
       height:35px;
    }
    
    body.Discussion #Panel {
        margin-top: 70px;
    }

    grep is your friend.

  • Options

    @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.

  • Options
    422422 Developer MVP

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

    Then style it using css.

    There was an error rendering this rich post.

  • Options

    @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?

  • Options
    x00x00 MVP
    edited March 2012 Answer ✓

    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

    grep is your friend.

  • Options
    x00x00 MVP
    Answer ✓

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

    grep is your friend.

  • Options

    @x00 : That should work. Thanks a lot! :D

Sign In or Register to comment.