Buggy Profile Page

xianith · April 2013

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.

vrijvlinder · April 2013

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

each page is considered a body, not #Body but body . So in order to change page/body specific code, you would add body. plus the elements you want to change.

example:

body.Profile #Content

body.Profile #Panel

etc. You get all this by using Firebug and inspecting the element. It will show you what you need to create the css needed if it is not in the code already.

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

vrijvlinder · April 2013

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 ?

xianith · April 2013

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

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

xianith · April 2013

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

vrijvlinder · 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;
}

vrijvlinder · April 2013

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

each page is considered a body, not #Body but body . So in order to change page/body specific code, you would add body. plus the elements you want to change.

example:

body.Profile #Content

body.Profile #Panel

etc. You get all this by using Firebug and inspecting the element. It will show you what you need to create the css needed if it is not in the code already.

hgtonight · April 2013

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.

xianith · April 2013

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.

vrijvlinder · April 2013

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.

PRAB · 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

hgtonight · April 2013

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

vrijvlinder · April 2013

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.

PRAB · April 2013

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

PRAB · April 2013

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

vrijvlinder · April 2013

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

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

Buggy Profile Page

Best Answer

Answers