I'm trying to achieve this > https://i.imgur.com/DO5ty3H.png
I've been fiddling with the main.css file and there is this expandotxt component, which lets you define this. There's also this expandotxt img component, which I thought must have to do with the image posts.
I tried manipulating the two using the following snippets like adding it first to the expandotxt component, removing it then adding it to the expandotxt img component and vice versa. When I set the background to transparent for image posts, it also sets the background to transparent for text posts. I've tried setting only the expandotxt component to have a border but then all image posts seem to have a border again. Isn't there a way to separate the two?
background-color: transparent;
border-radius: 10px;
padding: 10px;
border: 1px solid #898989;
What is the CSS component I'm missing here? I'd be really thankful if any of you could provide tips on going about this.
Solution
Added the following class to main.css
.expandotext {
background-color: transparent;
border-radius: 5px;
border: 1px solid #000000;
padding: 10px;
}
Added the following lines in expando.js (Notice expandotext from main.css)
expando.classList.add('expandotext');BELOW
expando.querySelector('.expandotxt').innerHTML = data.content;
expandotxt was the original. You need to add another css class to the template page where the text expandos get created in the js - https://phab.phuks.co/source/throat/browse/master/app/static/js/Expando.js$89-94 ... after line 93 where it assigns the content to that div. Use js classList to add your new tag.
expando.classList.add('onlytextposts');Then use the border css with that new class. (you also have to run
npm run buildafter changing any css for it to minimized again so it can go live)edit: this above is if you want to only add the css class to the text posts, below on line 138 is if you only want to add css classes to only the images