More
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

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 build after 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

[–] 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.
[–] pembo210 1 points (+1|-0) Edited

i edited my comment, i forgot we moved those to the Expandos.js file

put expando.classList.add(expandotext); on line 93

im all mixed up, you confused me by asking if you can turn off a feature that hasn't been made.. that above adds a text tag to the textpost, for only image expandos, you'll need to add it tp line 138 where the image expandos are - https://phab.phuks.co/source/throat/browse/master/app/static/js/Expando.js$138

expando.classList.add('expandoimages');
[–] curious [OP] 0 points (+0|-0)

im all mixed up, you confused me by asking if you can turn off a feature that hasn't been made

Gee. Really sorry about that...I'm dumb!

you'll need to add it tp line 138 where the image expandos are - https://phab.phuks.co/source/throat/browse/master/app/static/js/Expando.js$138

Thanks a bunch.
[–] curious [OP] 0 points (+0|-0)

@pembo210 Finally added a solution section to my original post after it came out to my satisfaction :D

Now, need to move next to the post.js file when a user goes to the post. Which lines should I be looking here?

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

in conclusion:

You asked for help turning turn off a feature that you're trying to get help building and haven't made yet. now my head hurts :p

in expandos.js

  • line 89 creates the box that all of them need to use, dont mess with it
  • line 93 is the text post
  • line 136 is image posts

edit: ok that worked :)
[–] curious [OP] 0 points (+0|-0)

You asked for help turning turn off a feature that you're trying to get help building and haven't made yet. now my head hurts :p

Sorry about that ;D I'm going to take a break as I'm the only one who comes with one problem or the other :D :D

[–] 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*!
©2016-2022 Phuks LLC. All Rights Reserved.
ToS | Privacy | Changelog | Canary | Donate | Bugs | License
Served by 08495c768707