I need help to adapt a CSS Stylesheet for WikiText blockquote

[Hanlon]

I found a simple stylesheet for blockquotes and tinkered a bit. I like the result so far.

the Stylesheet

<style>
.caps-quote{
  text-align: center;
  font-size: 3.3rem;
  margin: auto;
  padding: 15px;
  border: 2px solid black;
  max-width: 70%;
  position: relative;
  margin-top: 100px;
}
blockquote{
color:<<colour ThemeColor>>;
  font-variant: small-caps;
  font-family:OCR_A_Bold;				/*This font is embedded.*/
  position: relative;
  z-index: 20;
line-height: 1.2em;
border-left: none;
}
.left{
  position: absolute;
  top: -50px;
  left: -20px;
  width: 150px;
  text-align: left;
  z-index: 10;
  font-size: 8rem;
color:<<colour ThemeColor>>;			/*This is to quickly switch the color in the sidebar.*/
  background-color: #ffffff;
  line-height: 200px;
}
.right{
  position: absolute;
  bottom: -50px;
  right: -20px;
  width: 150px;
  text-align: right;
  z-index: 10;
  font-size: 8rem;
color:<<colour ThemeColor>>;
  background-color: #ffffff;
  line-height: 200px;
}
cite, small{ 											 /*using cite-class for the WikiText-call but it interferes with search results*/
  font-size: 1.7rem;
color:<<colour ThemeColor>>;
  position: relative;
  z-index: 20;
  font-variant: normal;
font-family:"Brush Script MT";			/*This is a placholder-font. work in progress.*/
  
  &:before{
	content: "&#128488; &nbsp;";
    width: 5px;
  }
}
</style>

I can use it in HTML but using the class cite interferes with other fields in the wiki like the search results in the sidebar.

<div class="caps-quote">
  <span class="left">&#128632;</span>
  <blockquote>
    Never attribute to malice that which is adequately explained by stupidity. 
  </blockquote>
  <small>Robert J. Hanlon (maybe)</small>
  <span class="right">&#128630;</span>
</div>

I want to use the style in WikiText like:

<<<
Lorem ispum
<<< somebody

I tried to compare it to .tc-big-quote from the core and adjust it but I am lost in CSS.

When it is working I want to transfer it from the style-block to a global stylesheet-tiddler.

Is it possible to rewrite the CSS to use it with WikiText or is it easier to write a new procedure that is called with different classes for the quote and the cite?

I put it on my demo-site TinkerShop on Tiddlyhost

[Scott_Sauyet]

I think the easiest trick is to nest your CSS rules so they won’t interfere with other parts of the site. Just use a unique class for the outermost wrapper. I would also use the :before and :after pseudoclasses for your large quotation marks. That means you no longer need a wrapper and should be able to use either HTML or wikitext versions of the blockquotes.

I think this gets you relatively close. I had to shove some things around to deal with the slightly altered markup, and you might still have to tweak positions, left-margins, and text-indents to get precisely what you want.

<<<.caps-quote2
 Never attribute to malice that which is adequately explained by stupidity. 
<<< Robert J. Hanlon (maybe)

<style>
blockquote.caps-quote2 {
  text-align: center;
  font-size: 3.3rem;
  margin: auto;
  padding: 20px;
  border: 2px solid black;
  max-width: 70%;
  position: relative;
  margin-top: 100px;
  text-indent: 50px;
  &:before {
    content: "&#128632;";
    position: absolute;
    top: -50px;
    left: -80px;
    width: 150px;
    text-align: left;
    z-index: 10;
    font-size: 8rem;
    color:<<colour ThemeColor>>;			/*This is to quickly switch the color in the sidebar.*/
    background-color: #ffffff;
    line-height: 200px;
  }
  &:after {
    content: "&#128630;";
    position: absolute;
    bottom: -50px;
    right: -20px;
    width: 150px;
    text-align: right;
    z-index: 10;
    font-size: 8rem;
    color:<<colour ThemeColor>>;
    background-color: #ffffff;
    line-height: 200px;
  }
  cite, small{	 /*using cite-class for the WikiText-call but it interferes with search results*/
    font-size: 1.7rem;
    color:<<colour ThemeColor>>;
    position: relative;
    z-index: 20;
    font-variant: normal;
    font-family:"Brush Script MT";			/*This is a placholder-font. work in progress.*/
    &:before{
	  content: "&#128488; &nbsp;";
      width: 5px;
    }
  }
}
</style>

[Hanlon]

Many Thanks!
This is 95% of the way. I will tweak the rest.
TIL: since end of 2023 you can nest native CSS.