3

fixed Is there a way to remove borders from image posts and keep them for text posts and vice versa?

posted by curious on phuksdev

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

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

Thanks pembo. I'm going here step by step (for my own reference later). Please correct where I"m going wrong.

expandotxt was the original. You need to add another css class to the template page

So I've created this new class expandoimages in main.css only for images.

.expandoimages{
  background-color: transparent;
}

Next I open expando.js and add the following line above expando.innerHTML = '<div class="expandotxt"></div>'; Notice that it's the new class, expandoimages

expando.innerHTML = '<div class="expandoimages"></div>';

In post.html file. Use the expandoimages class just created for image posts in the following line. (around line 60)

<div class="expandoimage" data-pid="@{post['pid']!!s}" data-t="lnk" title="Show image" data-link="@{post['link']!!e}"><div data-icon="image" class="icon expando-btn"></div></div>

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

no, line 89 creates the div (<div class="expandotxt"></div>) that the expandos need. You have to add another css tag to that already created div. By changing that class, you're breaking all the rest of the expandos.

Posted by curious
edited
Score: 3 (+3|-0)

/s/phuksdev

27 subscribers

Future home of how-tos for running and developing stuff for Phuks.

Current dependencies

Moderators

Created by pembo210

Sub Log Banned Users