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.

How do I move the Picture and About box in User Profile Page?

businessdadbusinessdad Stealth contributor MVP
edited August 2012 in Vanilla 2.0 - 2.8

I've been asked to move the Picture and About box in User Profile page from the left sidebar to the main content page, but I can't figure out which main template I would have to override.

I could see that both the Picture and the About box are actually Modules and that they are stored userphoto.php and userinfo.php), and I copied the Modules folder in my theme, together with these two files. I then modified the copied files and I could see that the User Profile page reflects the changes. This means that my Modules are now loaded. What I'd like to know is how to position them where I like.

What I'm trying to achieve is something similar to current Profile View on Vanilla Community, where the User Info are above the activities, rather than in a block on the left.

Thanks in advance for the help.

«13

Answers

  • Can you either show the Url of your website or a screenshot of what you have at the moment? There is a huge chance you need to take a look at the CSS elements using FireFox (you need to find out the names of those elements, classes, Id's) because that's the way you can manipulate the position of those elements... I'll alert @422 for this one...

    I'm also very very interested in what you have in your theme directory, which files do you have in there? (not to change anything, but as an example for other themes :-) )

    422
  • businessdadbusinessdad Stealth contributor MVP
    edited August 2012

    I don't have the Forum live, yet, but the Theme I'm using is the Traditional Chocolate theme without any changes, apart from some colours.

    I checked the layouts, and it's definitely not just a matter of CSS, as the User Info block is rendered inside a DIV which is separate from the content one. I have an idea of what has to be done:
    1- Change asset for Sidebar so that it doesn't load and display User's Photo and Profile.
    2- Change asset for Content so that it does load and display User's Photo and Profile.
    3- Alter modules for User's Photo and Profile so that they render as expected (this step involved CSS).

    Point 3 is the easiest, but I can't figure out how to configure what's loaded in the various sections. I should probably involve @mcu_hq as well, he's the one who designed the Traditional Chocolate theme.

  • Well, sure..., I'll download the theme and try to figure out what you mean. I'm not a theme designer though, so I'll hand you over to those guys :-)

  • businessdadbusinessdad Stealth contributor MVP

    @UnderDog Thanks for the help. I'm also not very strong with themes, at the moment I'm focusing on the development on my first three plugins (which will be awesome! Hopefully...).

    UnderDog
  • 422422 Developer MVP

    Im a work with what ive got man, so can help when you have something to see

    UnderDog
  • businessdadbusinessdad Stealth contributor MVP

    @422 Thanks, I appreciate your help! :)

  • peregrineperegrine MVP
    edited August 2012

    I would think you could do it this way in a plugin - don't know how to modify something in theme that refers to info coming from dashboard/views

     public function ProfileController_BeforeRenderAsset_Handler($Sender) {
    
           $AssetName = GetValueR('EventArguments.AssetName', $Sender);
    
         if ($AssetName == "Content") {
    
                //spit out what you want
    }
    

    add css
         div .Box About {
                                 display:none;
                                 }
    
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    UnderDog
  • mcu_hqmcu_hq yippie ki-yay ✭✭✭
    edited August 2012

    businessdad said:
    1- Change asset for Sidebar so that it doesn't load and display User's Photo and Profile.

    Yea, you are going to want to unset this in your profile controller somewhere before the view is rendered.

    businessdad said:
    2- Change asset for Content so that it does load and display User's Photo and Profile.

    You can probably do this in the plugin. Have you tried loading the module in the sidebar on the main page? My theme should allow you to have a sidebar on the main page. That is also where I displayed a sudo user profile box along with forum stats.

    UnderDog
  • businessdadbusinessdad Stealth contributor MVP

    @peregrine I don't want to output a box and hide it, I really want not to output it at all. The CSS trick is, therefore, not the best approach, but thanks for the answer.

    @mcu_hq I don't have a Profile Controller implemented, and I'd like not to implement a plugin anywhere for this. Layout belongs to the View domain of MVC, I'd like the views to get all the modules and decide freely where to put them.
    Unfortunately, my knowledge of Vanilla's theming logic is practically zero and I can't even figure out who decides what modules should be loaded, what data should be passed to them and how they are given to the Views.

    Regarding the sidebar, I'm not sure we're talking about the same thing, but "Display sidebar" is disabled in TraditionalChocolate plugin. The one I'm talking about is the one of the left in User Control Panel, which is displayed anyway.

  • It's too abstract for me. Please paint a picture, a screenshot of how you want it. I believe that's what 422 also asked for.

  • businessdadbusinessdad Stealth contributor MVP

    @UnderDog That will be hard, I'm really awful with design. Of course, we don't have any designer whatsoever working on the project either... Let's see if I can come out with something not-so-horrible.

  • businessdadbusinessdad Stealth contributor MVP

    Ok, I made a screenshot by "stealing" from the page that inspired my client, i.e. StackOverflow.
    Custom User Control Panel

    The boxes in red are the modules that have to be moved around. To be more specific:

    • User's photo.
    • User's information.
    • User's about box (provided by any 3rd party plugin, such as AboutMe).
    • User's action menu (top right), which is normally displayed as a vertical menu on the left.

    Notes

    • I left some of StackOverflow elements around, but, obviously, they don't apply in this case (for example reputation, or badges, which, to my understanding, aren't currently available in Vanilla).
    • The dashboard on the bottom is already implemented and displayed correctly. It's produced a custom plugin I wrote. Same for the extended menu, with Questions, Answers and so on, my plugin takes care of that.

    Please let me know if you need more details, and thanks for the help.

  • 422422 Developer MVP

    The issue as i see it, isnt anything at this time anyone could help with. Because your asking for custom variant of hypothetical features that afaik arent publically available.

  • businessdadbusinessdad Stealth contributor MVP
    edited August 2012

    @422 I'm not sure what you mean with "hypothetical features". I'm aware that the data in the boxes is not what Vanilla provides (as I wrote, I took the snapshot from StackOverflow to get an idea of its layout), but the boxes themselves are available.

    For example, the User Photo box is available, the User Details box is available and the User About box is optional, but also available. However, I'm more concerned about the first two.

    Here's an updated screenshot containing all the information that Vanilla provides, arranged the way I'd like it.

    And here's how the page looks now, with everything displayed vertically on the left hand side:

    As you can see, all the data is there. From top to bottom:

    • User photo.
    • User Information box (called About in the last screenshot).
    • User Menu, displayed vertically in the last screenshot.

    The box with "Something about me" is missing, but that's not a big concern, and can be ignored for the moment.

  • 422422 Developer MVP

    I could hack the files to do this, but your gonna be better off with a custom profile plugin me thinks. Which is @peregrine 's forte. Nice concept tho.

    UnderDog
  • 422422 Developer MVP

    Not looking at code as i am mobile, you need to create new template grid. Moving 2 of the sidepanel assets to two new positions within that new template structure.

    UnderDog
  • businessdadbusinessdad Stealth contributor MVP

    @422 Thanks. I understand the logic, as I've done it many times in the past, but I don't know how to implement it in Vanilla. I never had the chance of understanding what an "asset" is, in Vanilla, nor I am familiar with Modules, or even templating in general. I thought it was a matter of moving some things here and there (after all, I'm really just trying to move a div from point A to point B), but it's clearly much more complicated than that.

    I'll have to wait for some good Samaritan to give me some directions, as I'm completely lost with this.

    422UnderDog
  • 422422 Developer MVP

    Thats pretty much it. Except you can invoke or render an asset at a particular point and control its position. Im not offay with asset stuff either.

  • peregrineperegrine MVP
    edited August 2012

    just write it to the panel but the info will be above the name.

    I think you can do this in custom.css
    change for example

    body.Profile #Panel {
        width:250px!important;
        float:left;
        margin-top:15px;
    }
    
    to 
    body.Profile #Panel {
        width:750px!important;
        margin-top:15px;
    }
    

    otherwise you are going to have to provide a link to your page, or let us know what controller you are using and your code. You could post your proposed application add-on and then someone could download.

    But as it stands it is just shooting in the dark ...

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • businessdadbusinessdad Stealth contributor MVP
    edited August 2012

    @422, @peregrine I truly appreciate the answers and the effort put in trying to understand my issue, but I'm afraid there's a misunderstanding.

    I didn't write any custom code for the theme, nor I am using any controller except for the TraditionalChocolate Addon, which I have downloaded and installed, but not modified. I also don't have any application, the one I show in the screenshot is pure and plain Vanilla. True, there is my plugin that shows the "Stackoverflow-like" dashboard, but that doesn't change a thing, as it simply overrides a subsection of the bottom panels and has nothing to do with the user information and can be ignored.

    I can also create a test environment, but reproducing it would be extremely simple:

    The only differences you would have, in such case, is that Traditional Chocolate is dark, while my website is light.

Sign In or Register to comment.