Change standard 'Online' Status to this ...

[Amylittlehands Amy]

OKay I've fixed the medal & percentage business, i'm having trouble aligning the percentage with everything else now. I thought it'd be easy but I must be placing the code in the wrong place. Here's what I have;

Code: Select all

         <!-- IF postrow.RANK_TITLE -->
            &bull; {postrow.RANK_TITLE}
         <!-- ENDIF -->
      </dt>
      <dd style="text-align: center">
         <!-- IF postrow.RANK_IMG -->
            {postrow.RANK_IMG}<br />
         <!-- ENDIF -->
       <dd style="text-align: center">
         <!-- IF postrow.PERCENTAGE_PROGRESS_NUM > -1 --><dd>{L_PROGRESS_TO_NEXT_RANK}<div class="rank_progress_bar"><span style="width:{postrow.PERCENTAGE_PROGRESS_NUM}%" class="bar"></span><span>{postrow.PERCENTAGE_PROGRESS}</span></div></dd><!-- ENDIF -->
       <!-- IF postrow.ONLINE_IMG -->
            {postrow.ONLINE_IMG}
         <!-- ELSE -->
            {postrow.OFFLINE_IMG}
         <!-- ENDIF -->
      </dd>
      <dd>&nbsp;</dd>

This is what I get:

Also, the online image has vanished when I placed the code in the html. AND for some reason the 'Test User Permissions' link cuts off too early and goes to the next row.
Here's an example:

And finally! Would you be so kind to help me make the memberlist look the way I want?

I'd like small avatars to the left side with possibly the username, rank image and percentage bar (Needs to be shrunk) to the right of the image (in the same column).
In the image:

A - Avatar here
B - Rank to be moved down and Username ontop
C - Percentage size of rank and in line with the username and rank.

If you could give me a step by step i'd appreciate it! : D

[faku1810 Facundo]

I'll try, but let's go one step at a time..

You have an error here

Code: Select all

<dd style="text-align: center">
         <!-- IF postrow.PERCENTAGE_PROGRESS_NUM > -1 --><dd>{L_PROGRESS_TO_NEXT_RANK}<div class="rank_progress_bar"><span style="width:{postrow.PERCENTAGE_PROGRESS_NUM}%" class="bar"></span><span>{postrow.PERCENTAGE_PROGRESS}</span></div></dd><!-- ENDIF -->

You're including unnecesary <dd> tags, just replace that part with

Code: Select all

<dd style="text-align: center">
         <!-- IF postrow.PERCENTAGE_PROGRESS_NUM > -1 -->{L_PROGRESS_TO_NEXT_RANK}<div class="rank_progress_bar"><span style="width:{postrow.PERCENTAGE_PROGRESS_NUM}%" class="bar"></span><span>{postrow.PERCENTAGE_PROGRESS}</span></div><!-- ENDIF -->

and it should fix the display. If it doesn't, you can try adding style="text-align:center" after class="rank_progress_bar".

About the Profile issue, I would need to see the template code to see what's wrong there.

And for memberlist... There's a MOD called Avatar on Memberlist, which allows to include a thumbnail of avatar in memberlist, I'll attach a screenshot of my forum so you can see if that's what you want. As for the location of nick and rank image and the bar size, I would need to see the template so I can give you more precise instructions.

[Amylittlehands Amy]

I'll try, but let's go one step at a time..

You have an error here

Code: Select all

<dd style="text-align: center">
         <!-- IF postrow.PERCENTAGE_PROGRESS_NUM > -1 --><dd>{L_PROGRESS_TO_NEXT_RANK}<div class="rank_progress_bar"><span style="width:{postrow.PERCENTAGE_PROGRESS_NUM}%" class="bar"></span><span>{postrow.PERCENTAGE_PROGRESS}</span></div></dd><!-- ENDIF -->

You're including unnecesary <dd> tags, just replace that part with

Code: Select all

<dd style="text-align: center">
         <!-- IF postrow.PERCENTAGE_PROGRESS_NUM > -1 -->{L_PROGRESS_TO_NEXT_RANK}<div class="rank_progress_bar"><span style="width:{postrow.PERCENTAGE_PROGRESS_NUM}%" class="bar"></span><span>{postrow.PERCENTAGE_PROGRESS}</span></div><!-- ENDIF -->

and it should fix the display. If it doesn't, you can try adding style="text-align:center" after class="rank_progress_bar".

About the Profile issue, I would need to see the template code to see what's wrong there.

And for memberlist... There's a MOD called Avatar on Memberlist, which allows to include a thumbnail of avatar in memberlist, I'll attach a screenshot of my forum so you can see if that's what you want. As for the location of nick and rank image and the bar size, I would need to see the template so I can give you more precise instructions.

Alrighty, problem 1 fixed (View topic looks perfect)

Here's a link to the HTML's needed;
www.mouldingminefield.com/download/html.zip

Any chance you can apply me a link to the MOD you used? I'll install it when I wake up later, it's 2am here I really need to go to bed haha!

Thanks again!

[faku1810 Facundo]

Sure, here's the link to the MOD: http://www.phpbb.com/community/viewtopic.php?t=2107326

I'll check the templates and try to adapt the changes you want. See you tomorrow

Btw, I just checked your forum and can't see the Rank Progress Bar (I see the numbers, but the bar is missing) and looking at your stylesheet.css you're missing some lines.

Open styles/glacier/theme/stylesheet.css and find

Code: Select all

@import url("portal.css");

add after

Code: Select all

@import url("rankprogress.css");

Then save and upload this file to your glacier/theme folder

rankprogress.css

Code: Select all

/**
* @package styles
* @version $Id: rankprogress.css $
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
---------------------------------------- */
.rank_progress_bar {
   border: 1px solid #A9B8C2;
   margin-right: 1em;
   position: relative;
   clear:right
}
.rank_progress_bar span {
   z-index:2;
   position:relative
}
.rank_progress_bar .bar {
   background-color: #65C0F3; // Change this if you want a different bar color.
   border-right: 1px solid #A9B8C2;
   display:block;
   height: 100%;
   z-index:1;
   position:absolute;
   top: 0;
   left: 0
}

The color I use is this •

[Amylittlehands Amy]

Sure, here's the link to the MOD: http://www.phpbb.com/community/viewtopic.php?t=2107326

I meant the URL for the avatar on memberlist hehe but don't worry I found one!
If you need any other files off me let me know : )

I still haven't found a way to put the online/offline image in the right place on view profile still hmmm ....

Edit: I installed the MOD, all worked fine. How would I remove that border around the images? Also, is there a way around to adding a default avatar to those who don't have one without removing current avatars? And is there a MOD out yet to re-size avatars? My members are lazy haha and I'd like them all a certain size/proportion.

[faku1810 Facundo]

Oh, geez, I must have copied the wrong URL lol, I knew you were asking for avatar on memberlist though. I had a lots of tabs at the moment so I must have missed it.

Anyways... For some reason you aren't calling the stylesheet.css in your overall_header.html. You need to add this line somewhere before the </head> tag.

Code: Select all

<link href="{T_THEME_PATH}/stylesheet.css" rel="stylesheet" type="text/css" media="screen, projection" />

I would add it after

Code: Select all

<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

As for the profile display... I was wrong, it wasn't ucp_profile_profile_info.html the one you need to edit, but memberlist_view.html instead. Do the following changes and it should display as you want.

find and delete

Code: Select all

<!-- IF S_ONLINE --> online<!-- ENDIF -->

if you want a default avatar for those who don't have one

Spoiler:

find

Code: Select all

   <!-- IF AVATAR_IMG -->
      <dl class="left-box">
         <dt>{AVATAR_IMG}</dt>
         <!-- IF RANK_TITLE --><dd style="text-align: center;">{RANK_TITLE}</dd><!-- ENDIF -->
         <!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->
      </dl>
   <!-- ENDIF -->

replace with

Code: Select all

   <dl class="left-box">
      <!-- IF AVATAR_IMG -->
         <dt>{AVATAR_IMG}</dt>
      <!-- ELSE -->
         <dt><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /></dt>
      <!-- ENDIF -->
         <!-- IF RANK_TITLE --><dd style="text-align: center;">{RANK_TITLE}</dd><!-- ENDIF -->
         <!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->
      </dl>

Don't forget to upload your own no_avatar.png to glacier/theme/images

find (though I'm not sure if this will work)

Code: Select all

<!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->

add after

Code: Select all

<!-- IF S_ONLINE or S_OFFLINE --><dd style="text-align: center;"><!-- IF S_ONLINE -->{ONLINE_IMG}<!-- ELSE -->{OFFLINE_IMG}<!-- ENDIF --></dd><!-- ENDIF -->

find

Code: Select all

<dt>{L_USERNAME}:</dt>
      <dd>

replace with

Code: Select all

<dt>{L_USERNAME}:</dt>
      <dd nowrap="nowrap">

If this doesn't work, try editing <dl class="left-box details" style="width: 80%;"> to make it wider.

And... I suppose that's it for view_profile.

For ucp_pm_viewmessage.html

find and delete

Code: Select all

<!-- IF S_ONLINE --> online<!-- ENDIF -->

if you want a default avatar for those who don't have one

Spoiler:

find

Code: Select all

<!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}">{AUTHOR_AVATAR}</a><br /><!-- ENDIF -->

replace with

Code: Select all

<!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}">{AUTHOR_AVATAR}</a><!-- ELSE --><a href="{U_MESSAGE_AUTHOR}"><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /></a><!-- ENDIF --><br />

Don't forget to upload your own no_avatar.png to glacier/theme/images

find

Code: Select all

<!-- IF RANK_IMG --><dd>{RANK_IMG}</dd><!-- ENDIF -->

add after

Code: Select all

<!-- IF S_ONLINE or S_OFFLINE --><dd><!-- IF S_ONLINE -->{ONLINE_IMG}<!-- ELSE -->{OFFLINE_IMG}<!-- ENDIF --></dd><!-- ENDIF -->

and that should do it.

About the frame around the avatars in memberlist, I think you can see that in memberlist_avatar.css.

if you don't want it find and delete, else if you want to change the color just edit the #e0e5e9.

Code: Select all

background: #e0e5e9 url("./images/cellpic1.gif") repeat-x;

For default avatar in viewtopic_body.html

find

Code: Select all

<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />

add after

Code: Select all

            <!-- ELSE -->
               <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}"><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /></a><!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /><!-- ENDIF --><br />

Edit: I just found a MOD that resizes avatars --> http://addedoptimization.com/phpbb3-avatar-resizing/

I tested it on my board and it works well, however it will keep the aspect ratio when resizing, and I suppose it won't affect smaller avatars. So it's up to you to see if it fits your needs.

[Amylittlehands Amy]

Anyways... For some reason you aren't calling the stylesheet.css in your overall_header.html. You need to add this line somewhere before the </head> tag.

Okay did this, even though I think it is being called by the line

Code: Select all

"{T_THEME_PATH}/stylesheet.css"

I could be wrong!

As for the profile display... I was wrong, it wasn't ucp_profile_profile_info.html the one you need to edit, but memberlist_view.html instead. Do the following changes and it should display as you want.

find and delete

Code: Select all

<!-- IF S_ONLINE --> online<!-- ENDIF -->

if you want a default avatar for those who don't have one

Spoiler:

find

Code: Select all

   <!-- IF AVATAR_IMG -->
      <dl class="left-box">
         <dt>{AVATAR_IMG}</dt>
         <!-- IF RANK_TITLE --><dd style="text-align: center;">{RANK_TITLE}</dd><!-- ENDIF -->
         <!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->
      </dl>
   <!-- ENDIF -->

replace with

Code: Select all

   <dl class="left-box">
      <!-- IF AVATAR_IMG -->
         <dt>{AVATAR_IMG}</dt>
      <!-- ELSE -->
         <dt><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /></dt>
      <!-- ENDIF -->
         <!-- IF RANK_TITLE --><dd style="text-align: center;">{RANK_TITLE}</dd><!-- ENDIF -->
         <!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->
      </dl>

Don't forget to upload your own no_avatar.png to glacier/theme/images

find (though I'm not sure if this will work)

Code: Select all

<!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->

add after

Code: Select all

<!-- IF S_ONLINE or S_OFFLINE --><dd style="text-align: center;"><!-- IF S_ONLINE -->{ONLINE_IMG}<!-- ELSE -->{OFFLINE_IMG}<!-- ENDIF --></dd><!-- ENDIF -->

find

Code: Select all

<dt>{L_USERNAME}:</dt>
      <dd>

replace with

Code: Select all

<dt>{L_USERNAME}:</dt>
      <dd nowrap="nowrap">

If this doesn't work, try editing <dl class="left-box details" style="width: 80%;"> to make it wider.

And... I suppose that's it for view_profile.

I did these edits but firstly you said memberlist_view.html but at the end of this quote you said viewtopic? I'm really confused. I did however include these within my memberlist_view.html and it didn't show the default avatar within the 'view members' page.

For ucp_pm_viewmessage.html
find and delete

Code: Select all

<!-- IF S_ONLINE --> online<!-- ENDIF -->

if you want a default avatar for those who don't have one

Spoiler:

find

Code: Select all

<!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}">{AUTHOR_AVATAR}</a><br /><!-- ENDIF -->

replace with

Code: Select all

<!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}">{AUTHOR_AVATAR}</a><!-- ELSE --><a href="{U_MESSAGE_AUTHOR}"><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /></a><!-- ENDIF --><br />

Don't forget to upload your own no_avatar.png to glacier/theme/images

find

Code: Select all

<!-- IF RANK_IMG --><dd>{RANK_IMG}</dd><!-- ENDIF -->

add after

Code: Select all

<!-- IF S_ONLINE or S_OFFLINE --><dd><!-- IF S_ONLINE -->{ONLINE_IMG}<!-- ELSE -->{OFFLINE_IMG}<!-- ENDIF --></dd><!-- ENDIF -->

and that should do it.

Okay I did all this and I think it's all fine, however how would I be able to style the name, rank, title etc ... in the same way as it does when looking at a post.

1.PNG

(9 KiB) Not downloaded yet

This is what it looks like when viewing a PM.

Here is how I'd like it to look (Top part of the image)[/quote]

About the frame around the avatars in memberlist, I think you can see that in memberlist_avatar.css.

if you don't want it find and delete, else if you want to change the color just edit the #e0e5e9.

Code: Select all

background: #e0e5e9 url("./images/cellpic1.gif") repeat-x;

.

I replaced it with this code;

Code: Select all

.thumbnail {
   z-index: 0;
   position:relative;
}

a.thumbnail:hover {
   background-color: transparent;
   z-index: 50;
}

.thumbnail span {
   position: absolute;
   background: transparent; repeat-x;
   left: 0px;
   display: none;
   text-decoration: none;
}

.thumbnail span img {
   border-width: 0;
   padding: 2px;
}

a.thumbnail:hover span {
   position:absolute;
   display:block;
   top: 20px;
   left: 7px;
}

.memberlist-avatar {
   width: 22px;
}

And it worked!
Also, is there any way I can change it so the thumbnails are 100x100 or contrain proportions while keeping to the same-ish size? oh god I made no sense, I'm the thumbnails slighty larger in percentage? And maybe no hover image?

For default avatar in viewtopic_body.html

find

Code: Select all

<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />

add after

Code: Select all

            <!-- ELSE -->
               <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}"><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /></a><!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.png" alt="" /><!-- ENDIF --><br />

I did these edits and no effect.

Have a look at the bottom part.

Of course, i did refresh every element of the site and my browser.

Edit: I just found a MOD that resizes avatars --> http://addedoptimization.com/phpbb3-avatar-resizing/

I tested it on my board and it works well, however it will keep the aspect ratio when resizing, and I suppose it won't affect smaller avatars. So it's up to you to see if it fits your needs.

And okay great, I'll have a look at that.

So to summarize:
* View PM default avatar is a success but needs to be aligned central and look like the layout of the ranks etc in viewtopic.
* Viewtopic default avatar failed
* Memberlist half failed, no default avatar but border is gone

Here's a link to all the files we've discussed!
http://www.mouldingminefield.com/download/HTML2.zip

Edit: I forgot to mention what I'd like in memberlist view again.

A - Avatar here
B - Rank to be moved down and Username ontop
C - Percentage size of rank and in line with the username and rank.