Hey,
I’m using a flebox twice on the same page – one for multiple articles and one for a single headlining article.
Is there a way I can edit the css of one of the two without affecting the other? Maybe if it’s a little tricky… setting a custom class somewhere, or creating a new flexbox template?
Hello,
Each flex block has it’s own particular settings from the tagdiv composer. Changing the setting for one flex block, will not affect the other one on that page.
Thank you!
Hey thanks for replying.
I understand what you’re saying, but I’m not trying to change the setting – rather I’m adding new css properties to one and not the other.
Example.
Flexbox 1:
(do nothing, keep it normal)
Flexbox 2: {
border: 1px grey solid;
box-shadow: 1px 0 20px grey;
}
The only thing I’ve been able to find that changes it is
.td_module_flex_1 .td-module-container but that changes both flexboxes.
Hello,
If you want to add custom css to only affect one block but not the other, you have to use the extra class setting: https://www.screencast.com/t/tJFrrtzy
You can then use your custom css to target the specific block:
.mycustomclass{
border: 1px grey solid;
box-shadow: 1px 0 20px grey;
}
Thanks
Hey,
Sorry for the late reply – but that won’t work.
That shadow, in the css, I’m trying to put around each article, not the whole element. Sorry, I should have probably been more specific earlier.
The problem is that if I do any of the above suggestions it will affect everything and not ONLY the articles I’m trying to make look like cards.
I think, what I need to do is duplicate the flexbox element and change the classes.
So for example:
1 flexbox at the top of the homepage
– let’s call it flexbox because it’s the default
1 flexbox lower on the homepage
– let’s call it flexbox2
– then I can change the class names (eg. .td-module-container-home2)
To make the end result looks like this: https://imgur.com/a/Q0TlIq4
I think what I need help with now is can you tell me how I can add a second flexbox? Or what files I would need to duplicate?
Thanks!
Hello,
There is no need to duplicate the flex block from the theme code. you can add as many instances to the flex block as needed on the same page. There is no limit on how many flex blocks you can add.
If you use a custom class for the blocks you need altered, you can use the class just on those blocks and you will not affect any others. Say you have 3 flex blocks on a page and you want just 1 or 2 altered, you simply place the class in the extra class field and the blocks will receive the css.
Example:
Let’s say we call the custom class ‘flex-custom’
You would add this code in your theme panel-> custom css:
.flex_custom .td-module-container{
border: 1px solid lightgrey;
box-shadow: 1px 0 20px #949292;
border-radius: .25rem;
}
Then simply add the extra class to the flex block you want to have the custom style:
https://www.screencast.com/t/BHgS1Qlh
Any other block that will not have this class will not get the style.
Thanks.
Thank you!
I completely forgot I could do that.
