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

Buggy Profile Page

I was wondering how I could modify the profile page view as it does not display properly.

You can see it in this screen shot and if you are willing, please try it out on my site http://drinkinoutacups.com

I used this theme as a template: http://vanillaforums.org/addon/vanillapress2010-theme

It has the profile info on the left but I still can not figure this out.

Best Answer

Answers

  • Options
    hgtonighthgtonight ∞ · New Moderator
    edited April 2013

    I assume you modified the default.master.tpl file? Could you post the modified file you are using?

    You have two extra </div> tags at the end of the file. I would inspect your markup for any other issues.

    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.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    maybe get try a theme that is not so messed up? I see some things added to it that may be causing problems. There is a lot to fix there. can you try another theme to see if it helps ?

  • Options

    @hgtonight said:
    I assume you modified the default.master.tpl file? Could you post the modified file you are using?

    You have two extra </div> tags at the end of the file. I would inspect your markup for any other issues.

    I removed the extra tags with no success. here is my default.master.tpl file.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-ca">
    <head>
      {asset name='Head'}
    </head>
    
    <body>
    
    <div id="bg">
    </div>
    
    <div id="title">
        <h1><img style="height:100px;" src="../../../../doc.png"></h1>
    </div>
    <div id="main">
    
        <div id="menu">
        <a href="../../../../">News</a> | <a href="../../../../rules.php">Rules</a> | <a href="../../../../donate.php">Donate</a> | <a href="http://drinkinoutacups.com/forums" style="color: #c6a673">Forums</a> | <a href="../../../../squad.xml">Roster</a>
        </div>
    
        <div id="Body">
            <div id="Content">
              {asset name="Content"}
            </div>
    
        <div id="Panel">
        {searchbox}
        {asset name="Panel"}
            <div class="Box">
    
             <ul id="Bookmark_List" class="PanelInfo PanelDiscussions">
                 {dashboard_link}
                 {discussions_link}
                 {activity_link}
                 {inbox_link}
                 {profile_link}
                 {custom_menu}
                 {signinout_link}
              </ul>
              </div>  
        </div>
      </div>
    <br><br><br><br><a href="{vanillaurl}">Powered by Vanilla</a>
    </div>
    </body>
    </html>
    

    @vrijvlinder said:
    maybe get try a theme that is not so messed up? I see some things added to it that may be causing problems. There is a lot to fix there. can you try another theme to see if it helps ?

    Works on any other theme but mine.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited April 2013

    Yea the problem is not that, it is css . Something you changed in the css maybe? looks like you combined a wp theme ?

    You have inserted there somewhere stuff that is conflicting.

    < div id="bg" > < /div >

    < div id="title" >
    < h1 >< img style="height:100px;" src="../../../../doc.png" >< /h1 >
    < /div >

    < div id="main" > < div id="menu" >

    The layout is totally messed up. WP style is not compatible with Vanilla. Two different things.

    The way this should look,

    body
    #Head
    #Logo
    #Menu
    #Body
    #Content
    #Panel
    #Foot
    

    I would rewrite the whole thing . There is no way to mix wp code and vanilla. You have "main" containing the content and the panel. There is no way of separating the content and the panel without covering the background pic. You would need to make some heavy changes to the whole thing.

    You are better off cloning the default theme, and making it look like you want .Or using another theme.

    Maybe write to the author of the theme and ask if they can help you. But it is clear that commingling wp and vanilla html and css is not working. :(

  • Options

    Ill go ahead and start doing that. One other question, how would I go about moving content that is profile specific around?

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited April 2013

    If you don't care if the background gets covered.

    You can try changing these things to this...

    #main {
    position: relative;
    float: left;
    top: 75px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px 10px;
    padding-bottom: 1px;
    margin-bottom: 1px;
    background-color: transparent;
    }
    #menu {
    width: 100%;
    height: 20px;
    font-size: 18px;
    padding: 0px 2px 0px 2px;
    margin: auto;
    text-align: Center;
    position: relative;
    background: #fff;
    border-radius: 10px;
    top: 7px;
    }
    #Body {
    width: 100%;
    text-align: left;
    margin: 0 auto;
    padding: 5px 3px 3px 3px;
    position: relative;
    height: 1000px;
    }
    
    #Content {
    float: left;
    width: 68%;
    top: 10px;
    left: 6px;
    padding: 3px 3px 8px 3px;
    margin: 0 auto;
    position: relative;
    background: #fff;
    border-radius: 10px;
    }
    #Panel {
    width: 250px;
    float: right;
    margin: 10px 10px auto;
    }
    
  • Options
    hgtonighthgtonight ∞ · New Moderator

    Try this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-ca">
    <head>
        {asset name='Head'}
    </head>
    <body id="{$BodyID}" class="{$BodyClass}">
        <div id="bg">
        </div>
        <div id="title">
            <h1>{logo}</h1>
        </div>
        <div id="main">
            <div id="menu">
                <a href="/">News</a> | <a href="/rules.php">Rules</a> | <a href="/donate.php">Donate</a> | <a href="/forums" style="color: #c6a673">Forums</a> | <a href="/squad.xml">Roster</a>
            </div>
            <div id="Body">
                <div id="Content">
                    {asset name="Content"}
                </div>
                <div id="Panel">
                    {searchbox}
                    {asset name="Panel"}
                    <div class="Box">
                        <ul id="Bookmark_List" class="PanelInfo PanelDiscussions">
                        {dashboard_link}
                        {discussions_link}
                        {activity_link}
                        {inbox_link}
                        {profile_link}
                        {custom_menu}
                        {signinout_link}
                        </ul>
                    </div>
                </div>
            </div>
            <br><br><br><br><a href="{vanillaurl}">Powered by Vanilla</a>
        </div>
    </body>
    </html>
    

    Other than general cleanup, the key thing I did was change your body declaration. You want to be sure to always declare it as listed above. I also noticed you used a bunch of relative links.

    For more information about themes, check out the wiki.

    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.

  • Options

    Got a bit further with what you posted. Thanks btw! Now I'm here:

    I don't know where the profile page is getting to define the info on the left instead of the right.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yea the problem is with the whole thing in general. If you look at the css I posted you will notice I made some large changes. The reason why everything is on top of each other is because you have the main with a width that is 700px you need to make it like the code I pasted above. Your problem is the that main selector. It is acting like the container of everything. So unless you fix that, nothing will have an effect .

    Just replace those sections of the code with what I wrote up there. It should fix it or make it work better.

  • Options
    PRABPRAB New
    edited April 2013

    Hi, coincidentally i too got this error. Totally same. (Today I installed facebook login, and several other changes). Hence, I Don't know what was the correct reason. May be some div thing. But when I looked the css from browser, I found "Group"and "PanelInfo". And I changed my custom css.

    .Group{
    height:160px;
    }

    .PanelInfo li{
    height:20px;
    }

    There was no Group.But PanelInfo li was there. SO i added the line. I don't know whether this is the correct solution. But for the time been it worked for me. :)

    And I don't know whether this will cause problems in the future. Bcz i found this through trial and error.

    One more thing. If I think css is the reason, I check the css through browser. It would help time to find the elements to look for.

    Thanx all

  • Options
    hgtonighthgtonight ∞ · New Moderator

    @PRAB, using firefox, looking at the page source highlights malformed markup. This makes it easy to determine if it is a markup or style issue.

    I do not recommend styling malformed html to 'look right' as it will just lead to issues later down the road. That said, I am very happy you got it working!

    Welcome to the community!

    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.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    This can happen when adding plugins that put extra content in the boxes. Some themes take this into account(mine) and add the code needed to fix the problem.

    I don't think your problem is the same since they were using a defective theme along with some wp code.

    Yes css will fix almost anything. If the code is not in your theme, just add what is needed where is needed.

    Using firebug is a great option to find these codes.

  • Options

    @hgtonight. Ya you are right. :) And just now I found out Group element had nothing to do with my error. Hence, I remove that. And I would admit i also found changing height 160px fixed, made a 160px box for sending a message box (when in another user profile), unnecessarily. So as you said this is not a great way to fix such a bug, as the relevant css element would bring an issue somewhere else.

    Thanx for the encouragements!

  • Options

    @vrijvlinder. Ya in my case that must be the issue. I installed several plug-ins, and also changed default master. I don't know where it went wrong.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    Some plugins have their own css file you can edit. If you have a link I could take a look.

  • Options
    PRABPRAB New
    edited April 2013

    @vrijvlinder My issue was resolved by adding .PanelInfo li{ height:20px; }. :) I meant Group element had nothing to do with.
    Thanx

    Btw this thread is not started by me. :)

Sign In or Register to comment.