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

[Clipz]

Hello, 
I need help adding a css border around certain awards. 
I don't really know what to do to make this happen so help will be appreciated a lot! 

This is what i want to do:


If i can have some help that would be great. The reason i want to do this is because it looks a lot cleaner and neater. 

[Mastersly]

check this if you still on the forum
<-- removed unwarranted link -->

[Crazycat]

In the css of the award, add:

border: 2px #FF0000 solid;
border-radius: 10%;

Change the color and the weight to match what you want and the border-radius value to round as you need (50% => circle, 0% => rectangle)

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

[Omar G.]

Now you shall be able to use Image Template or Class Template awards, the CSS will apply to both, it matters not, since in the post above I mentioned I was using a default / stock installation. I changed nothing else and nothing else should be needed to be changed.

That is it.

[kbilly]

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: 1em solid;
 //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.

I have added the above two codes to the realtive templates and then everything to the global.css, i can't see the border around the awards icons.


   

Already hard refreshed and cleared cache, even on cloudflare.

[Omar G.]

Please paste the HTML output here for the full awards box in your profile and your global.css file here, or simply share your forum url.

My first guess is your cache isn't updated, but apparently you don't think that is the issue so I can't keep guessing until I got a shot.

Provide as many details as reasonably for the support you expect.

[kbilly]

I was able to make something like this and i like it.

   

I just used the code

fa-border

as i'm using fontawesome icons as award icons.

Thanks for your support.

[Omar G.]

Oh, if you are using Font Awesome it might be a better approach to use its internal classes I suppose then.

Thanks for sharing your solution.

[kbilly]

Hello Omar!

I used your provided css to make my awards look different colors.

Hence, i used it like this:

//This will apply to all awards
*[class*='ougc_award_'] {
}

.ougc_award_1 {
 color: #c203c8 !important;
	padding: 0.5px;
}

.ougc_award_2 {
 color: #e70016 !important;
	padding: 0.5px;
}

.ougc_award_3 {
 color: #ffbf00 !important;
	padding: 0.5px;
}

In this way, the border was automatically created by using the code from fontawesome ,which i used like this in the award Image/class field:

fab fa-black-tie fa-2x faa-tada animated-hover fa-border

Now the fontawesome icons look like much better with different colors and this was what i wanted to archieve

Thankyou for your help and time.

Regards.