How to move Discussion Title Outside 'Content' div?
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
-
x00 MVP
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 #Contentgrep is your friend.
0
Answers
There is none....simply edit the HTML like you stated above.
@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.
And by the way, this is what I am referring to as title of the discussion/topic:
@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.
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.
@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.)
sorry i rewrote my reply please re read it.
grep is your friend.
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.
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.
@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:
grep is your friend.
@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.
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.
@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?
ok quick and dirty way
in theme/theme/yourtheme/class.yourthemehooks.php
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 #Contentgrep is your friend.
sorry that is ment to be
echo '</div><div id="ContentDiscussion">';
grep is your friend.
@x00 : That should work. Thanks a lot!