• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Sheldon

Well-known member
#1
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...
 

Code Monkey

Well-known member
#7
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
#8
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.
 

Sheldon

Well-known member
#11
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
#12
Gotcha,

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

Allan

Well-known member
#14
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
#16
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
#18
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

xIsabel38

Well-known member
#20
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;
}