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.
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?
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;
}
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
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" />
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...
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.
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
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.
What are you trying to do adding meta properties on blocks???
I'm not, it just gets added. If I remove it, it comes back. If I save and ignore it - it duplicates.
Can third-party blocks be added to the 'Choose type of block'?
Quote from: [chrisB] on February 04, 2023, 06:47:43 PM
Can third-party blocks be added to the 'Choose type of block'?
No, that is not possible.
Perhaps if you explain what you are trying to accomplish we can help you.
With html blocks and php blocks there is really no limit to what you can do...
Quote from: [chrisB] on February 04, 2023, 06:47:43 PM
I'm not, it just gets added. If I remove it, it comes back. If I save and ignore it - it duplicates.
cannot reproduce that: I copied your code, put it in a html block and it works...
by the way, you should not declare header and body sections in a block: those already exist on the page. This block works fine for me...
<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>
<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>
Quote from: [chrisB] on February 04, 2023, 06:47:43 PM
I'm not, it just gets added. If I remove it, it comes back. If I save and ignore it - it duplicates.
Can third-party blocks be added to the 'Choose type of block'?
Do you have any other mods installed? That doesn't sound like a TinyPortal issue. As in I didn't realise we even added meta tags.
I've managed with one part, I can't figure out how to remove the useless scroll bar.
(https://i.imgur.com/XJEKfOD.png)
https://poetryartonline.com/
QuoteDo you have any other mods installed? That doesn't sound like a TinyPortal issue. As in I didn't realise we even added meta tags.
Could it be caused the Pretty URLs Pro mod? Thinking about it, links sometimes add the pretty URL on top of the code which forms the links which means they break.
With pretty URLs anything is possible I guess... I really do not like that mod
Quote from: @rjen on February 04, 2023, 07:52:38 PM
With pretty URLs anything is possible I guess... I really do not like that mod
Ditto. ;) I don't use it either for same reasons.