Board Thread:Support Requests - Designing Your Wiki/@comment-27179086-20200518052630/@comment-27179086-20200518072651

Andrewds1021 wrote: The custom border is actually just 4 background images (one per corner) with transparent parts. As for the transparency, I went ahead and did that for you.

Here is a very brief explanation of what is going on if you care to read it.

CSS actually deals with opacity which is the antonym of transparency. 100% transparent is 0% opaque and 100% opaque is 0% transparent.

To give a color transparency, you need to specify the transparency. This requires that you specify colors by components rather then by names such as "red" and "orange". Chances are you already do this. The most common form is the hexadecimal representation (ex. "#feac20"). Modern browsers support an extended version of this where there are 8 digits; the last two representing opacity. For example, "#feac2000" is the previous color example but with no opacity (i.e. completely transparent).

Unfortunately, older browsers don't support the 8-digit hexadecimal format. If you want to support older browsers, you will need to use either the "rgba" function or the "hsla" function. I assume you are not specifying colors using HSL so I won't go into that function. The "rgba" function has the same order as the hexadecimal representation. So going with the same color, it would be "rgba(254, 172, 32, 0)". The first 3 components are the direct conversion of the hexadecimal digits; so the range is 0 to 255. The opacity is specified as 0 to 1.

If this didn't make sense to you but you want to try to understand it, then I suggest the following pages for more details.
 * named colors
 * color values

Note that you can give an entire element transparency by using the opacity property. Valid values are 0 to 1. Oh wow thank you! The explanation is really helpful, thanks so much!

I guess my question would be, since there is a background image, how did they put 4 of them in together as a border? For example, in this template, they did this

https://tos.fandom.com/zh/wiki/Template:齊心抗疫

''' 減少出門，避免聚集， 戴好口罩，記得洗手. 神魔維基一直在你「隔離」

Another template used div class = box.

https://tos.fandom.com/zh/wiki/Template:綜合公告欄


 * 用戶如要協助編輯及留言，請先註冊賬號並登入維基.

I would assume they defined "box module" and "box" class within the css? But I couldn't find it.

https://tos.fandom.com/zh/wiki/MediaWiki:Wikia.css

Just curious, thanks in advance