Topic: problem on profile page

[rickmastfan67]

SMF 2.0.2 - Modified theme based off "Core".

Ok, the problem I'm having is that the color I added for the profile page doesn't fully fill the avatar/username box for some odd reason leaving an ugly white outline around it.  Does anybody know how I can fix this so that the green color will fill the box completely all of the time no matter what size the person's monitor is?  The color there is coming from the "windowbg" class, just so you know.

Thanks.

[Yoshi]

Hi rickmastfan!

Do you have a live example of this problem?

And can you attach the theme's index.css please? You can find it in:
{siteroot}/Themes/theme/css.

[rickmastfan67]

Do you have a live example of this problem?

Unfortunately, I don't.  I'm building this template based off the site's 1.1.16 custom theme so that we can upgrade the forum to 2.0 in the near future.

index.css attached below.

It seems that changing the "width" line in "#basicinfo" helps with this problem, but it isn't a perfect fix as the white on the side disappears @ 22%, but the white at the bottom in the picture in the first post remains.

[Yoshi]

Might also need your Profile.template.php

[rickmastfan67]

Might also need your Profile.template.php

Not possible.  The "Core" theme didn't come with one, so, I don't have a modified one at this time.  So, as far as I can tell, it's running off the Profile.template.php file in "default" theme, which hasn't been modified by me.

[LFrancke]

Maybe not the best way but go to line 2603 of the index.css file, this is the #basicinfo section.

Change the width to 22% and see if that works.

[rickmastfan67]

Maybe not the best way but go to line 2603 of the index.css file, this is the #basicinfo section.

Change the width to 22% and see if that works.

Already have done that..

It seems that changing the "width" line in "#basicinfo" helps with this problem, but it isn't a perfect fix as the white on the side disappears @ 22%, but the white at the bottom in the picture in the first post remains.

[LFrancke]

hmmm ... in that case 

do this ...

at line 2580,  #profileview change the background-color to what ever you want

at line 2592 , #basicinfo .content add a line for background-color

at line 2604, #basicinfo add a line for background-color

that just colors the left square for the name/avatar. If you want to do the entire field then add:

at line 2597 ( or there abouts ), #detailedinfo .content add background-color.


edit: you may also need to add background-color in the #basicinfo h4 section.

[rickmastfan67]

at line 2580,  #profileview change the background-color to what ever you want

Doing that also changes the border color, which is something I don't want to do as I like the 1px white outline.

Now, if there was just a way to get "#basicinfo" to automatically match whatever height that "#detailedinfo" uses via the CSS if possible since more data shows up in "#detailedinfo"....

Then again, I have to make sure I don't mess up the older style profile screen that you get when you hit the arrow on the top right of the profile screen.

[rickmastfan67]

Ok, I found a way around this in the "Core" theme.

1) I made a copy of the "Profile.template.php" file and put it in my theme.
2) I opened the file in my editor and did a search for the class "profileview".
3) At the first "profileview" (line 53), I copied and duplicated that line right below it and added a tab to the new second one (duplicated copy on line 54).
4) Then I changed "profileview" to "profileview1" on line 54 (shown below).

Code: [Select]

// Display the basic information about the user
echo '
<div id="profileview" class="flow_auto">
<div id="profileview1" class="flow_auto">
<div class="cat_bar">
<h3 class="catbg">
5) Then I went down to line 960 (will be 961 after the edit in #3) and changed the "profileview" there to "profileview2" and saved the file.
6) Now went to open the "index.css" file of the *core* theme (in the theme I'm working on of course) and went down to line ~2579.
7)

Code: (Find:) [Select]

/* Fixes for the core theme */
#profileview
{
padding: 1px;
border: 1px solid #696969;
background-color: #ecedf3;
}
#profileview .content
{
border: none;
}
#basicinfo .content
{
padding: 1em;
}
#detailedinfo .content
{
padding: 0.7em 1.2em;
border-left: 1px solid #aaa;
}


Code: (Replace With:) [Select]

/* Fixes for the core theme */
#profileview
{
padding: 1px;
border: 1px solid #696969;
background-color: #ecedf3;
}
#profileview .content
{
border: none;
}
#profileview1
{
border: 1px solid #696969;
background-color: #ecedf3;
}
#profileview2
{
padding: 1px;
border: 1px solid #696969;
background-color: #ecedf3;
}
#profileview2 .content
{
border: none;
}
#basicinfo .content
{
padding: 1em;
background-color: #ecedf3;
}
#detailedinfo .content
{
padding: 0.7em 1.2em;
border-left: 1px solid #aaa;
}

And you're done.  Adjust the background colors to your pleasing.

Marking this as solved.