change element postion

jeongwee

how do i do to change it like the picture?

R_J

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

jeongwee

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

jeongwee

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

R_J

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

hgtonight

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 www.example.com/dashboard/settings the path would be /dashboard/settings)? It looks like /discussion/123.

jeongwee

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

jeongwee

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

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

jeongwee

@hgtonight the url path http://localhost/vanilla/index.php?p=/discussion/37/title-title-title-title-title-title-title-title-title-title#latest

jeongwee

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

R_J

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

CSS

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.

PlugIn

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.

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

jeongwee

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

R_J

Tell me if that description worked for you. If not, I try to answer your question directly, but I've only version 2.2.3.4 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

jeongwee

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

jeongwee

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

jeongwee

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

Shadowdare

Use the pre tag to put code in your posts.

R_J

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_J

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";

$this->FireEvent('AfterDiscussionTitle');

// Write the initial discussion.
if ($this->Data('Page') == 1) {
   include $this->FetchViewLocation('discussion', 'discussion');
   echo ''; // close discussion wrap
   
   $this->FireEvent('AfterDiscussion');
} 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_J

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

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