CSS code

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox
Who the problem concerns : A few members
Forum link : https://magicoverflow.slovenianforum.com/

Description of problem

Hello. One of our members wants to use this CSS as a template in posts. I wonder is it possible that this CSS code could work in a post or must he covert it to html?

Code:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Overlock&display=swap" rel="stylesheet">
<div class="fromnowon">
  <div class="isawthesun">
    <div class="begintodim">Lyrics 1</div>
    <div class="amanlearns"><img src="https://via.placeholder.com/350x150"></div>
    <div class="whoisthereforhim">Lyrics 2</div>
  </div>
  <div class="ifallwaslost">
    <div class="itledmeback">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur commodo turpis eget pulvinar. Vivamus quis vehicula neque. Pellentesque condimentum tellus nisi, vel dignissim purus tincidunt vel. Nulla sollicitudin neque congue nibh suscipit convallis. In arcu velit, scelerisque vel neque sit amet, pretium bibendum augue. Nullam et nisi lectus. Nulla facilisi. Aenean auctor augue quis sem eleifend, ut volutpat ex interdum. Etiam tempus risus finibus, commodo metus vel, elementum mi. Pellentesque eget nisi in sem imperdiet luctus. Maecenas vel leo convallis, faucibus nunc accumsan, lacinia felis. Phasellus ut odio tincidunt, molestie est sit amet, interdum quam.<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur commodo turpis eget pulvinar. Vivamus quis vehicula neque. Pellentesque condimentum tellus nisi, vel dignissim purus tincidunt vel. Nulla sollicitudin neque congue nibh suscipit convallis. In arcu velit, scelerisque vel neque sit amet, pretium bibendum augue. Nullam et nisi lectus. Nulla facilisi. Aenean auctor augue quis sem eleifend, ut volutpat ex interdum. Etiam tempus risus finibus, commodo metus vel, elementum mi. Pellentesque eget nisi in sem imperdiet luctus. Maecenas vel leo convallis, faucibus nunc accumsan, lacinia felis. Phasellus ut odio tincidunt, molestie est sit amet, interdum quam.<p>
    </div>
    <div class="backtoyou">Tag</div>
  </div>
</div>

<style type="text/css">.fromnowon {width: 450px;
height: auto;
background: #202020;
margin: 0px auto;
border: 0px transparent;}

.isawthesun {width: 450px;
height: 250px;
background: transparent;}

.begintodim {padding: 10px;
text-transform: uppercase;
line-height: 150%;
font-size: 18px;
color: var(--accent);
font-family: 'Mountains of Christmas', cursive;
font-family: 'Overlock', cursive;}

.amanlearns {width: 350px;
height: 150px;
margin: 5px auto;}

.amanlearns img {width: 350px;
height: 150px;
object-fit: cover;}

.whoisthereforhim {padding: 10px;
text-transform: uppercase;
line-height: 150%;
font-size: 18px;
color: var(--accent);
float: right;
font-family: 'Overlock', cursive;}


.ifallwaslost {overflow: hidden;
padding-top: 5px;
margin: 0px auto;
width: 400px;
height: auto;
}

.itledmeback {border-top: 3px solid var(--accent);
width: 400px;
height: auto;
padding: 5px;
line-height: 150%;
color: white;}

.backtoyou {margin-bottom: 10px;
padding: 5px;
width: 400px;
border-top: 3px solid var(--accent);
text-transform: uppercase;
font-family: 'Overlock', cursive;
color: white;}

.g3-gryfondom {--accent: #CC2B2B;} /* Gryfondom */
.g4-pihpuff {--accent: #E6BB0E;} /*    Pihpuff */
.g6-drznvraan {--accent: #2769A3;} /* Drznvraan */
.g8-osebje {--accent: #C2239D;} /* Staff */
.g7-profesorji {--accent: C2239D;} /* Prof */
</style>

hello

can we have a screenshot of that CSS code please or a link to see it as a result

That is not CSS coding.

Of course you can put it in a post as a template, but what you want to get with this template, which is not CSS is an HTML code with built-in css.
Also depend on whether the administrator has activated the HTML in the forums, if not, it can not be done because nothing will be seen, only the code.

HTML is activated. It looks like this on my forum:

The background should change colour depending on the group of the member. Like this:

Hi , provide a link to a live preview where you applied the code to see what the exact problem is, for example create an html page.

Thanks !