Possible to target specific page with CSS?

Tirual

Is it possible to target a specific page with CSS, in the appearance tap?
For example when i edit the css for buttons in the appearance tap i edit ALL BUTTONS on all sites, even profile page etc..
Is there a way i can target only profile page, and edit the style without effecting other pages??

datitisev

Tirual Hm, not sure about that. There is an issue open for tags (flarum/core327), but that seems to be all there is.

Razor

I think it can be done by targeting properly classes. For example:
If u target just .Button it will change all buttons, but if u use something more specific like .Button--link it will affect only buttons with links.
In your case, u want to edit buttons on profile page. Open inspect on chrome or on browser you use and than target specific button. For button posts u can use li.item-posts, for discussion li.item-discussions etc.
If u can be more specific what is exactly what you want to change.

Tirual

I did that and it worked, however most classes is the same, if you edit buttons on profile page it will effect other pages too, as they have the same class.
What i want is a parent class on each page, so if i want to edit buttons on profile page ill do .profile .button—link

Pollux

Tirual so if i want to edit buttons on profile page ill do .profile .button—link

There is a <div class="UserPage"> inside <main class="App-content"> which allows to address all .button--link elements inside it, e.g. the Like and Reply buttons below the user's posts:

CSS: .UserPage .button--link {...}

The links in the header bar, however, are not inside <div class="UserPage">, so they can't be targeted that way. And if you try to have different rules for different tags, you're out of luck as well. The types of pages you can address are:

.IndexPage, .DiscussionPage, .UserPage, and in the case of the pages extension .Pages-page.

nitaaikumar

Pollux This really helped me a lot. Thanks for taking the time to reply.