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...
 
Various uses from this resource:

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

On the Call of Duty site, the prestige icons, not the userbars. I repeat, not the userbars.
 
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.
 
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.
 
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?
 
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.webp


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.webp
 
Gotcha,

So I am guessing you simply places these images into the /images folder for them to be correctly linked up to the preferences?
 
Place them wherever you want, really... just make sure your code matches and they are called from the proper spots.
 
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.webp Screenshot_4.webp
 
Last edited:
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" />
 
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.webp

Result:

Screenshot_7.webp

Screenshot_8.webp
 

Attachments

  • Screenshot_6.webp
    Screenshot_6.webp
    42.8 KB · Views: 54
Got this working, with numerous other options to display in the post profile. Really appreciate it @Sheldon , its a brilliant code edit. :cool:


persona.webp
 
When I try to relocate the image down near the message info it pushes everything down.

fix.webp

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.webp

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 Bottom