TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 10:18:43 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,106
  • Total Topics: 21,213
  • Online today: 358
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 120
  • Total: 120

How do you target specific blocks with CSS?

Started by [chrisB], February 04, 2023, 01:02:24 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

[chrisB]

How do you target specific blocks with CSS?

Blocks have ID's, but I am unsure how to target them with CSS. Would someone please be able to explain how I can do this? Thanks in advance.

@rjen

To help you better with an example: what exactly are you trying to accomplish?

I assume you want to target elements IN the block? If so what elements?

Or are you trying to change the block itself?
If so, what are you trying to do?
Running Latest TP on SMF2.1 at: www.fjr-club.nl

[chrisB]

My CSS edit removes the roundframe from the forum, but it also strips it from the blocks itself. So, I am trying to target the block itself in order to add the attributes of the roundframe CSS directly to the block itself.

Example

.block14 {
margin: 10px 0 0 0;
    padding: 12px 16px;
    background: #f8f8f8;
    border: 1px
px
solid #c5c5c5;
    border-radius: 7px;
    box-shadow: 0 -2px 2px rgb(0 0 0 / 10%);
    overflow: auto;
}

@rjen

The blocks can be identified with ID's not classes.
The ID is made up of the type of block and the name of the block.

For example: I have a scriptbox with the title "Ishetmotorweer".
The ID for the block is now: id="scriptbox_Ishetmotorweer"
(see first attachment from the inspector)

To target the box itself with css I need to taget the id, not a class...

#scriptbox_Ishetmotorweer {
margin: 10px 0 0 0;
    padding: 12px 16px;
    background: #f8f8f8;
    border: 1px
px
solid #c5c5c5;
    border-radius: 7px;
    box-shadow: 0 -2px 2px rgb(0 0 0 / 10%);
    overflow: auto;
}


The result in the second attachment
Running Latest TP on SMF2.1 at: www.fjr-club.nl

[chrisB]

Rodger that, much appreciated.

I have two sliders that I would like to have on my homepage, both use their own code but for some reason they inflect with each other.

So I thought I would add a .css file to my hosting, then seperate the two by name but for some reason despite them having links to different .css files - both use the same one.

Top Sider
  <script src="https://poetryartonline.com/files/jquery.min.js"></script>
  <script src="https://poetryartonline.com/files/jquery.bxslider.js"></script>
  <link rel="stylesheet" href="https://poetryartonline.com/files/artslider.css">


Bottom Slider
  <script src="https://poetryartonline.com/files/jquery.min.js"></script>
  <script src="https://poetryartonline.com/files/jquery.bxslider2.js"></script>
<link rel="stylesheet" href="https://poetryartonline.com/files/photographyslider.css">


One of the sliders code in full would look like this;
<html>
<head>

  <script src="https://poetryartonline.com/files/jquery.min.js"></script>
  <script src="https://poetryartonline.com/files/jquery.bxslider.js"></script>
  <link rel="stylesheet" href="https://poetryartonline.com/files/artslider.css">

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>
<meta property="og:url" content="https://poetryartonline.com/index.php" />
<meta property="og:description" content="Poetry & Art! Online  - TP admin" />
<meta property="og:site_name" content="Poetry & Art! Online " />
<meta property="og:type" content="website" />
</head>
<body id="tpbody" class="tpcontainer">

  <div class="slider">
    <div>  <li><img src="https://poetryartonline.com/files/art/slider1-min.jpg" alt=""></li></div>
    <div><li><img src="https://poetryartonline.com/files/art/slider2-min.jpg" alt=""></li></div>
<div><li><img src="https://poetryartonline.com/files/art/slider3-min.jpg" alt=""></li></div>
<div><li><img src="https://poetryartonline.com/files/art/slider4-min.jpg" alt=""></li></div>
<div><li><img src="https://poetryartonline.com/files/art/slider5-min.jpg" alt=""></li></div>
</div>


Neither have the same images, but the css is a something I cannot figure out how to stop conflicting with other.

Also, every time I edit a block like this:

Tiny Portal throws the same line in again
Quote<meta property="og:url" content="https://poetryartonline.com/index.php" />
   <meta property="og:description" content="Poetry & Art! Online  - TP admin" />
   <meta property="og:site_name" content="Poetry & Art! Online " />
   <meta property="og:type" content="website" />

So, if I edit the block 3 times: this happens.
<meta property="og:url" content="https://poetryartonline.com/index.php" />
<meta property="og:description" content="Poetry & Art! Online  - TP admin" />
<meta property="og:site_name" content="Poetry & Art! Online " />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://poetryartonline.com/index.php" />
<meta property="og:description" content="Poetry & Art! Online  - TP admin" />
<meta property="og:site_name" content="Poetry & Art! Online " />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://poetryartonline.com/index.php" />
<meta property="og:description" content="Poetry & Art! Online  - TP admin" />
<meta property="og:site_name" content="Poetry & Art! Online " />
<meta property="og:type" content="website" />

@rjen

Is there a question here?

I think you are not understanding what happens when you are calling css or scripts in a block: the css that is called in the block is actually relevant to the entire page that displays the block. So when you are calling a css in a block this will affect ALL elements in the page, not just the block.

By calling multiple css files and scripts you are effectively piling all on top of each other, creating all sorts of issues.
One of the easier to understand results is that when css files target the same element, then only the LAST loaded style will be applied...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

[chrisB]

Quote from: @rjen on February 04, 2023, 05:17:47 PM
Is there a question here?

I think you are not understanding what happens when you are calling css or scripts in a block: the css that is called in the block is actually relevant to the entire page that displays the block. So when you are calling a css in a block this will affect ALL elements in the page, not just the block.

By calling multiple css files and scripts you are effectively piling all on top of each other, creating all sorts of issues.
One of the easier to understand results is that when css files target the same element, then only the LAST loaded style will be applied...

The question should be: How can I have different css styles for both blocks without interferring with the other.

Sorry rjen the bottom part of your message flew over my head, I didn't really understand it. Coding isn't something that comes very natural to me, I can get about but only very limited.

@rjen

That is not a lesson I am willing to give here tbh...

I suggest you start with familiarizing yourself more with css and how it works.
There are plenty of online resources to read up in.

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_works

Note: what you need to look for is how to target elements with parents, the block ID being the parent...

https://carsonf92.medium.com/precise-targeting-with-css-selectors-745237a050b6

Hint: you can specifically target img elements in the block with ID "scriptbox_block1" like so..

#scriptbox_block1 img {
   border: 1px solid #c5c5c5;
   border-radius: 7px;
}

this will ONLY affect the images in the block with ID scriptbox_block1
Running Latest TP on SMF2.1 at: www.fjr-club.nl

[chrisB]

I appreciate what you have mentioned, I'll look into it - what I want to do should be possible via the block itself. Thanks!

- Can I add custom blocks to my Tiny Portal site?

I don't mean custom PHP/HTML blocks, I mean physically add my own?

- I don't know if the meta duplication has been mentioned before, but it seems to be a bug like behaviour to me.

@rjen

What are you trying to do adding meta properties on blocks???
Running Latest TP on SMF2.1 at: www.fjr-club.nl