3

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;

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;`

10 comments

[–] pembo210 1 points (+1|-0) Edited

No worries. It's been a while since I've looked at some of those. I forget how some of it went together or why certain things are in that specific order.

This is how the site gets better. It's usually just a few lines at a time like this. Now three years later, it almost all works.. mostly.. kinda :)

[–] curious [OP] 0 points (+0|-0) Edited

And thanks to all esp. you, I can now install phuks in a jiffy and I take no more than 20 mins to get it up on my local machine. :)

Even if there are things that go wrong with the installation I'm able to solve it 95% of the time on own!

*take a bow*!