Complications in editing mini-profile appearance

[NIXIE]

Forum URL: oasis.boards.net

Hey, I was just wondering how I could go about editing the appearance of the mini-profile template for guests!

I'm simply looking for a way to choose the font face and size of the guest's name and the "Guest" part below.

This site is a good example of what I mean :-)

Thank you in advance!

[JD]

The build your own mini profile code has a section for guest profiles. Just take out the bit for the main profile and use the guest one. You can find the code here.

[NIXIE]

Hello again, Obsidian!

Thank you for the code advice - it's cleared up my original problem, but unfortunately opened up others (!!)

Discovering this code made me realise I can make members' mini-profiles look better, so I got rid of my old layout... But I've had a few issues!

First of all, custom titles simply don't show up on any mini-profile on the site, and contact icons make an appearance intermittently (i.e. this one doesn't have any, this one does)...

Also, it's stopped this code from working:

<script type="text/javascript">
/* Mini-Profile Replace Anything Global by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* http://interoceandesigns.com or http://lsdp.proboards.com */

var fRep=[ // "Text to Replace", "Replacement".
  ["online","<font color=4fb444>online!</font>"],
  ["offline","<font color=7d6d6d><b>offline</b></font>"]
];

var tr=document.getElementsByTagName("tr"),a,b,i,n=/n=viewprofile&/,x=-1;
if(/(calendar|pm|pre)view|viewprofile|search2|display/i.test(pb_action)){
  while(tr[++x]){a=tr[x].firstChild;
     if(a&&a.width=="20%"&&n.test(a.innerHTML)){ b=a.innerHTML;i=-1;
        while(fRep[++i]){b=b.replace(fRep[i][0],fRep[i][1]);}
        a.innerHTML=b;
}}}
</script>

So basically, now what I need to do is recover the online/offline status colouring feature from the code above to put into in my new mini-profiles, and work out how to get custom titles and contact icons to show up on every mini-profile... :S

Also, can I adjust the width of the area containing the rank, custom title, status and posts (aligned to the left) and contact icons (aligned to the right) so that it's 100px and therefore in line with the avatar? :3

Here's the code:

<style type="text/css">
<!--
     .mini_profile { padding: 0px; }
     .mini_profile .titlebg { background-image: url(Gradient URL); }
//-->
</style>
<span id="mini_profile_member" style="display: none; margin-top: 20px;">
     <table class="bordercolor" width="80%" align="center" cellspacing="1" cellpadding="2">
        <tr>
              <td style="width: 100%; text-align: center; padding: 3px;" class="titlebg">
                 <font size=2><b>
                 <font style="text-transform: lowercase;">
               <span id="user_name" name="user_name">##value</span>
                 </font>
                 </b></font>
               </td>
          </tr>
        <tr>
               <td align="justify" class="windowbg">
                        <center><span id="avatar" name="avatar"><br />##value<br /><br /></span></center>
                        <span id="rank" name="rank">##value<br /></span>
                        <font size="1">
                        <span id="custom_title" name="custom_title">##value<br /></span>
                        <span id="status" name="status"><i>##value</i><br /></span>
                        <span id="posts" name="posts"><b>##value</b> house points<br /></span>
                        <p align=right><span id="contact_icons" name="contact_icons">##value</span></p>
                      </font>
              </td>
        </tr>
        <tr>
              <td style="height: 25px;" class="titlebg">
              </td>
        </tr>
     </table>
</span>
<span id="mini_profile_guest" style="display: none; margin-top: 20px;">
     <table class="bordercolor" width="80%" align="center" cellspacing="1" cellpadding="2">
         <tr>
              <td style="width: 100%; text-align: center; padding: 3px;" class="titlebg">
                 <font size=2><b>
                 <font style="text-transform: lowercase;">
                 <span id="guest_name" name="guest_name">##value</span>
                 </font>
                 </b></font>
              </td>
        </tr>
        <tr>
              <td align="justify">
                 <br /><center><img src="http://i1062./t483/nixiepoo/oasisrpg/Defaultv2.png"></center><br />
                 <font size="5"><font face="Wire One"><color="#b26c65">
                 passing visitor
                 </color></font></font>
              </td>
        </tr>
     </table>
</span>

<script type="text/javascript">
<!--
/******************************************
*
* Build Your Own Mini-Profile v 0.2
* Coded by Ross of http://support.proboards.com
* and http://101support.proboards43.com
* and http://swg.proboards4.com
* this code cannot be reposted outside of the
* forums listed above unless done so by myself
*
*******************************************/

if(location.href.match(/(ion=(display|(pm|calendar)?view|search2|(user)?recent)|error)/)) {
var new_script = document.createElement('script');
new_script.type = "text/javascript";
new_script.src = "http://freelancedev.net/ecreations/codes/build_your_own_mini_profile/v0-2.js";
document.getElementsByTagName('head').item(0).appendChild(new_script);
}
//-->
</script>

[JD]

Change this -
<font size="1">
<span id="custom_title" name="custom_title">##value<br /></span>
<span id="status" name="status"><i>##value</i><br /></span>
<span id="posts" name="posts"><b>##value</b> house points<br /></span>
<p align=right><span id="contact_icons" name="contact_icons">##value</span></p>
</font>

to this -
<div width="100px"><font size="1">
<span id="custom_title" name="custom_title">##value<br /></span>
<span id="status" name="status"><i>##value</i><br /></span>
<span id="posts" name="posts"><b>##value</b> house points<br /></span>
<p align=right><span id="contact_icons" name="contact_icons">##value</span></p>
</font></div>

That should make your custom title etc box the same width as your avatar.


I honestly don't know how to change those online, offline messages in the same way as that code, I'm sorry but did you try placing that code in different spots - above the BYO mini profile code, below it and in between the span writing of the mini profile and the javascript code of the BYO? Sometimes positioning is the key.

[NIXIE]

I'm afraid that didn't work :/ (But thanks for trying!)

Still need to get custom titles and contact icons working; colour the online/offline statuses (and add an exclamation mark to the online one); and set the width lower half of the mini-profile at 100px so it's in line with the avatar above. This kinda thing!

Also, just noticed that the mini-profiles are stretching the boards badly (as you can see in this thread), so I'd love for this to get sorted ASAP haha!

[JD]

You sure it didn't work? I don't see the code in there at all...?

If you don't leave the code in so that we can see we don't know how to tweak it to make it work on your forum. My (very basic) guess is that it worked but you have the default cell padding in place (3px by the looks of things) which would have made it wider (by about 6px) and not look the right size. But I don't know for sure because you've removed the code.

You can also do it via css and class tags. So I can write that for you if the above really doesn't work.


I do not, however, know why the MP is stretching the page - I've never encountered that before, sorry. I might suggest putting an actual width in here -
<td style="width: 100%; text-align: center; padding: 3px;" class="titlebg">
- like 120px or something rather than 100% and see if that makes a difference but that's no more than an educated guess, sorry.

[NIXIE]

Poop, sorry!! I took out the <div width="100px"></div> when I realised it didn't work, and also because I thought that was what was stretching the boards (it was only after I tried putting that in that I noticed the stretching)!

Unfortunately the 120px thing didn't work either (I've left it in for you, hehe!)

But here's the good news - I forgot that I tried every position to put the coloured status code thing in aside from in between the spans and JavaScript.

Just tried it and it works in that position!! So-- thank you very much for that

[JD]

Glad that worked for you. And yeah the 120px was a plain guess - I don't know why it's stretching the page. Sorry.

As for the 100px thing I think I know why it's not working. If changing the 100px to 94px (to counteract the padding) doesn't work, then try changing this-

<td align="left" class="windowbg">
                        <center><span id="avatar" name="avatar"><br />##value<br /><br /></span></center>
                        <span id="rank" name="rank">##value<br /></span>
                        <div width="100px"><font size="1">
                        <span id="status" name="status">account is ##value<br /></span>
                        <span id="posts" name="posts"><font color=70837d><b>##value house points</b></font><br /></span>
                        <span id="custom_title" name="custom_title">##value<br /></span>
                        </font></div>
              </td>

To this -


<td align="left" class="windowbg">
                        <center><span id="avatar" name="avatar"><br />##value<br /><br /></span></center>
                        <span id="rank" name="rank">##value<br /></span>
                        <table cellpadding="0px" cellspacing="0px" border="0px"><tr><td></td><td width="100px"><font size="1">
                        <span id="status" name="status">account is ##value<br /></span>
                        <span id="posts" name="posts"><font color=70837d><b>##value house points</b></font><br /></span>
                        <span id="custom_title" name="custom_title">##value<br /></span>
                        </font></td><td></td></tr></table>
              </td>


That 100 might need to be 94 like the other one if it doesn't work straight off of the bat.

[NIXIE]

I did a bit of research on the thread that you linked me to originally containing the B.Y.O. code and managed to get the custom titles to work. :-) For some reason, it's only enabled if the member group has stars!

Also, defeated contact icons and board-stretching problem in one... By removing the contact icon section from the code. Turned out the (right) alignment I had for the icons (which was different to the other elements, which were aligned to the left) was what was messing with the MP/board widths! I can deal with this loss as contact icons are still available on the collective "Members" page.

The only thing left is this width issue, which I'm afraid still hasn't been resolved by

<div width="94px"></div>

or

<table cellpadding="0px" cellspacing="0px" border="0px"><tr><td></td><td width="100px"></td><td></td></tr></table>

or

<table cellpadding="0px" cellspacing="0px" border="0px"><tr><td></td><td width="94px"></td><td></td></tr></table>

Sorry to be a pain!!

[JD]

Damnit this is really annoying. I have no idea what is making this thing be so irritating.

My very last guess is using CSS but still I don't know how that will work any better than my previous ideas.

If you keep that last one and change the width="94px" to class="mpinfo"

Then post this above your coding -

<style type="text/css">
.mpinfo {
width:94px !important;
padding:0px;
}
</style>

See if that works.

If not it might be the spans themselves making it wider so you can try putting width classes inside the span tags, but after that I'm out, sorry :S

[NIXIE]

Hmmm... Unfortunately the mpinfo CSS didn't work either.

But I didn't try putting width classes inside the span tags because I'm not sure how to do that, sorry!

Could you help me with that please?

[JD]

Er.... not sure I know what you mean. You shouldn't need to put width classes in span tags. The CSS I gave should work in the td tag - just replace what you did have as the width ones for the new class ones. That make sense?

[NIXIE]

Oh no, I didn't mean I wanted to try putting width classes in span tags with the CSS, I meant I wanted to try that span method because the CSS one didn't work!

[JD]

Oh!! Sorry sorry - I just reread my post which made yours make way more sense lol.

you can just pop width="X" inside the span tags themselves. <span width="x"></span> Kinda thing. Or you can do it like this - <span style="width:X;"></span>

To be honest, I don't know the hard and fast rules on how codes effect each other and they always seem to work in different ways depending on my forum - it's very strange. So that's why I'm offering so many suggestions because there are several different ways of writing the code in order to try and get it to work.

If neither of the above works then you've run me dry and I have no other ideas, which is highly frustrating and annoying. I'm sorry