Sheldon

Well-known member
Sheldon submitted a new resource:

Favorites - Your members certainly have one....


Very easy template modification combined with a custom user field to allow your users to set their "favorites". I can see this used on gaming forums, with the logo of their favorite game or character, a person noted they could add small images of books, a sports site with logos of teams, numbers of players, home/away jersey's, etc. I think it is very flexible, considering you are using just CSS and whatever images you decide you would like your...
Read more about this resource...
 

Sheldon

Well-known member
Various uses from this resource:

11.png Screenshot_3.png Screenshot_4.png Screenshot_5.png Screenshot_6.png Screenshot_7.png Screenshot_8.png Screenshot_9.png

On the Call of Duty site, the prestige icons, not the userbars. I repeat, not the userbars.
 

Code Monkey

Well-known member
I'm confused as to what this does exactly then. I see the screen you put on the resource page and then the ones you put in the thread and it looks like two different things. When I look at the first one it looks like you can put an image in the user info. Then these thread screens it looks like you can put several in a row.
 

Sheldon

Well-known member
It's the same thing, all based off this resource. It is all in how creative you get with it.

You can put 1 image, 9 image, 437 images... again, it's all up to how creative you are or want to be. I've learned that sometimes the best things come from a branch of the original.
 

Wing

Active member
I have completed all the steps. And I now want to place the images for each option. Where do I define the image URLs for each preference option?
I see there is a entry box here: http://www.optiksgaming.com/admin.php?user-fields/persona/edit in the "General Options" called Value Display HTML.

Guessing that is where you define the images for each selection? If so, how do you correctly link each option to the image?
 

Sheldon

Well-known member
I have completed all the steps. And I now want to place the images for each option. Where do I define the image URLs for each preference option?
I see there is a entry box here: http://www.optiksgaming.com/admin.php?user-fields/persona/edit in the "General Options" called Value Display HTML.

Guessing that is where you define the images for each selection? If so, how do you correctly link each option to the image?
fav3.png


The block on the left is the name of your image file, without the png gif or jpg extension added. Simply the name. The block on the right is what is used to identify it when the member goes to choose on the dropdown....

fav5.png
 

Wing

Active member
Gotcha,

So I am guessing you simply places these images into the /images folder for them to be correctly linked up to the preferences?
 

Sheldon

Well-known member
Place them wherever you want, really... just make sure your code matches and they are called from the proper spots.
 

Allan

Well-known member
Thank you for sharing Shelton (y)

Little correction:
- Replace:
Code:
<xen:if is="{$user.customFields.favchar}">
<div align="center" class="favchar"><img class= "favchar2" src="/favchar/{$user.customFields.favchar}.png" /></div>
</xen:if>
- By:
Code:
<xen:if is="{$user.customFields.favchar}">
<div align="center"><img class="favchar2" src="/favchar/{$user.customFields.favchar}.png" /></div>
</xen:if>
Custom css: (in EXTRA.css)
Code:
.favchar2 {
    float: right;
    margin-bottom: -6px;
    margin-right: -8px;
    margin-top: -110px;
    opacity: 0.6;
}
Result: (with your minions)

Screenshot_6.png Screenshot_4.png
 
Last edited:

Allan

Well-known member
That isn't a correction. Just another alteration.
In your code, what is this class ? ("favchar")

here:
<div align="center" class="favchar"><img class= "favchar2" src="/favchar/{$user.customFields.favchar}.png" /></div>

I removed the space here: <img class=HERE"favchar2" src="/favchar/{$user.customFields.favchar}.png" />
 

Allan

Well-known member
Display favorites directly ! (by bladinium):
  • Edit your Favorites field
  • Go to "Options for choice Fields"
  • Choice "Radio Buttons"
  • Replace the text of favorites by <img src="/forum/figurine/gru1.png" alt="gru1" style="width:44px; height:64px;"/> (look screen)
example:
<img src="/forum/figurine/gru1.png" alt="gru1" style="width:44px; height:64px;"/> -> gru1.png

Result:

Screenshot_7.png

Screenshot_8.png
 

Attachments

Wing

Active member
Got this working, with numerous other options to display in the post profile. Really appreciate it @Sheldon , its a brilliant code edit. :cool:


persona.png
 

xIsabel38

Well-known member
When I try to relocate the image down near the message info it pushes everything down.

fix.png

So here's what I tried to do to fix it.
  • Disable Post Ratings Add-on
    Didn't fix
  • Alter the CSS numbers
    Pushed it further down or simply moved up and was barely legible (appeared okay on users without rank banners)
  • Remove the EXTRA.css code
    This worked best, but placed the image underneath the message field
fix2.png

So I'm thinking that this may look best. But how would I relocate it below the post ratings bar?
I also changed the CSS to this, is this wrong or advised?

.mysystem2 {
opacity: 0.9;
}
 
Top