Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

Is there a Points Plugin that allows for images instead of custom titles?

+5 votes
249 views
asked Feb 21, 2017 in Plugins by Nip351
edited Feb 28, 2017 by Nip351

...or does the allowable HTML when setting up titles allow me to just post images instead of Titles?

For example, instead of:

Rank 1 = 100 pts "Knowledgable"
Rank 2 = 200 pts "King"
Rank 3 = 300 pts "Master"

I'd like to have the following corresponding image display instead of a custom title.

Rank 1 = 100pts - Display Image ../rank1.jpg
Rank 2 = 200pts - Display Image ../rank2.jpg
Rank 3 = 300pts - Display Image ../rank3.jpg

Example:

Notice in the first question I am using text to represent the rank, in this case, eparisek has achieved Private First Class.  In the second question example, I am representing the rank/title with the insignia of PFC as an image.  Of course, it would be properly spaced and shown on all other pages where rank/titles are represented.

 


Update:
Using last listed suggestions to use custom images to show users examples:
I set all borders to zero (0) and used white backgrounds surrounding my images.  Images vary around 30 to 35 pixels square.

Question Page with Images as Titles

Profile Page using Images as Titles

Q2A version: 1.7.4
commented Feb 28, 2017 by sama55
Good follow up. Thanks.
commented Mar 1, 2017 by Nip351
Good follow up derived from great instructions.  Thank YOU!

2 Answers

+5 votes
answered Feb 23, 2017 by sama55
selected Feb 27, 2017 by Nip351
 
Best answer

This is a (user title settings) example. Is this useful for you?

Output:

Settings:

"Admin" > "Users" > "User titles based on points:"

  • <span style="display:inline-block;font-size:80%;line-height:1;padding:1px 2px;background-color:#000000;color:white;border:2px outset #CFB53B;" title="Master"><i class="fa fa-trophy" aria-hidden="true"></i>Master</span>
    300
  • <span style="display:inline-block;font-size:80%;line-height:1;padding:1px 2px;background-color:#7b1005;color:white;border:2px outset #CFB53B;" title="King"><i class="fa fa-trophy" aria-hidden="true"></i>King</span>
    200
  • <span style="display:inline-block;font-size:80%;line-height:1;padding:1px 2px;background-color:#045289;color:white;border:2px outset #CFB53B;" title="Knowledgable"><i class="fa fa-trophy" aria-hidden="true"></i>Knowledgable</span>
    100

If your theme supports FontAwesome, Trophy icon will be shown.

commented Feb 26, 2017 by sama55
edited Feb 27, 2017 by sama55
I posted one example of "text based inline styles" on my answer so that even people without style sheets knowledge can set it. A lot of user titles are shown on various pages. Therefore, user title HTML should be shorter.

I will show another example.

"Admin" > "Layout" > " Custom HTML in <head> section of every page:"

<style>
.qa-user-title {
    display:inline-block;
    font-size:80%;
    font-weight: normal;
    line-height:1;
    padding:1px 2px;
    background-color:#000000;
    color:white;
    border:2px outset #CFB53B;
    margin-right:0.25em;
}
.qa-user-title-1 {
    background-color:#000000;
}
.qa-user-title-2 {
    background-color:#7b1005;
}
.qa-user-title-3 {
    background-color:#045289;
}
.qa-user-title-4 {
    background-color:#9E9E9E;
    border: none;
    border: 1px solid #7e7e7e;
}
.qa-user-title-5 {
    background-color:#9E9E9E;
    border: none;
    border: 1px solid #7e7e7e;
}
</style>

"Admin" > "Users" > "User titles based on points:"

<span class="qa-user-title qa-user-title-1">Master</span>
1000
<span class="qa-user-title qa-user-title-2">Seasoned</span>
500
<span class="qa-user-title qa-user-title-3">Ace</span>
300
<span class="qa-user-title qa-user-title-4">Regular</span>
100
<span class="qa-user-title qa-user-title-5">Rookie</span>
0

This is settings of my system. Actually, user title styles are defined in the theme CSS. You can check HTML and style code with development tool of your browser.

http://www.powerqa.org/qa/

Addition, you can also use images (JPEG, animated GIF, PNG) as user titles. Since image (IMG tag) is an inline element, style code of user title will be easier.

Example1 (inline image):

<img class="qa-user-title qa-user-title-1" src="http://your-site-url/qa-theme/SnowFlat/images/qa-user-title-1.png">
1000
etc, etc

By specifying the width with the style sheet, you can change the size of the image for each page.
.qa-user-title {
width:100px;
...
}
.qa-template-question .qa-user-title {
width:150px;
...
}

Example2 (background image):

<span class="qa-user-title qa-user-title-1">Master</span>
1000
etc, etc

.qa-user-title {
width:100px;
height: 50px;
background-repeat: no-repeat;
background-position: left top;
...
}
.qa-user-title-1 {
background-image: url(http://your-site-url/qa-theme/SnowFlat/images/qa-user-title-1.png);
}
.qa-user-title-2 {
background-image: url(http://your-site-url/qa-theme/SnowFlat/images/qa-user-title-2.png);
}
...
commented Feb 27, 2017 by Nip351
edited Feb 28, 2017 by Nip351
Perfect, thank you so much.  I removed the borders (just made all borders 0) from the CSS for all the title images so only the image is displayed and it looks great.  

I added two screenshot examples of what I did with Images as Titles using military rank.

Thank you so much!
0 votes
answered Feb 21, 2017 by ProThoughts
You can check badges plugin...there is demo on below site...check

http://demo.question2answer.info
commented Feb 21, 2017 by Nip351
I did already and this does not touch titles, thank you.
...