[How To?] OUGC Awards | Add CSS Border around award

[Omar G.]

Here I share how I would do it on a default installation of OUGC Awards.

Open ougcawards_award_image and replace with:

<a href="{$mybb->settings['bburl']}/awards.php?view={$award['aid']}" title="{$award['name']}" class="ougc_award_{$award['aid']}"><img src="{$award['image']}" alt="{$award['name']}" /></a>

Open ougcawards_award_image_class and replace with:

<a href="{$mybb->settings['bburl']}/awards.php?view={$award['aid']}" title="{$award['name']}" class="ougc_award_{$award['aid']}"><i class="{$award['image']} huge fitted link icon"></i></a>

Then, add the following to the bottom of global.css:

//This will apply to all awards..
*[class*='ougc_award_'] {
 border: 1px solid;
 padding: 1px;
 display: inline-block;
 //Any other CSS code applied here as well...
}

// This will apply only to `X` award. Where `X` is the ID for some award.
.ougc_award_X {
 border-color: red;
 //Any other CSS code applied here as well...
}
.ougc_award_2 {
 border-color: pink;
}
.ougc_award_3 {
 border-color: rellow;
}

// ... and so on...

I honestly don't know why I didn't added a default class for awards, probably going to do it on next versions.