MyBB Community Forums

Hi,
Today I want to give you a Special Tutorial.
Colored Border Awards in Your Postbit Step By Step.
Sorry For My Bad Eng
You Ready ?? Lets Do it !

1. Download & Install OUGC Awards System Click Thanks For Omar G.
2. After Install - Go to ( Configuration > Settings > Plugin Setting > OUGC Awards )
3. And Do this Settings :

• Maximum Awards in Posts 30
  
• Maximum Awards Per Line 0
  
• Maximum Awards in Profile 30
  
• Items Per Page 20
  
• Leave Other Settings To Default
  

4. Then Go to ( Templates & Style > Themes > Choose Your Theme And Click Edit it > Go To Custom.css & Edit Stylesheet Advance mode )
5. After That You Need to add This Code in Your Custom.css

.Color {height:20px;width:20px;margin:.6px;padding:3px;border:2px solid red;border-radius:30%;background: #1D1D1D;}

+ Note-1 : ( .Color ) Your Border Color Options Name. You can change to any name you want.
+ Note-2 : ( border:2px solid red; ) Your Border Color. You can change to any color you want, You can use color tag . ex : #313131
+ Note-3 : ( background: #1D1D1D; ) Your Award Background Color. You can change to any color you want. Recommended : #1D1D1D
+ Note-4 : You can adjust margin or padding or Size of your award according to your template.
6. Now Click Save Changes & Close.
7. Go To Your ( Cpanel & anything that you use ) & Upload Your Award Image in File manager. You can Upload ( PNG - SVG - WEBP - GIF ) Formats.
8. Then You Need to Go ( Users & Groups > Manage Awards > Create a Catagory )
9. now, Click ( Your Catagory > Add Award )

• Enter a name any you want.
  
• Enter a short description.
  
• Choose your catagory
  
• In ( Image / Class ) Section, Add This Code Inside the field.
  

<a href="awards.php?view=1" title="Trusted User"><img class="Color" src="YOUR_IMAGE"></a>

+ Note-1 : ( src="YOUR_IMAGE" ) Your Award Image Address. You must enter your image address.
For Example : ( /images/trusted.png ) > /image/ < is my folder in file manager & trusted.png  < my image name.
+ Note-2 : ( class="Color" ) Your Css Code Name. If you remember My Class Name was [ .Color ]
+ Note-3 : ( title="Trusted User" ) Your Award Title. I named it : Trusted User. You can rename any you want.
+ Note-4 : ( href="awards.php?view=1" ) Your Award Order ID. You Must Enter a ID for Your award, I named it (1)
Because I'm Creating my first Award. After that you have to identify your Awards according to ID.
For Example : Trusted User Award ID >(href="awards.php?view=1) Best User Award ID >(href="awards.php?view=2)
Vip User Award ID >(href="awards.php?view=3) and etc.
10. In Template Type Section Choose ( Class Template ).
11. In Visible Section Choose YES For Show Your Award In Postbit.
12. In Type Section Choose Both.
13. In Order Section You Need To Enter Your Award ID. For Example : (href="awards.php?view=3) Your ID is (3)
If Order ID different then Not Working.
14. Submit & back to ( manage awards > awards > View ). If you do correctly, Your Award Image Can be seen.
15. Then Click Your Award ( Options > Give > Enter Username > Enter Reason > Submit )
16. Go To Your Website, You can See Amazing, Colored Awards In Postbit : )
17. For Add New Award With New Color, Do 5. & 9. steps with Different Class Name, Different Names, Different Colors, Different Images and Different ID's.
18. Its Done . Hope you enjoy ( ♥ )

SCREENSHOT

---

User Awards In Right Side of Member Profile Tutorial Coming Soon.

Hi. It confuses me that in step #9 you share incomplete and not closed code. Are you sure your code is correct?

Maybe the following could be helpful to you:
https://community.mybb.com/thread-222276...pid1343723

(2020-02-26, 10:53 AM)Omar G. Wrote: [ -> ]Hi. It confuses me that in step #9 you share incomplete and not closed code. Are you sure your code is correct?

Maybe the following could be helpful to you:
https://community.mybb.com/thread-222276...pid1343723

Hi Omar G.

Undoubtedly, your tutorial is impeccable. 
But This Code Its Correct & work !
if You Say. I will Edit It.

Thank you for the tutorial. It seems working the way I need! However, I have a got a little issue when putting code into Image/Class section. I get this - http://prntscr.com/rysesm and on postbit http://prntscr.com/rysf8d
Any idea where can be an issue? Also, would be possible to give a guide where I need to look at to create something like this in the profile?  http://prntscr.com/rysfm0 Everything is going vertically and I'd need horizontally. Shall i play with one of the templates in OUGC awards?

Thank you in advance!


EDIT: The code indeed looked a bit weird, so after testing for awhile I have came across the fact that we need to remove </a> at the end. So it worked perfectly!!

However, I am still looking for a solution in the member's profile 

https://community.mybb.com/thread-226559.html
with 2 steps