QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

Block [TinyPortal] CSS

Started by [chrisB], Jan 23, 2023, 10:18 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

[chrisB]

I'm in the process of adding blocks to my site.

I have an issue with CSS effecting other blocks outside the code.

Type of block: HTML/Javascript

To add the CSS, I use <style> insert code </style> - my question is how do I restrict the CSS to work only within the block. Is it possible?

This is the offending code.
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

My way around it which prevents the issue, is to repeat the code but for each social media link.

Example

Quote.fa-facebook {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa-twitter {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa-instagram {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

This is fine, but I am wondering is there a way to just restrict the css inside the <style></style> so that if CSS outside of the black has the same value it won't be effected.

I'm sorry if this isn't clear, or if it's confusing. I have tried to be as detailed and clear as I feel I can be, I'm no coder, it does confuse the hell out of me but I am trying to pick up stuff.

If you want to limit the block css to only affect elements in the block you will need to make the classes specific to that block

So instead of class fa-facebook use class name block1-fa-Facebook...


@rjen

If you want to limit the block css to only affect elements in the block you will need to make the classes specific to that block

So instead of class fa-facebook use class name block1-fa-Facebook...