How to add CSS to certain pages? Feed

Product Support

AI-generated summary

How to add CSS to certain pages? Feed

flash wants to make three changes to the feed page: make images responsive on mobile, remove the about section, and expand topics by default. They provided CSS code for the first issue, but need help with the other two.

nolo suggested posting screenshots to clarify the desired changes, and flash provided an image to explain.

nolo noted that the Follow-plugin is being used and suggested using the .user-follows-page class to target the feed page. They also mentioned that the expanded or collapsed state of posts might require template changes.

Don provided CSS code to remove the top about section on the user’s own follow page. flash successfully used a similar code snippet, but prefers Don’s version to allow users to see others’ pages.

flash plans to clone the plugin to try and expand topics by default.

1

I want to make some changes to the feed page only. Im only using the default theme.

If the users comment is expanded and there is an image, the image is not responsive running off the page on safari mobile browser.

This seemed to fix it but not sure if any issues on other pages will occur.

.lightbox-wrapper img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: auto;
}

Second I would like to remove the about section as its the users info themselves and dont see a point in having them see their own information at the top.

This section display none

.user-main .about

Third I want to make it expanded as default if possible so the feed is like a normal feed where they can see who the follow their comments.

2

Any idea if this is possible to remove the section on mobile?

3

You can add css to the mobile section to hide it.

4

Yes but that would hide the section on other pages too that use .user-main .about

Im trying to stream line the feed page where the user doesnt need to see their own about section on top if using smaller mobile devices.

5

That and trying to auto expand the topics in feed also. So they dont have to go one by one opening to read the topics.

6

Maybe you could post some screenshots of what you want to achieve? At least me, I don’t understand which view you want to change exactly and how.

7

image
image1125Ă—1916 111 KB

Thanks. So on the feed page on mobile I want to remove the top section since it’s the users own info. I know it has the expand but really not needed on a page to view the posts of who the user follows.

The default there is also collapsed state where you have to expand them one by one. And if a post has an image it shows the url until it’s open. I want to make the feed visible instead of collapsed.

8

Looks like you’re using the Follow-plugin. I don’t have that installed, so could only chime in with some general remarks:

Every user page add it’s own class to the body element:
Screenshot from 2021-12-02 15-27-04
E.g. on the Activities page it’s .user-activity-page. On Messages it’s .user-messages-page. So I assume on the Follow page it’s probably .user-follows-page? You can use that class to only hide the top section on that page. Though you should take into account that you’ll get a jumpy interface if you only hide it on one view.

About the expanded or collapsed state of the posts, I don’t think you can target that with CSS. The plugin’s template for that view probably defaults to the collapsed post-excerpt. So you’d need to change the default right on the template.

9

This will remove the top about section on the users own follow page. If I understand correctly what you want to do. :slightly_smiling_face:

Paste this to mobile css section.

body.user-follow-page {
  .viewing-self {
    .user-main .about {
      display: none;
    }
  }
}
10

Thanks I was able to get it with this

.user-follow-page .user-main .about{
    display: none;
}

But I think

sounds better so they can see others pages lol. Didnt think of that lol

11

I’ll try to clone the plugin and see what i can do to mess with it and expand everything by default. :thinking: