Favorites

[Sheldon]

Sheldon submitted a new resource:

Favorites - Your members certainly have one....

View attachment 60916
​

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]

Various uses from this resource:



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

 

[Ernest L. Defoe]

Hey one of those screenshots is from my site. The very first one actually. Love how @Sheldon did it.

 

[Code Monkey]

Is this like the persona chooser at Discussion Junkies?

 

[Ernest L. Defoe]

I'm not sure but it could be something similar......

 

[Sheldon]

Is this like the persona chooser at Discussion Junkies?

No. It's not.

 

[Code Monkey]

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]

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.

 

[Code Monkey]

Ah ok got it. thanks

 

[Wing]

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]

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?

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

 

[Wing]

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]

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

 

[Allan]

Thank you for sharing Shelton

Little correction:
- Replace:

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

- By:

<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)

.favchar2 {
    float: right;
    margin-bottom: -6px;
    margin-right: -8px;
    margin-top: -110px;
    opacity: 0.6;
}

Result: (with your minions)

 

[Sheldon]

That isn't a correction. Just another alteration.

 

[Allan]

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" />

 

[Sheldon]

I use it for other areas. It's for styling purposes, just as the image class is.

 

[Allan]

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;"/> ->

Result:

 

[Wing]

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

 

[xIsabel38]

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



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

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;
}