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.

change element postion

jeongweejeongwee Vanilla version 2.6 ✭✭
edited August 2013 in Vanilla 2.0 - 2.8

how do i do to change it like the picture?

111.png 37.7K
222.png 132.9K


  • R_JR_J Ex-Fanboy Munich Admin

    You can override (not overwrite!) /applications/vanilla/views/discussion/discussion.php and /applications/vanilla/views/discussion/index.php and change them as you like.

    As far as I know /applications/vanilla/views/discussion/discussion.php is used in other views too, so you might find unwanted results elsewhere if you do so.

    But what do you want to achieve? Do you like to change the order (seems not to, because the code screenshot shows the same order) or do you want to change the display?

    If it's just for the display, than you would only need css and maybe div.Discussion > div { width: 100%;} might do what you like (just a guess and not tested).

  • jeongweejeongwee Vanilla version 2.6 ✭✭

    thx for the helo r_j .see the picture , that is wat i mean.

    a1.jpg 114.9K
    a2.png 271.7K
  • jeongweejeongwee Vanilla version 2.6 ✭✭

    nvm i give up :D maybe the layout of the 1st picture is better.

  • R_JR_J Ex-Fanboy Munich Admin

    Yes, it is, if you ask me ;-)
    When discussion and comments look the same, It is more consistent and I feel consistency is better for readability.

    Anyway, that's not an answer to your intended question... My first answer was for discussion index, my fault.

    Your screenshots look like they are from single discussions (judging by the WYSIWYG bar)
    If title and user shall "share" place they must be in the same container and so you'd have to change the view.
    But when I look at a standard installation, I have the category next to the title and so I assume you already have changed it. Just put both elements in a container, fix the title in the upper right and let the user info flow somewhere. I assume that should do the trick, but I'm no CSS guy, sorry.

  • hgtonighthgtonight ∞ · New Moderator
    edited August 2013

    What version of Vanilla are you running? It looks like 2.1.

    What theme are you running? It looks like a modified Bittersweet.

    What is the URL path (e.g. given the path would be /dashboard/settings)? It looks like /discussion/123.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • jeongweejeongwee Vanilla version 2.6 ✭✭

    2.1b1 nvm i don wanna change it alrdy =_=

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited August 2013

    @hgtonight @R_J changed my mind....i think i still have to change it.becoz the image interfere with the layout of the text.wat i want is move the whole div.Item-Header.DiscussionHeader into the div.PageTitle .how do i change the php code? is it possible?

  • R_JR_J Ex-Fanboy Munich Admin

    I expect neither hgtonight nor anyone else could answer your question by heart and so everyone would have to look at the code, so I tell you how to find out yourself. It isn't difficult.
    Let me answer this in a general way so that you can find the solution by yourself for this question and maybe similar questions!
    Be patient, cause writing such an answer will take me some twenty minutes, I think...

  • jeongweejeongwee Vanilla version 2.6 ✭✭

    @R_J not php guy=_= im trying ..
    so this is the thing i shud move? (the blue area)

    asd.jpg 164.4K
  • R_JR_J Ex-Fanboy Munich Admin

    "Be patient", I've said ;-)

    If you like to change the position of something, first check if it can be done by css, cause that would be the "natural" way. If that can not be done, you'll have to dig into the PHP code, but that is not too hard, give it a try.


    Inspect the element and see if it's new position is inside of the same container as it is now. If so, CSS should be the way to go. You can use position relativ, display block and such right in your browser if you are using for example firebug.
    Easy and I think you already knew that.


    You'll find a lot of FireEvents lines in the code and that's where you can hook into with a plugin. The most probable usage scenario when speaking about themeing (that I can think of know) is when you do not want to change the order of what to display, but the content itself. If you have an own theme every order changement could be nicely made there. But if you would like to show an information that is not accessible in the current object and you would have to make an additional database query, that would be messy in a view. For such a case a plugin would be suitable. But you want to change the order, so make your own theme.


    Okay, you want code XY to be moved from a to b. So how can you find out what's a and what's b?
    You either think about it or you just search. That is not meant ironically - both ways are legitimate.
    I recommend a mixture of both. Start with searching the files and start thinking as soon as you see the search results. You will see that discusssion views often reuse code and so the text you are looking for might not be in "discussion/discussion" (which does not even exist!) or at least in "discussion/comment". But you'll get an impression of how things work if you start reading the code.
    Okay, search a classname you know inside of the files of your /applications. I use Notepad++ for that.
    Say you find the code XY for the line you like to change and you've found places a and b, you'll have to copy both files into your own theme. You'll probably end up with something like this: /themes/YourSexyLookingTheme/views/discussion/index.php /themes/YourSexyLookingTheme/views/discussion/helper_functions.php. No, I do not know if these two file are the ones you need for your current question ;)

    As soon as you've copied them, you could start messing with this copy: just write <h1>SOURCE</h1> and <h1>TARGET</h1> to the places that you suspect to be the right ones or start right with copying code XY from a to b. You'll find your way.

    Good luck and don't forget to either showcase your forum when it's ready or share your theme ;-)

  • jeongweejeongwee Vanilla version 2.6 ✭✭

    really ty so much .im gonna read it slowly and carefully.

  • R_JR_J Ex-Fanboy Munich Admin

    Tell me if that description worked for you. If not, I try to answer your question directly, but I've only version installed and it may differ from your version.
    But to answer your question I would do the same thing as I've described above.

    1. search for the classname. But I would only search in folder "/application/vanilla/views", that's what I meant with combining thinking and searching :-D
    2. putting some kind of debug html code in there
    3. move the code from one place to the other and see if that worked
    4. tell you "cut following lines from file a and paste them after this and that line in file b"

    I'm no expert and so I just think that I couldn't do it better than you. I just know a way on how to try and I've told you about that way.

    But to be honest: if you haven't done anything in PHP right now, it might get hard, because of a lot of reused code is in the files you will have to look at, especially that helper_functions.php. But to get a unique theme you will have to change the standard vanilla views and that means, you'll have to get a basic understanding of PHP

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited August 2013

    just take your time , not sure gonna spend how much time for test that by myself. im bad english, read very slow(i must google a lot words ,and sometimes i confused with some sentence). really ty again.i will message u or reply to here later

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited August 2013

    @R_J can i just edit it at origiral file not copy to /themes/YourSexyLookingTheme/views/ ? ? i use default theme and rewrite the theme at applications\dashboard\design\style.css. by now i removed the code(bluearea)

    from applications\vanilla\views\discussion\discusstion.php
    and discusstion changed to like this(see picture) .
    but after i copy and paste the code to \vanilla\views\discussion\index.php and refresh the webpage, it just shows a blank page. (by now i know wat to remove it from bottom ....but still not sure how 2 move it to top...)

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited August 2013

    btw how do i put the code in post?......keep failing

  • Use the pre tag to put code in your posts.

    Add Pages to Vanilla with the Basic Pages app

  • R_JR_J Ex-Fanboy Munich Admin

    No, do not change core files. Do not even change the original CSS files! Why?

    1. Updates. You know you will have to update from your current version someday. If you have not made the changes in an extra theme, your changes will all get lost
    2. Debugging. You'll most probably will find plugins that will not work with your customization. First you will have to find out if this is due to your theme or if the plugin itself is faulty.
    3. Portability. Maybe you want to share your theme. That can only be done if all the relevant files are in one single subdirectory.
    4. It's ugly and impolite. Someone invented a great framework and you are not using the benefits.

    Well, point 4 is rubbish, but point 1 is reason enough.

    The first thing you should do now is to export all your changes to a custom theme. Just copy the /theme/default to /theme/something, change the about.php and create a custom.css in the design folder. Put all your css code in there.

  • R_JR_J Ex-Fanboy Munich Admin
    edited August 2013

    First thing I have seen from looking into the code, is that we would have to change the index (no surprise):

    echo ''.$this->Data('Discussion.Name').'';
    echo "\n\n";
    // Write the initial discussion.
    if ($this->Data('Page') == 1) {
       include $this->FetchViewLocation('discussion', 'discussion');
       echo ''; // close discussion wrap
    } else {
       echo ''; // close discussion wrap

    There is the echo '<h1>'.$this->Data('Discussion.Name').'</h1> where you want to see the user information. So now I search for the user information so that we can delete it and put it below the Discussion.Name (aka title)...

  • R_JR_J Ex-Fanboy Munich Admin

    @Shadowdare said:
    Use the pre tag to put code in your posts.

    Neither < pre > nor ~ ~ ~ do always work. Look at the above :-/

Sign In or Register to comment.