Having Problems with User Box when signed in...

[RoxNRoll]

I've modded and ironed out some issues with a free template I downloaded, but there's one issue I simply cannot solve, because I do not know where to look.  (I'm not a coder, so I only fiddle with stuff I can work out.)

Here's the problem:



Basically, when you're logged in, the user info gets pushed under the user info box.  I imagine it's a bit of formatting code gone awry somewhere, but I have no idea where to look.

When you're not logged in, the log in box IS in the user box area.

The theme I've altered is Illustrative - it's being used for a dog rescue forum.  Very nice theme, and works very nicely with the alterations I've made. 

Can anyone help me out?

Thanks.

[Antechinus]

Just guessing from the picture, it seems the fourth line of text is so long that it wont fit side by side with the avatar in the user box. The userbox should have a side padding set in the css. If you reduce that you may gain enough space to do the trick.

[RoxNRoll]

I've just given that a go.  The box moved up a few pixels, the avatar centered itself vertically (still aligned to the left - looks in the right place now), but the text is still underneath.

It's only got 5px padding now, and I altered the box size to 400... looks like there should be enough room, but it's not moving.

[Antechinus]

You changed the vertical padding, not the horizontal.

If it was written something like this:

whatever {
    padding: 25px 15px;
}

....then the 25px is vertical and the 15px is horizontal. If there are four settings (like 25 15 25 15) they go clockwise from the top.

[RoxNRoll]

I tried altering all the paddings to 0 and the box size to 500, and that didn't work either.   

[Antechinus]

Oh bother. Well I checked that theme and it was removed from the Theme Site for causing errors on people's sites. Also, it hasn't been updated since RC4, so it would need some work anyway to get it running properly on 2.0 Final. Now those points aren't related to your current problem but they may be worth considering.

Without seeing the theme running live it's a bit hard to diagnose things.

[RoxNRoll]

Other than this, it seems to be working fine for me.  There were some glitches in the background images that means some text can't be seen, but other than that, I've not noticed anything too disasterous.

I'm not afraid to put work in, I just wish I knew more about css!

[RoxNRoll]

If you log in and you don't have an avatar, the text is in the box.

If it were html I'd say there's a break inbetween the avatar and text parts, but it isn't so I have no idea.   

EDIT:  I've just tried; without an avatar it's fine, with one, the text moves.

[Antechinus]

Yup. Got it. Fussilet has made a couple of very basic css errors. A paragraph (which is what is wrapping the avatar image) is a block level element. This means that unless it is floated it will force a line break before and after it.

The text details (greeting, etc) are in an unordered list. Betcha can't guess what sort of element that is.

Try this:

Koodi [Valitse] Laajenna

#userarea p, #userarea ul {float: left;}

[RoxNRoll]

Now here's the thickie question...  where do I put that code?   

Am I adding it as a new bit after the other user area code?

[Antechinus]

At the end of the file should be fine. Oh and there are a couple of other errors in the css.

Koodi [Valitse] Laajenna

#footerarea {
font-family: Treubced MS;
font-size: 10px;
color: #fff;
text-decoration: none;
width: %100;
padding: 30px 0 0 50px;
                text-align: center;     
}

....is a mess. Should be:

Koodi [Valitse] Laajenna

#footerarea {
font-family: "Trebuchet MS";
font-size: 10px;
color: #fff;
text-decoration: none;
width: 100%;
padding: 30px 0 0 50px;
        text-align: center;     
}

This part:

Koodi [Valitse] Laajenna

#userarea a:hover {
color: green;
text-decoration: none;
border-bottom: 1px dotted brown;

...is missing a closing } bracket. And this:

Koodi [Valitse] Laajenna

#navi{ height:38x; background: url(../images/theme/navbg.jpg) repeat-x;}

...should be like this:

Koodi [Valitse] Laajenna

#navi{ height:38px; background: url(../images/theme/navbg.jpg) repeat-x;}

Note that after changing css you'll need to clear your browser cache and force a reload to see the changes.

[Antechinus]

Looks better now. Only other tweak needed is some top padding on the unordered list. Something like this should work:

Change this:

Koodi [Valitse] Laajenna

#userarea p, #userarea ul {float: left;}

to this:

Koodi [Valitse] Laajenna

#userarea p {float: left;}
#userarea ul {float: left; padding-top; 30px;}

[RoxNRoll]

You are a star!   ..although I don't think I've added that properly, it's still at the top.  Should I just increase the padding value?

And the only last thing I need to work out are that some buttons in the normal and admin sections don't appear unless you're hovering over them.   

Thank you so much for all your help  Have a wag from the dogs...     

[Antechinus]

Oh sorry. Typo on my part. It should be #userarea ul {float: left; padding-top: 30px;}

IE: with a colon after padding-top instead of the semi-colon I typed before.

The buttons thing would just be link colours in relation to background colour. I'll take a quick look around.

[RoxNRoll]

Changing the padding to 20, and it's perfect. 

[Antechinus]

Ok try this. Find:

Koodi [Valitse] Laajenna

#adm_submenus, #adm_submenus ul
{
height: 3em;
overflow: auto;
}

Change to:

Koodi [Valitse] Laajenna

#adm_submenus, #adm_submenus ul
{
height: 3em;
overflow: auto;
}
#adm_submenus ul li a:link, #adm_submenus ul li a:visited
{
color: #84c40a;
}

That will make them a nice green to match the buttons beside them, but you can change the hex code to any colour you like (just note that when doing css you have to use the infernal American spelling for colour).

[Antechinus]

Oh yeah, there's some missing table headers in the profile > buddies section. They will be missing in some other areas too.

Find:

Koodi [Valitse] Laajenna

.catbgb, .catbgb, tr.catbgb td, tr.catbgb td, tr.catbgb th, tr.catbgb th
{
color: #fff;
font-family: Arial, Helvetica, Verdana, Sans-Serif;
font-size: 1.1em;
font-weight: bold;
background: #222 url(../images/catbg.gif) repeat-x;
}

Replace:

Koodi [Valitse] Laajenna

.catbgb, .catbgb, tr.catbgb td, tr.catbgb td, tr.catbgb th, tr.catbgb th,
.catbg, .catbg, tr.catbg td, tr.catbg td, tr.catbg th, tr.catbg th
{
color: #fff;
font-family: Arial, Helvetica, Verdana, Sans-Serif;
font-size: 1.1em;
font-weight: bold;
background: #222 url(../images/catbg.gif) repeat-x;
}

He's a bit of a rough bugger, this Fussilet.

[RoxNRoll]

Right, I'll get on to changing that in a mo. 

If I look for the other table headers, is it likely to a similar change?  Presumably I can have a look through for similar code and see what the differences are?

The wording next to the buttons are visible now, but the only issue is that when the button is on the current page or feature, you can't see the word (as it's green, and so is the button).  Same with the when you hover.  Is there a hover colour variable too?

I can't tell you how grateful we are; I certainly didn't expect you to go to all this work - thank you. 

[Antechinus]

Ok, I forgot that would also make the active button text green. He's a bit of a rough bugger, this Antechinus.

You'll need a little extra to sort that. Just add this after the other #adm_submenu bits

Koodi [Valitse] Laajenna

#adm_submenus ul li a.active:link, #adm_submenus ul li a.active:visited
{
color: #ffffff;
}
#adm_submenus ul li a.active:hover, #adm_submenus ul li a:hover
{
color: #000000;
}

That'll put the active button text back to white, and the hover button text back to black.

And on that note I think I'll leave you to it. Cheers.

[Antechinus]

Right, I'll get on to changing that in a mo. 

If I look for the other table headers, is it likely to a similar change?  Presumably I can have a look through for similar code and see what the differences are?

Yep, you can do that. It helps if you have some browser tools to get element names off the screen. I'm a Firefox fan so I run the Web Developer add-on (which rocks) but even IE has some dev tools built in these days, and Safari, Chrome and Opera have their versions too. Have a look around the browser menu for "Dev tools" or "Development" or similar.

I can't tell you how grateful we are; I certainly didn't expect you to go to all this work - thank you. 

No worries. You caught me when I was slacking anyway.