News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Advanced Profile Field Displays Strangely on Profile Summary

Started by WantSome, June 21, 2012, 06:07:07 PM

Previous topic - Next topic

WantSome

Hi Everyone,

So, I've added a field using the advanced profile field options in 2.0.2 on my test forum.  I want to use this on my live forum eventually to display little awards or bonuses for participation in contests or whatever.  So I've checked 'allow BBC' and 'Show on topic view' and everything looks pretty good when viewing a topic. 

However, when I go to the user's profile summary, these icons seem to be layered underneath the options to 'view posts' or 'send pm', making those options difficult to see on the profile summary.  I will link a screenshot so you can see what I mean.

Screen shot showing the profile summary page with overlapping images (of butterflies in this example):  http://www.webpagescreenshot.info/img/479665-6222012125738AM

Screen shot of the topic view, displaying perfectly:  http://www.webpagescreenshot.info/img/941309-622201210202AM

Can someone please tell me how to get the profile summary to display nicely so that it looks more like the topic view?  As you can see, the fact that the butterflies are underneath the links in the profile summary make it hard to see the links.  This may get even worse when I use the images with the colours that match the forum's theme - they'll be even harder to see!

Any help is appreciated.



All Colours Sam

On your index.css find:

#basicinfo ul li {
display: block;
float: left;
height: 20px;
margin-right: 5px;
}

remove the height part, if you still want to accommodate the items even more, each li has a custom class:  class="custom_field"  just create a new rule for that class on your index.css
Oh, wouldn't it be great if I *was* crazy? ...then the world would be okay
Suki

WantSome

Thanks for the reply, Suki.

I went to the theme index.css, found that piece of code and took the height item out, but that didn't work.  It still has the images behind each other and the overflow scroll bar thing.

I'm not familiar with coding at all, so could you walk me through how to set up a li class?

All Colours Sam

I can still see the height on this css part:

#basicinfo ul li {
display: block;
float: left;
height: 20px;
margin-right: 5px;
}

take the height or make it larger:

height: 130px;
Oh, wouldn't it be great if I *was* crazy? ...then the world would be okay
Suki

WantSome


All Colours Sam

Oh, wouldn't it be great if I *was* crazy? ...then the world would be okay
Suki

WantSome

This is so weird.  I'm looking at the only instance of that code in the index.css file on this theme and the height element is not there any more.

Should I be doing this in the default theme?

ziycon

Make this change for the theme your using, if this isn't working, comment out or remove the height attribute from all themes.

Advertisement: